LES MODULES

1. QU’EST-CE QUE UN MODULE?

Les applications Angular sont modulaires et Angular possède son propre système de modules qui est
le ngModule. Chaque application doit avoir au moins un module qui est le module racine
app.module.ts. Dans un projet Angular qui contient plusieurs fonctionnalités, l’application doit être
organisée en plusieurs modules de fonctionnalités. Un module de fonctionnalités est un ensemble de
classes et d’éléments dédiés à une fonctionnalité ou un domaine spécifique de l’application.

Dans Angular, un module est un mécanisme qui regroupe des composants, des directives, des pipes
et des services dont la portée est définie dans ngModule.

Root Module

Module A Module B Module C

Figure 1- Décomposition d'une application Angular

2. Création d’un module

Pour créer un module, on peut utiliser la commande de Angular CLI :

>ng generate module nom-module.

Cette commande permet de créer dans l’arborescence de l’application, un dossier portant le nom du
module et qui contiendra tous les éléments qui se rapportent à ce module, notamment le fichier
nom-module.module.ts.

Le module racine a toujours un composant racine qui est créé au chargement de l’application, mais
tout NgModule peut inclure n'importe quel nombre de composants supplémentaires, qui peuvent
être chargés via le routage ou créés via le template. En plus, le ngModule permet aux composants
d’utiliser des éléments qui sont créés dans d’autres modules.

3. Structure d’un module

Un module Angular est une classe définie à l’aide du décorateur @ngModule et qui décrit les
paramètres du module. Ses propriétés sont :

a- Declarations
C’est une propriété qui déclare les classes de vue (composants, directives et pipes) qui
composent le module.

3BI - IHEC | Framework de développement web 1

 b- Exports
Renseigne les classes de vue qui peuvent être exportées afin d’être utilisées par d’autres
modules.
c- Imports
Contient toutes les classes de vue importées à partir d’autres modules et nécessaire pour le
fonctionnement du module courant.
d- Providers
Fournit les services et les injections de dépendances.
e- Bootstrap
Uniquement dans le module racine app.module.ts. Renseigne le composant qui sera affiché
en premier au lancement de l’application.

Module
imports
Autres Composants
exports
modules
Pipes declarations
providers
Directives

Figure 2-Structure d'un module Angular

4. CONCLUSION

Les applications Angular sont modulaires, ce mécanisme est assuré par le ngModule qui offre un
même contexte de compilation pour les composants et les éléments d’un même module. Si dans une
petite application Angular on peut se permettre d’avoir un seul module qui est le module racine
app.module.ts ; dans un grand projet, il est impératif de décomposer l’application en plusieurs
modules de fonctionnalités.

3BI - IHEC | Framework de développement web 2