Introduction au Bootstrapping

Un NgModule décrit comment les parties de l'application s'emboîtent. Chaque application possède au moins un module Angular, le module racine que vous amorcez pour lancer l'application. Par convention, il est généralement appelé AppModule.

Si vous utilisez la CLI Angular pour générer une application, la valeur par défaut AppModule est la suivante :

Après les instructions d'importation de classe, le décorateur @NgModule.

Le décorateur @NgModule identifie AppModule et NgModule en tant que classe, @NgModule prend un objet de métadonnées qui indique à Angular comment compiler et lancer l'application.

• declarations : AppComponent, composant unique de l'application.
• imports : import de BrowserModule, FormsModule et HttpClientModule pour avoir des services spécifiques au navigateur, tels que le DOM etc...
• providers : les fournisseurs de services.
• bootstrap : composant racine créé et inséré par Angular dans la page index.html.

La tableau "declarations"

La declarations indique à Angular quels composants appartiennent à ce module. Au fur et à mesure que vous créez d'autres composants, ajoutez-les aux declarations.

Vous devez déclarer chaque composant dans une classe NgModule. Si vous utilisez un composant sans le déclarer, Angular renvoie un message d'erreur.

Le declarations prend seulement des objets déclarables. Les objets déclarables sont des composants, des directives et des pipes. Les objets déclarables doivent appartenir à un seul module, le compilateur émet une erreur si vous essayez de déclarer la même classe dans plusieurs modules.

Ces classes déclarées sont visibles dans le module mais invisibles pour les composants d'un module différent, sauf si elles sont exportées à partir de ce module et que l'autre module importe celui-ci.

Voici un exemple de ce qui entre dans un tableau de déclarations :

Un déclarable ne peut appartenir qu'à un seul module, donc ne le déclarez que dans un seul. Lorsque vous en avez besoin ailleurs, importez le module contenant le déclarable dont vous avez besoin.

Utilisation de directives avec @NgModule

Utilisez le tableau pour les directives. Pour utiliser une directive, un composant ou un pipe dans un module, vous devez le déclarer comme ceci :

• Exportez-le du fichier où vous l'avez écrit.
• Importez-le dans le module approprié.
• Déclarez-le dans le tableau declarations @NgModule.

Ces trois étapes ressemblent à ce qui suit. Dans le fichier où vous créez votre directive, exportez-la. L'exemple suivant, ItemDirective est la structure de directive par défaut que la CLI génère dans son propre fichier item.directive.ts :

Le point clé ici est que vous devez l'exporter pour pouvoir l'importer ailleurs. Ensuite, importez-le dans le NgModule, dans cet exemple app.module.ts, avec une instruction d'importation JavaScript :

Et dans le même fichier, ajoutez-le au tableau declarations @NgModule

Vous pouvez maintenant utiliser votre ItemDirective dans un composant. Cet exemple utilise AppModule, mais vous le feriez de la même manière pour un module de fonctionnalité. Vous utiliseriez également la même technique pour les pipes et les composants.

N'oubliez pas que les composants, les directives et les tuyaux appartiennent à un seul module. Vous ne devez les déclarer qu'une seule fois dans votre application, car vous les partagez en important les modules nécessaires.

La section "imports"

Le section "imports" du module apparaît exclusivement dans l'objet de métadonnées. Il indique à Angular à propos d'autres NgModules que ce module particulier doit fonctionner correctement

Cette liste de modules est celle qui exporte des composants, des directives ou des pipes référencés par les modèles de composant de ce module. Dans ce cas, le composant est AppComponent, qui référence des composants, des directives, ou des pipes en BrowserModule, FormsModule, ou HttpClientModule. Un modèle de composant peut référencer un autre composant, une directive ou un pipe lorsque la classe référencée est déclarée dans ce module ou que la classe a été importée à partir d'un autre module.

La section "providers"

Le tableau de fournisseurs est l'endroit où vous répertoriez les services dont l'application a besoin. Lorsque vous répertoriez des services ici, ils sont disponibles dans l'ensemble de l'application. Vous pouvez les définir lors de l'utilisation de modules de fonctionnalités et du chargement différé.

La section "bootstrap"

L'application se lance en amorçant la racine AppModule, également appelée entryComponent. Entre autres choses, le processus d'amorçage crée le ou les composants listés dans le tableau bootstrap et les insère chacun dans le DOM du navigateur.

Chaque composant démarré est la base de sa propre arborescence de composants. L'insertion d'un composant amorcé déclenche généralement une cascade de créations de composants qui complètent cette arborescence.

Bien que vous puissiez placer plus d'une arborescence de composants sur une page Web hôte, la plupart des applications ne possèdent qu'une seule arborescence et amorcent un seul composant racine.

Ce composant racine unique est généralement appelé AppComponent et se trouve dans le tableau bootstrap du module racine.