Angular, le plus que template (partie 1) – les directives

On commence aujourd’hui avec un gros morceau : AngularJS. Pourquoi un gros morceau ? Parce que c’est sans doute le framework MVC JavaScript dont on a le plus entendu parlé dernièrement, peut être parce qu’il est soutenu par Google en personne.

FrontEnd ready… only

AngularJS est un framework dédié au développement Front End, de façon analogue à Ember.js.
Contrairement à un React ou un Meteor, il ne s’occupe pas du côté serveur. Pour le Back End, libre à vous de choisir la technologie de votre choix, du moment que le contenu est servi via une API RESTFull (Best Practices forever).

AngularJS a la particularité de pouvoir se bootstraper sur n’importe quelle application web. Plus concrètement vous pouvez tester AngularJS sur une partie bien particulière de votre application Web sans casser le reste du FrontEnd, ni être obligé de l’utiliser de partout.
Il est bien sûr possible également de démarrer un projet from scratch avec pour objectif de réaliser une « One page web app » comme se plaisent à l’appeler nos homologues Anglophones.

HTML5 en ligne de mire

S’il y a une chose à retenir d’AngularJS c’est sa compatibilité avec HTML5 et surtout sa capacité à enrichir HTML5 avec ses propres balises HTML.
Disons que vous désirez construire une page avec un en-tête contenant le titre de votre site, un menu vertical sur la gauche, le contenu au centre en un footer en pied de page, voici à quoi pourrait ressembler votre code HTML :

Balises HTML personnalisées… ou Directives

Les Directives sont au coeur de l’utilisation d’AngularJS, les concepteurs du framework ayant pour objectif d’inciter un maximum de développeurs à utiliser des balises HTML sémantiques. Avec les directives, autant vous dire que c’est simple d’abonder dans leur sens !

L’intérêt des directives, mis à part un code source HTML plus facile à comprendre est le chargement asynchrone des données qu’elles contiennent.
Prenons la balise « <my-header></…> » par exemple, elle est composée de 2 fichiers :

my-header.html (contenant le html à afficher)

my-header.js (contenant le javascript créant la balise)

On note que le fichier my-header.html est explicitement appelé par la directive my-header.js. Cet exemple est très simple puisque le contenu HTML est statique (il ne fait intervenir aucune source de data extérieure, ni aucune variable) mais il démontre un aspect très intéressant du framework : la hiérarchisation des éléments de templating au seing de l’application développée.

Un des avantages de cette façon de procéder est que chaque fragment de html ainsi chargé (aussi nommé « partial« ) est récupéré par AngularJS via une requête XHR. Ainsi le squelette de la page peut se charger immédiatement, les données contenues dans les directives étant affichées indépendamment et récupérées de façon asynchrone.

Poupées Russes

Autre avantage des directives, c’est qu’elles peuvent s’imbriquer, comme n’importe quel élément HTML. Voici les HTML composant la directive leftNavigation :

Vous avez bien vu : une autre balise html est appelée : <navigation-item>.
un attribut spécial ng-repeat est utilisé dans cet exemple. Cet attribut permet de boucler sur un tableau JavaScript nommé navigationItem défini dans la directive navigationLeft ci dessous (ligne8) :

Et pour finir, la directive navigation-item complète :

Notez au passage l’utilisation de la notation {{variable}} et l’accès à « nav » défini dans le fichier navigation-left.html (regardez attentivement l’attribut ng-repeat) .

Comme vous pouvez le voir dans cet exemple, je choisi délibérément de fractionner mes directives en deux fichier :

  • Un fichier ma-directive.js contenant la déclaration de ma directive, attachée au module AngularJS courant.
  • Un fichier ma-directive.html contenant l’ensemble des éléments qui seront affichés à l’écran.

Comme vous pouvez le voir dans navigation-left.js, une méthode controller apparait, fournissant la variable navigationItem au template navigation-left.html et à ses enfants.

Je rentrerais dans les détails concernant les controllers lors d’un prochain billet.