AngularJS : less code more fun

L’idée majeure derrière AngularJS c’est le constat qu’HTML n’a pas été conçu pour développer des applications. Pour pallier ce manque le framework propose d’étendre HTML pour y insérer ses propres balises et comportements et d’y intégrer la notion de vues dynamiques. A la différence des autres frameworks la notion de template n’existe pas car le template c’est le HTML, le HTML c’est la vue.

Le projet est né chez Google et conçu par Misko Hevery, Igor Minar et Vojta Jina. Tous trois développeurs Java à la base. Misko étant un des lead des tests chez Google, les tests ont donc une part importante dans la conception du projet. C’est notamment une des raisons pour laquelle l’injection de dépendance est intégrée au framework à travers la notion de module. Le principe étant que tout soit testable. C’est une des différence fondamentale avec les autres frameworks et c’est ce qui le rend bien plus pertinent.

Passons maintenant au code : ici un modèle concrétisé par un objet « Patient », une vue concrétisé par une page HTML des plus basiques et un controleur faisant le lien entre les deux :

Le modèle :

La vue :

Le controleur :

Ce qui donne :

Cet exemple montre la clarté et la simplicité de l’implémentation du modèle MVC et la présence implicite du data-binding. Notez qu’il n’y a pas de « main() ». Le simple fait de déclarer l’attribut ng-app initialise l’application. Ensuite celle-ci se construit au travers d’un ensemble de « modules » qui peuvent être de 4 types : controller, service, filter, directive.

Introduisons maintenant une date. C’est un bon test pour analyser un framework. Le problème est alors le traitement du type Date qui implique une conversion. Un classique dans nos framework Java la plupart du temps géré par un composant permettant la saisie d’une date et son affichage. Pour AngularJS, coté affichage, les « filters » permettent d’une manière simple de formatter l’affichage. Coté saisie rien : AngularJS n’est pas un framework de composant. Il faut créer son composant permettant de saisir la date. Ceci est plutôt une bonne chose que de s’en faire imposer un car la manière de saisir une date varie souvent suivant le contexte. AngularJS ne propose que des composants de base et offre ainsi la possibilité d’utiliser une bibliothèque de composant externe. Un projet annexe s’est créé pour permettre à tous de proposer des composants : angular-ui.
Passons à la mise en oeuvre et introduisons la notion de « directive » qui permet de transformer un input[type= »text »] en un composant de saisie de date en utilisant simplement l’attribut « ui-date ». Le code reste lisible, celui lié au traitement de la date est déporté dans la « directive » qui s’appuie, dans cet exemple, sur jquery-ui :

Pour bien faire on s’assure du bon fonctionnement de la directive par un test :

Libre ensuite de changer le comportement du composant, comme ci-dessous en remplaçant par un masque de saisie :

Le HTML n’a pas été modifié. Toute la logique est dans le composant uiDate qui est une extension de l’élément input. C’est clair et bien construit, facilement testable et réutilisable.

Mais quel est ce « $scope » et à quoi sert-il ?
Quelles autres options pour concevoir des composants ?
On se garde ça pour le prochain article 😉

2 réflexions sur « AngularJS : less code more fun »

  1. Petite correction dans le code du premier exemple. Tu n’as pas mis le binding du model dans les deux input.

    Et merci pour l’article, c’est sympa de lire des posts en français, ça nous change un peu

Les commentaires sont fermés.