Angular-Material: la création simple de visuel ============================================== ![category](web) ![tag](javascript) ![tag](angularjs) Google a développé en plus d'angular un module permettant de créer facilement des visuels nouvelles générations. Ce module nommé **angular-material** permet de mettre en place rapidement les élements les plus basiques des applications: menus, slider, .... mais aussi de gérer facilement via la notion **flex** la problématique des multi-terminaux. Installation ------------ Comme pour **AngularJs** on utilise l'outil bower ```bash bower install angular-material ``` Utilisation ----------- La structure d'un projet AngularJs avec angular-material reste identique. Angular-material intervient principalement dans le fichier index.html ```html .... ... ... ``` et app.js ```javascript var module = angular.module("MyAppli", ['ngMaterial']); ``` Exemple ------- Exemple de mise en place d'une application avec un menu et une gestion des terminaux mobiles fichier html ```html ...
Open My Appli Other button
TODO
``` fichier app.js ```javascript var module = angular.module("MyAppli", ['ngMaterial']); // add controler module.controller('AppController', function($scope, $mdSidenav) { // manage display $scope.openLeftMenu = function() { $mdSidenav('left').toggle(); }; $scope.showNavIcon = function() { return !$mdSidenav('left').isLockedOpen(); }; $scope.selectView = function(view) { if ($scope.showNavIcon() && $mdSidenav('left').isOpen()) { $scope.openLeftMenu(); }; }; }); ``` Doc --- Il est possible d’installer en local la doc d’angular material ```bash``` npm install -g gulp git clone https://github.com/angular/material cd material npm install gulp build gulp docs cd dist/docs