Voici maintenant le temps réaliser un petit exercice simple qui mettra en vedette un contrôleur, une vue et quelques directives AngularJS.
Récits utilisateurs (user story) à réaliser
En tant que gestionnaire, je veux afficher la liste des projets à compléter.
En tant que gestionnaire, je veux rechercher un projet dans la liste.
Pour réaliser le premier récit, la première étape est de mettre en place une structure qui permettra d’entreposer les données de nos projets. Je vous propose d’utiliser un tableau d’objets JSON.
|
1 2 3 4 5 6 |
[ {name: '1 Installer yeoman', progress:80}, {name: '2 Générer un projet avec le générateur Angular-fullstack', progress:30}, {name: '3 Lancer le projet', progress:10}, {name: '3 Exécuter les tests avec succès', progress:0}, ]; |
Ajoutons cette structure dans un nouveau contrôleur. Ce contrôleur nécessite l’objet $scope qui nous permettra de partager des données avec la vue. L’injection de dépendance est donc utilisé. Pour créer un nouveau contrôleur facilement, référez à la documentation de votre générateur.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
'use strict'; angular.module('gestionPrj') .controller('ProjetsCtrl', function ($scope) { $scope.mesProjets = [ {name: '1 Installer yeoman', progress:80}, {name: '2 Générer un projet avec le générateur Angular-fullstack', progress:30}, {name: '3 Lancer le projet', progress:10}, {name: '3 Exécuter les tests avec succès', progress:10}, ]; }); |
La vue correspondante est aussi simple que :
|
1 2 3 4 5 6 7 |
<ul> <li ng-repeat="project in mesProjets"> {{ project.name }} - {{ project.progress}} % </li> </ul> |
Passons au prochain récit utilisateur.
En tant que gestionnaire, je veux rechercher un projet dans la liste.
Afin de réaliser ce récit, quelques modifications doivent être apportées au code précédent.
- Un champ texte sera ajouté.
- Ce champ texte doit utiliser la directive ng-model. Cela nous permettra une association bidirectionnelle (binding) entre une variable du $scope et du contenu du champ texte.
- Finalement, un filtre est ajouté à notre directive ng-repeat. Ce filtre est basé sur le contenu de notre champ de texte.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
'use strict'; angular.module('gestionPrj') .controller('ProjetsCtrl', function ($scope) { $scope.mesProjets = [ {name: '1 Installer yeoman', progress:80}, {name: '2 Générer un projet avec le générateur Angular-fullstack', progress:30}, {name: '3 Lancer le projet', progress:10}, {name: '3 Exécuter les tests avec succès', progress:10}, ]; $scope.filtreProjet = ""; }); |
Le formulaire et son champ sont ajoutés à la vue.
|
1 2 3 4 5 6 7 8 9 10 11 |
<form> <input type="text" ng-model="filtreProjet"> </form> <ul> <li ng-repeat="project in mesProjets | filter:filtreProjet"> {{ project.name }} - {{ project.progress}} % </li> </ul> |
Conclusion
- La communication entre la vue et le contrôleur est réalisée grâce au $scope.
- L’objet $scope est injecté dans le contrôleur par AngularJS grâce au principe d’injection de dépendance.
- Une association (binding) est réalisée entre une variable $scope et un élément graphique grâce à ng-model.
- {{}} et ng-bind sont équivalents.
- Il est possible d’itérer sur un tableau grâce à la directive ng-repeat.
Un filtre peut-être appliqué à ng-repeat avec la syntaxe » | filter:expression « .
Nouveau récit utilisateur à réaliser
En tant que gestionnaire, je veux visualiser les informations complètes (nom, date-début, date-fin, responsable et progrès) lorsque je clique sur un item. Le projet sélectionné sera affiché à droite du moteur de recherche dans la même page.
Il serait intéressant d’utiliser la barre de progrès offerte par Boostrap afin de mieux visualiser l’avancement du projet.
Indices pour réaliser le défi :
- Création d’une nouvelle fonction afficherProjet(projet) appelée dans la directive ng-click.
Besoin d’un générateur?
Ne pas oublier les fichiers cachés dans l’archive.
Lancer les commandes suivantes pour compléter l’installation.
|
1 2 3 4 5 6 7 |
$ npm install $ bower install $ grunt test $ grunt serve |
Références AngularJS
ngRepeat
https://docs.angularjs.org/api/ng/directive/ngRepeat
ngModel
https://docs.angularjs.org/api/ng/directive/ngModel
ngBind
https://docs.angularjs.org/api/ng/directive/ngBind
$scope
https://docs.angularjs.org/guide/scope
Facebook Comments