Modules de fonctionnalités

Au fur et à mesure que votre application grandit, vous pouvez organiser le code correspondant à une fonctionnalité spécifique. Cela aide à appliquer des limites claires pour les fonctionnalités. Avec les modules de fonctionnalités, vous pouvez garder le code associé à une fonctionnalité spécifique ou à une fonctionnalité séparée des autres codes. La délimitation de zones de votre application facilite la collaboration entre les développeurs et les équipes, la séparation des directives et la gestion de la taille du module racine.

Modules de fonctionnalités et modules racine

Un module de fonctionnalité est une meilleure pratique organisationnelle, par opposition à un concept de l'API Angular de base. Un module de fonctions fournit un ensemble cohérent de fonctionnalités axées sur un besoin d'application spécifique, tel qu'un flux de travail utilisateur, un routage ou des formulaires. Bien que vous puissiez tout faire dans le module racine, les modules de fonctionnalités vous aident à partitionner l'application en zones ciblées. Un module de fonctionnalité collabore avec le module racine et avec d'autres modules via les services qu'il fournit et les composants, directives et canaux qu'il partage.

Comment faire un module de fonctionnalité

En supposant que vous ayez déjà une application que vous avez créée avec la CLI Angular, créez un module de fonctionnalité à l'aide du CLI en entrant la commande suivante dans le répertoire du projet racine. Remplacez-le CustomerDashboard par le nom de votre module. Vous pouvez omettre le suffixe "Module" du nom car le CLI l'ajoute :

Le CLI crer un dossier appelé customer-dashboard avec un fichier à l'intérieur appelé customer-dashboard.module.ts avec le contenu suivant :

La structure d'un NgModule est la même, qu'il s'agisse d'un module racine ou d'un module de fonctions. Dans le module de fonctionnalités généré par le CLI, il y a deux instructions d'importation JavaScript en haut du fichier :

• Les premières importations NgModule, qui, comme le module racine, vous permettent d'utiliser le décorateur @NgModule.
• Les secondes importations CommonModule, qui contribuent à de nombreuses directives communes telles que et ngIf et ngFor.

Les modules de fonction importent CommonModule à la place de BrowserModule, ce qui n'est importé qu'une fois dans le module racine. CommonModule contient uniquement des informations pour les directives courantes telles que ngIf et ngFor qui sont nécessaires dans la plupart des modèles, tandis que BrowserModule l'application Angular est configurée pour le navigateur, ce qui ne doit être fait qu'une seule fois.

Le tableau de déclarations vous permet d'ajouter des déclarables, qui sont des composants, des directives et des canaux appartenant exclusivement à ce module. Pour ajouter un composant, entrez la commande suivante sur la ligne de commande où customer-dashboard est le répertoire où le CLI a généré le module de fonctionnalité et CustomerDashboard est le nom du composant :
Cela génère un dossier pour le nouveau composant dans le dossier customer-dashboard et met à jour le module de fonctionnalité avec les informations CustomerDashboardComponent suivantes:

Le CustomerDashboardComponent est maintenant dans la liste d'importation JavaScript en haut et ajouté au declarations tableau, ce qui permet à Angular de savoir associer ce nouveau composant à ce module de fonctionnalité.

Importer un module de fonctionnalité

Pour intégrer le module de fonctionnalités à votre application, vous devez laisser le module racine app.module.ts le connaître. Remarquez l'exportation CustomerDashboardModule au bas de customer-dashboard.module.ts. Cela l'expose afin que les autres modules puissent y accéder. Pour l'importer dans AppModule, ajoutez-le aux importations dans app.module.ts et au imports tableau :

Maintenant, le module d'application connaît le module de fonctionnalité. Si vous deviez ajouter des fournisseurs de services au module de fonctionnalité, AppModule en aurait également connaissance, de même que tout autre module de fonctionnalité. Cependant, les NgModules n'exposent pas leurs composants.

Rendu du modèle de composant d'un module de fonctions

Lorsque l'interface de ligne de commande générait le module CustomerDashboardComponent de fonctionnalité, elle incluait un modèle customer-dashboard.component.html, avec le balisage suivant :

Pour voir ce code HTML dans le fichier AppComponent, vous devez d'abord exporter le fichier CustomerDashboardComponent dans le fichier CustomerDashboardModule. Dans customer-dashboard.module.ts, juste en dessous de la declarations tableau, ajoutez un exports tableau contenant CustomerDashboardComponent :

Ensuite, dans le AppComponent, app.component.html, ajoutez la balise ‹app-customer-dashboard› :

Maintenant, en plus du titre qui s'affiche par défaut, le modèle CustomerDashboardComponent affiche également :