2. Corso base AngularJS Beniamino Ferrari 2
Angular Material
● Angular Material è un framework di componenti UI angular-
native di Google. È un'implementazione di riferimento del
Material Design di Google e fornisce più di 30 componenti e
servizi dell'interfaccia utente essenziali per le applicazioni
AngularJS mobili e desktop.
3. Corso base AngularJS Beniamino Ferrari 3
Prima Installazione npm (1)
● Visual Studio Creare nuova C# WebApplication con supporto WebApi
●
Aggiungere file index.html
● Eseguire comando
npm i -S angular angular-animate angular-aria angular-material
● Aggiungere nell’header della pagina
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Angular Material style sheet -->
<link rel="stylesheet" href="node_modules/angular-material/angular-material.min.css">
4. Corso base AngularJS Beniamino Ferrari 4
Prima Installazione npm (2)
● Aggiungere il body come segue
<body ng-app="MyApp">
<script src="node_modules/angular/angular.min.js"></script>
<!-- animation -->
<script src="node_modules/angular-animate/angular-animate.min.js"></script>
<!-- acessibility support-->
<script src="node_modules/angular-aria/angular-aria.min.js"></script>
<script src="node_modules/angular-material/angular-material.min.js"></script>
<script>
angular.module('MyApp', ['ngMaterial'])
.run(function () { console.log('my app is ready !') });
</script>
</body>
5. Corso base AngularJS Beniamino Ferrari 5
Tabs
● Le direttive Angular md-tabs e md-tab vengono utilizzate per mostrare le tabs.
●
Md-tabs è contenitore che raggruppa più elementi md-tabs
<md-tabs md-selected="1" md-align="bottom”>
<md-tab label="tab1">
<md-tab-body>
<h1>Welcome to first tab</h1>
<md-tab-body>
</md-tab>
….
</md-tabs>
6. Corso base AngularJS Beniamino Ferrari 6
Attributi di md-tabs e md-tab
● I più importanti attributi di md-tabs
– md-selected: indice del tab attivo o selezionato
– md-align-tabs: attributo che indica la posizione dei pulsanti di tabulazione: in basso
o in alto (valore bottom o top); l'impostazione predefinita è in alto (valore top).
● I più importanti attributi di md-tab
– label: titolo del tab
– ng-disabled: se presente il tab è disabilitato
– md-on-deselect: se l’epressione associata è vera il tab viene deselezionato
– md-on-select: se l’espressione associata è vera il tab viene selezionato
– md-active: se l’espressione associata è vera il tab è attivo altrimenti è disabilitato
7. Corso base AngularJS Beniamino Ferrari 7
Side Nav (1)
● SideNav è la barra laterale, un elemento dell'interfaccia utente
che visualizza un elenco di scelte. Generalmente appare
come una colonna a sinistra del contenuto principale,
sebbene possa apparire anche sul lato destro.
● La md-sidenav la una direttiva angular per utilizzare la
SideNav
8. Corso base AngularJS Beniamino Ferrari 8
SideNav (2)
<script>
angular
.module('firstApplication', ['ngMaterial'])
.controller('sideNavController', sideNavController);
function sideNavController($scope, $mdSidenav) {
$scope.openLeftMenu = function () {
$mdSidenav('left').toggle();
};
}
</script>
9. Corso base AngularJS Beniamino Ferrari 9
SideNav (3)
<div id="sideNavContainer" ng-controller="sideNavController"
layout="row" ng-cloak>
<md-sidenav md-component-id="left" class="md-sidenav-left">
Welcome to Angular Matrial
</md-sidenav>
<md-content>
<md-button ng-click="openLeftMenu()">Open Left Menu</md-button>
</md-content>
</div>
10. Corso base AngularJS Beniamino Ferrari 10
SideNav (4)
● md-is-open: imposta un valore booleano a una variabile di scope
quando la sidebar è aperta o chiusa es. md-is-open=”left_is_open”
● md-component-id: è l’attributo che associa l’identificativo
compoenId che viene usato dal serivzio $mdSidenav
● $mdSidenav è servizio che controlla la sidenav
● $mdSidenav(‘my-md-component-id’).toggle(); apre sidenav
● $mdSidenav(‘my-md-component-id’).close(); chiude sidenav
11. Corso base AngularJS Beniamino Ferrari 11
NgSideNav (4)
● Esponiamo un esempio su come cambiare il contenuto della pagina
quando viene premuta una voce della sidenav
● Per questo esempio è necessario installare ngRoute, quindi oltre
all’installazione base di angular material,
eseguiamo il comando
– npm install angular-route
aggiungiamo nella pagina dopo il link ad angular
– <script src="node_modules/angular-route/angular-route.min.js"></script>
–
12. Corso base AngularJS Beniamino Ferrari 12
NgSideNav (5)
<script>
angular
.module('MyApp', ['ngMaterial', 'ngRoute'])
.controller('AppCtrl', function ($scope, $mdSidenav) {
$scope.toShow = "home";
$scope.toggleLeft = function () {
$mdSidenav("left") .toggle();
};
$scope.close = function () {
$mdSidenav('left').close();
};
$scope.show = function (toShow) {
$scope.toShow = toShow;
};
});
</script>
14. Corso base AngularJS Beniamino Ferrari 14
NgSideNav (7)
<md-content flex="" layout-padding="" layout="column" layout-align="top center">
<md-button ng-click="toggleLeft()" class="md-primary">
Toggle left
</md-button>
<div ng-switch="toShow">
<div ng-switch-when="home">
Home!
</div>
<div ng-switch-when="work">
Work!
</div>
</div>
</md-content>
</div>
15. Corso base AngularJS Beniamino Ferrari 15
md-select (1)
● Mostra un input di selezione
● La selezione verrà impostata nella variabile di scope definita
all’interno dell’attributo ng-model.
● All’interno di un elemento md-select ci sono n elementi md-
option solitamente elencati tramite una ng-repeat
16. Corso base AngularJS Beniamino Ferrari 16
md-select (2)
<div ng-controller="MyCtrl">
<md-select ng-model="selectedUser">
<md-option ng-value="user" ng-repeat="user in
users">{{ user.name }}
</md-option>
</md-select>
</div>
18. Corso base AngularJS Beniamino Ferrari 18
Md-dialog (1)
● md-dialog è la direttiva che permette all’elemento contenitore
di essere usato come dialog
● mdDialog, è un servizio che apre una finestra di dialogo per
informare gli utenti e per permettere di prendere decisioni
19. Corso base AngularJS Beniamino Ferrari 19
Md-dialog (2)
<script language = "javascript">
angular
.module('firstApplication', ['ngMaterial'])
.controller('dialogController', dialogController);
function dialogController ($scope, $mdDialog) {
$scope.status = '';
20. Corso base AngularJS Beniamino Ferrari 20
Md-dialog (2)
$scope.showConfirm = function(event) {
var confirm = $mdDialog.confirm()
.title('Are you sure to delete the record?')
.textContent('Record will be deleted permanently.')
.targetEvent(event)
.ok('Yes')
.cancel('No');
$mdDialog.show(confirm).then(function() {
$scope.status = 'Record deleted successfully!';
}, function() {
$scope.status = 'You decided to keep your record.';
});
};
} //fine controller