Blue Flower

Chercher

Généralités

Les modules aident à organiser toute application Angular  en blocs de fonctionnalités cohérentes; les modules permettent d' encapsuler des components (composants), des pipes, des directives et des services. Les modules permettent aux développeurs  de structurer l'ergonomie des applications.

Les applications Angular sont généralement modulaires. Chaque application Angular comporte au moins un module, le module racine, appelé conventionnellement AppModule. Le module racine peut être le seul module d'une petite application, mais la plupart des applications ont beaucoup plus de modules. c'est au  développeur,  de décider comment utiliser les modules.

Tout module Angular est une classe avec le décorateur @NgModule. Les décorateurs sont des fonctions qui modifient les classes JavaScript. Ils sont essentiellement utilisés pour attacher des métadonnées à des classes afin que le système connaisse la configuration de ces classes et leur fonctionnement.

L’AppModule

Comme dit ci-dessus, les applications Angular sont modulaires et Angular possède  son propre système de modules appelé NgModules. NgModule est  une classe décorée avec @NgModule (). Le décorateur @NgModule () est une fonction prenant un seul objet de métadonnées, dont les propriétés décrivent le module. Les propriétés les plus importantes  sont :

  • declarations: ici sont réunis Les composants, les directives et les pipes appartenant à ce NgModule.
  • exports: Le sous-ensemble de déclarations qui devront  être visibles et utilisables dans les templates de composant  d'autres NgModules.
  • imports: Modules dont les classes sont nécessaires au composant de ce module.
  • providers: Services présents dans l'un des modules devant être utilisés dans les autres modules ou composants. Une fois qu'un service est inclus dans providers, il devient accessible dans toutes les parties de cette application.
  • bootstrap: Le composant racine qui est la vue principale de l'application. Ce module racine ne possède que cette propriété et indique le composant à initialiser.

Le principal et premier module de l’application est l’AppModule. Avant découpage de l’application en différents modules, l’AppModule contient l’intégralité de l’application. Après découpage, son rôle est d’importer les modules fournis par Angular (BrowserModule, BrowserAnimationsModule, etc), puis chacun des sous-modules. On distingue 4 types de “sous modules” en général :
    CoreModule : il est unique au sein de l’application. Il ne doit pas être importé que dans l’AppModule. Il contient essentiellement les services singletons communs à toute l’application (par exemple,  un service AuthService qui permet d’accéder à l’utilisateur courant depuis n’importe quel endroit de l’application), ainsi que les composants utilisés seulement dans le template AppComponent (par exemple, le menu de l’application, la barre de navigation, etc.)
    SharedModule : également unique au sein de l’application, il contient tous les composants communs à l’application. Il ne doit fournir aucun service.
    FeatureModule : comme son nom l’indique, il s’agit d’un module propre à  une “fonctionnalité”.  Dans notre cas, nous avons un FeatureModule par entrée du menu principal. Nous avons également un FeatureModule “admin” qui permet d’accéder à l’administration de l’application (seulement pour les utilisateurs autorisés). Ce découpage en FeatureModule permet aussi de séparer proprement le code pour que deux développeurs puissent travailler facilement en parallèle sur des fonctionnalités différentes sans avoir à modifier le fichier app-module.ts. Un FeatureModule peut fournir des services propre à son module, leur durée de vie sera alors la même que celle du module. Par exemple, si votre application propose un système de notifications, il est pertinent d’avoir un NotificationsModule regroupant le composant affichant la liste des notifications, le service correspondant, le composant de détail de notification, etc
les modules de routing.....