Exemple d'interface d'application ================================= ![category](web) ![tag](design) ![tag](angularjs) Une application est souvent composé des même élements: - un menu à droite (qui se reduit en mode mobile) - une toolbar en haut composé d'un titre et de bouton - de plusieurs visuels (qui peuvent modifier la toolbar) Chacun de nos exemples utiliserons angular-material et comportera dans sa partie **head** ```html ... ... ... ``` Au niveau structure de fichier, nos applications auront pour structure ``` app |_ app | |_ app.js | |_ appli1.js |_ css | |_ mycss.css |_ templates | |_ appli1.html | |_ appli2.html |_ index.html ``` les fichiers js et css sont communs fichier app.js ```javascript var app = angular.module("MyAppli", ['picardy.fontawesome', 'ngMaterial' ]); // add theme app.config(function($mdThemingProvider) { $mdThemingProvider.theme('default') .primaryPalette('green') .accentPalette('orange') .warnPalette('red'); }); // add controler app.controller('AppController', function($scope, $mdSidenav) { $scope.getInit = function() { $scope.menus = [{ name: 'appli1', icon: 'cube', template: 'appli1.html' }, { name: 'appli2', icon: 'cubes', template: 'appli2.html' }]; }; // manage display $scope.openLeftMenu = function() { $mdSidenav('left').toggle(); }; $scope.showNavIcon = function() { return !$mdSidenav('left').isLockedOpen(); }; // event $scope.selectView = function(menu) { if ($mdSidenav('left').isOpen()) { $scope.openLeftMenu(); }; $scope.view = menu.name; }; // init data $scope.getInit(); }); ``` fichier appli1.js ```javascript // add controler app.controller('AppControllerAppliOne', function($scope) { var getRandomColor = function() { return Math.floor(Math.random() * 16777215).toString(16); }; $scope.getInit = function() { $scope.menuapplis = [{ name: 'param1', icon: 'cube' }, { name: 'param2', icon: 'cubes', }]; $scope.employees = [{ name: 'John', age: 25, gender: 'boy' }, { name: 'Jessie', age: 30, gender: 'girl' }, { name: 'Johanna', age: 28, gender: 'girl' }, { name: 'Joy', age: 15, gender: 'girl' }, { name: 'Mary', age: 28, gender: 'girl' }, { name: 'Peter', age: 95, gender: 'boy' }, { name: 'Sebastian', age: 50, gender: 'boy' }, { name: 'Erika', age: 27, gender: 'girl' }, { name: 'Patrick', age: 40, gender: 'boy' }, { name: 'Samantha', age: 60, gender: 'girl' }]; for (var i = $scope.employees.length; i > 0; i--) { $scope.employees[i - 1].color = getRandomColor(); }; }; $scope.deleteEmpl = function() { for (var i = $scope.employees.length; i > 0; i--) { if ($scope.employees[i - 1].selected) { $scope.employees.splice(i - 1, 1); }; }; return; }; // init data $scope.getInit(); }); ``` fichier mycss.css ```css /* appli */ md-list-item .md-button { margin-top: auto; margin-right: 10px; margin-bottom: auto; margin-left: auto; } .to-bottom { position:fixed; bottom:10px; right:10px; z-index: 99 !important; } /* angular */ .main{ padding: 20px; } .no-pc { display: none !important; } /* mobile-small */ @media all and (min-width: 0) and (max-width: 960px) { .no-mobile { display: none !important; } } ``` Solution 1 ---------- En vue classique ![201510271003_classic1.png](./upload/201510271003_classic1.png) En vue mobile ![201510271003_mobile1.png](./upload/201510271003_mobile1.png) le principale avantage est que la toolbar est toujours visible même lors de l'appelle du menu de gauche Le principal incovénient : la toolbar est commune à l'ensemble des controllers fichier index.html ```html
Test {{menu.name}}
``` fichier appli1.html ```html

{{ item.name }}

{{ item.age }}

``` Solution 2 ---------- En vue classique ![201510271003_classic2.png](./upload/201510271003_classic2.png) En vue mobile ![201510271003_mobile2.png](./upload/201510271003_mobile2.png) le principale avantage est que la toolbar est unique par application et donc plus facilement modifiable Le principal incovénient : le menu de gauche empiète sur la toolbar fichier index.html ```html
``` fichier appli1.html ```html
Test {{menu.name}}

{{ item.name }}

{{ item.age }}

```