L’équipe Angular a travaillé dur pour nous offrir un framework à l’architecture robuste et évolutive. Et comme ils sont également bons en dessin, ils nous ont offert ce magnifique dessin en guise de spécification :

 

On retrouve ainsi les différents concepts que sont le data binding, les components, les directives, les injectors, et les modules. Nombreux sont les concepts que vous connaissez maintenant, mais il y en a un, en haut, à gauche, dont on n’a jamais parlé : Le module. 

Les applications Angular se doivent d’être modulaires, et pour se faire, Angular utilise son propre système de modularité appelé NgModule.

 

Une application Angular possède au moins un module, le root module, nommé par convention AppModule. Mais bien souvent, elle possède plusieurs modules s’attachant, chacun, à proposer  une fonctionnalité métier, une capacité technique, ou tout ce qui peut rendre votre code clair et modulaire.

 

Attention : il ne faut pas confondre Module et Module ! 

 

Effectivement, Un module Angular n’a rien à voir avec un module JavaScript ES6 du moins au niveau de la provenance :  l’un vient de la norme EcmaScript, l’autre de l’équipe Angular. La norme ES6 (EcmaScript 6) JavaScript propose également son propre gestionnaire de module. Un module JavaScript ES6 est un fichier qui exporte quelque chose (une fonction, une classe ou un objet) que les autres fichiers pourront consommer. Voici un exemple d’utilisation des modules ES6 dans le cadre d’Angular :

 

 

Il faut comprendre que l’on importe l’interface Component de la bibliothèque Angular ‘@angular/core’. Et dans cette dernière bibliothèque, on retrouve un export comme ceci :

 

De l’autre côté, un module Angular regroupe un ensemble de composants Angular dans une même unité logique. Cela peut sembler être un peu déroutant au début, mais il faut comprendre que ces modules sont liés à vos propres souhaits de découpage applicatif. Cela apporte une cohésion applicative. Vous allez comprendre rapidement que les modules Angular ont des similitudes avec les modules ES6, mais également quelques différences notables.

 

 

Le decorateur @NgModule

Un module Angular se matérialise par une classe portant le décorateur @NgModule. Tout comme le decorator @Component, @NgModule est une fonction qui modifie une classe JavaScript pour y ajouter des méta-données. Ces dernières permettent à Angular de connaitre le rôle de la classe et d’alimenter un certain nombre de propriétés. @NgModule prend en paramètre un unique objet possédant diverses propriétés dont les principales sont :

• declarations – Dans cette propriété, vous devez y déclarer les classes de vue de votre module. Par classes de vue, il faut comprendre components, directives et pipes;

• exports – Cette propriété permet de déclarer le sous-ensemble de déclaration qui sera visible par les autres modules;

• imports – Cette propriété permet de déclarer les modules dont dépend notre module;

• providers – Dans cette propriété, vous devez déclarer les services que vous allez créer dans le cadre de ce module. Ces services contribueront à alimenter la collection globlale des services accessibles par tous les composants de l’application;

• bootstrap – Définit le root component qui contiendra l’ensemble des autres components. Seul le root module peut déclarer cette propriété;

• schemas – Les éléments et propriétés qui ne sont pas des components ou directive Angular qui sont à déclarer dans le schéma des MétaDonnées. Les valeurs possibles sont NO_ERRORS_SCHEMA et CUSTOM_ELEMENTS_SCHEMA;

• entryComponents – Cette propriété permet de déclarer tous les components qui sont chargés impérativement, c’est-à-dire dynamiquement sans être déclarés dans un template. C’est par exemple le cas du component qui est chargé lors du bootstrap de l’application (il est déclaré dans le fichier index.html qui n’est donc pas un template) ou des components chargés par le router. Heureusement, Angular fait le travail pour vous dans ces deux cas;

 

Pourquoi ne jamais avoir parlé des modules dans les précédents tutoriels ? Depuis le début, vous utilisez Angular-Cli pour créer vos applications et, depuis le début , c’est Angular-Cli qui gère vos déclarations, imports, et votre bootstrap. J’ai pris le parti de ne pas en parler afin d’assimiler plus facilement les premiers concepts Angular.

 

Pour bien comprendre la mécanique du lancement d’un module Angular, nous allons créer une première application Angular sans Angular-Cli (promis, c’est la dernière fois). Voici donc la version la plus simple de déclaration du module principal Angular AppModule:

 

 

Ce que ce code nous dit :

• que AppModule importe le module BrowserModule comme dépendance.  Cet import est nécessaire pour exécuter une application Angular sur un Browser;
• que AppModule déclare le component AppComponent qui sera donc le Component root de l’application;
• qu’au démarrage de l’application, le (unique) component AppComponent sera lancé. Pour le root module, il est clair que le component déclaré sera celui qui sera lancé.

N.B. : En haut du source de notre module, on retrouve tous les imports TypeScript liés aux éléments que nous manipulons par la suite.

 

Voici le code de notre component AppComponent qui peut difficilement être plus simple :

 

 

Ce component sera placé au niveau de la balise située dans le fichier HTML index.html.

 

Il ne nous reste donc plus qu’à bootstraper notre application (ou plutôt notre module). Par convention, le fichier js responsable du bootstrap se nomme main.ts :

 

 

Nous utilisons ici le système de compilation JIT de la plateforme Browser. Cela permet de compiler nos components, en JavaScript optimisé, à l’exécution de l’application. Il est également possible de réaliser cette transformation au build-time de l’application. Dans ce cas, nous aurions utilisé platformBrowser au lieu de platformBrowserDynamic. Nous reparlerons de ce système fort intéressant dans un autre article ciblé sur ce sujet.

 

 

La suite de cet article est disponible dans le livre Learn-Angular – Maîtriser les concepts du framework Angular pour développer des applications robustes.

Le livre est disponible sur