Corso angular js material

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.

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">

<link rel="stylesheet" href="node_modules/angular-material/angular-material.min.css">

Prima Installazione npm (2)
● Aggiungere il body come segue
<body ng-app="MyApp">
<script src="node_modules/angular/angular.min.js"></script>

<script src="node_modules/angular-animate/angular-animate.min.js"></script>

<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>

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>

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

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

SideNav (2)
<script>
angular
.module('firstApplication', ['ngMaterial'])
.controller('sideNavController', sideNavController);
function sideNavController($scope, $mdSidenav) {
$scope.openLeftMenu = function () {
$mdSidenav('left').toggle();
};
}
</script>

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>

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

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>
–

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>

NgSideNav (6)
<div ng-controller="AppCtrl" layout="column" style="height:500px;" ng-cloak ng-app="MyApp">
<md-sidenav class="md-sidenav-left" md-component-id="left">
<md-toolbar class="md-theme-indigo" layout="row">
<h1 class="md-toolbar-tools">Sidenav Left</h1>
<span flex></span>
<md-button ng-click="close()">Close</md-button>
</md-toolbar>
<md-content layout-padding="" layout="column" layout-align="start start">
<md-button ng-click="show('home')" class="md-primary">Show Home</md-button>
<md-button ng-click="show('work')" class="md-primary">Show Work</md-button>
</md-content>
</md-sidenav>

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>

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

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>

md-select (3)
angular.controller('MyCtrl', function($scope) {
$scope.users = [
{ id: 1, name: 'Bob' },
{ id: 2, name: 'Alice' },
{ id: 3, name: 'Steve' }
];
$scope.selectedUser = { id: 1, name: 'Bob' };
});

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

Md-dialog (2)
<script language = "javascript">
angular
.module('firstApplication', ['ngMaterial'])
.controller('dialogController', dialogController);
function dialogController ($scope, $mdDialog) {
$scope.status = '';

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

Md-dialog (3)
<body ng-app = "firstApplication">
<div id = "dialogContainer" ng-controller = "dialogController"
layout = "row" ng-cloak>
<md-content>
<h4>Confirm Dialog Box</h4>
<md-button class = "md-primary md-raised" ng-click = "showConfirm($event)">
Confirm
</md-button>
<div ng-if = "status">
<br/>
<b layout = "row" layout-align = "center center">
{{status}}
</b>
</div>
</md-content>
</div>
</body>

Corso angular js material

More Related Content

Similar to Corso angular js material (20)

More from Beniamino Ferrari (11)

Corso angular js material