Angular prend également en charge
- le data binding qui évite d’écrire du code pour lier les objets reçus du serveur avec les champs de formulaires. Ce databinding se fait dans les deux sens. Une modification du formulaire impacte le modèle et inversement
- la validation des champs de formulaire
- injection de dépendances facilitant entre autre l’écriture des tests unitaires
- …
- un champ de saisie d’un nom initié à la valeur Javamind
- une zone libellé dans laquelle on affichera le message “Hello nom”
- un bouton permettant d’afficher dans une popup la valeur du champ saisi
controller.js
function MyCtrl($scope) {
$scope.name = "Javamind";
$scope.action = function() {
alert($scope.name)
}
}
index.html
<!doctype html>
<html ng-app>
<head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="http://code.angularjs.org/1.0.6/angular.min.js"></script>
<script src="js/controller.js"></script>
</head>
<body>
<div ng-controller="MyCtrl">
<form>
<label for="name">Hello {{name}}</label>
<input type="text" ng-model="name" id="name"/>
<button ng-click="action()">OK</button>
</form>
</div>
</body>
</html>
résultat
Le champ est directement initié avec la valeur spécifiée et dès que l’on saisit une valeur à l’intérieur, la valeur du libellé est rafraîchie.
Essayons de comprendre ce que fait Angular
Echange de données entre le contrôleur et la vue
Le rôle du contrôleur est de construire le modèle et de le publier à la vue via le scope . Le scope est l’élément qui fait la glu en marshallisant le modèle dans la vue et renvoyant les événements au contrôleur.
Le contrôleur est écrit en Javascript (c’est de l’impératif) et il ne doit contenir aucune information concernant le rendu. Inversement la vue ne contiendra que du HTML et tout traitement sera reporté côté serveur.
Fonctionnement d’Angular
Revenons à notre exemple et détaillons comment se passe le chargement de notre exemple
- Le navigateur charge la page HTML et parse le DOM Document Model Object
- Il charge ensuite le fichier javascript angular.js
- Angular prend la main et attent l’événement DOMContentLoaded déclenché quand le DOM est totalement chargé
- Les directives sont les éléments ajoutés au HTML pour étendre le langage. Au chargement Angular cherche la directive ng-app qui indique l’emplacement à partir duquel il doit commencer son travail. Un ensemble de directives est fournit par le framework pour faciliter la création d’une vue mais vous pouvez créer les votres. Dans l’exemple de code ci dessus on en retrouve plusieurs directives : ng-app, ng-controller, ng-model, ng-click,
- Angular configure ensuite l’objet $injector qui sera utilisé pour instancier les objets, charger les modules, créer le scope général ($rootScope) et le service de compilation $compile
- $compile parse le DOM et récupère toutes les directives. Un scope ($rootScope ou un scope fils) est ensuite associé à chaque élément possédant une directive
- Le service d’interpolation $interpolate est ensuite appeler pour remplir la variable définie comme par exemple {{name}}
Doit on utiliser Angular dans toutes nos applications ?
AngularJS est un peu le framework en vogue en ce moment, mais passer à AngularJS (comme pour tout framework d’ailleurs) ne se fait pas de manière transparente et demande une montée en compétence. Ce framework est destiné à faciliter la construction d’une application CRUD. Dans les autres cas l’intérêt est assez limité
La documentation sur le site d’Angular est très bien faite et propose des exemples de code pour les principaux use case. Pour chaque exemple le site montre également comment mettre en place un test unitaire du contrôleur associé et/ou un test de plus au niveau via e2e (end to end test).
Je vous conseille de commencer par le tutoriel et de vous appuyer sur
- http://docs.angularjs.org/guide définition des principes
- http://docs.angularjs.org/api description de l’API
- http://docs.angularjs.org/cookbook/index des exemples
Pour faciliter le cycle de vie de votre application vous pouvez vous appuyer sur Yeoman.
Aucun commentaire:
Enregistrer un commentaire
Remarque : Seul un membre de ce blog est autorisé à enregistrer un commentaire.