Comprendre les modules dans Angular ​

Qu'est-ce qu'un module ? ​

En termes simples, un module Angular est une manière de regrouper des composants, des directives, des pipes et des services qui sont associés. Tout comme comment les classes sont utilisées pour regrouper des méthodes et des propriétés dans la programmation orientée objet, les modules Angular sont utilisés pour regrouper des fonctionnalités.

Pourquoi créer un module ? ​

Voici quelques raisons courantes pour lesquelles vous pourriez vouloir créer un module dans Angular:

1. Réutilisation : Si vous avez un ensemble de fonctionnalités que vous souhaitez réutiliser dans différentes parties de votre application ou dans d'autres applications, vous devriez probablement les regrouper dans un module.

2. Lazy loading : Angular permet le chargement paresseux des modules. Si une certaine partie de votre application n'est pas nécessairement chargée au démarrage, vous pouvez la mettre dans un module séparé et la charger uniquement lorsque c'est nécessaire.

3. Organisation : Les modules aident à garder votre code organisé. Si vous avez une fonctionnalité distincte ou une caractéristique, comme la gestion des utilisateurs, il serait logique de la mettre dans son propre module.

4. Extensions : Si vous souhaitez étendre votre application avec des plugins ou des fonctionnalités supplémentaires à l'avenir, les modules peuvent rendre cela beaucoup plus facile.

Quand créer un module ? ​

• Lors de la création d'une application : Angular recommande d'avoir au moins un module racine, habituellement appelé AppModule.

• Lorsque vous avez une fonctionnalité distincte : Si vous ajoutez une fonctionnalité comme la gestion des utilisateurs ou la gestion des commandes dans une application de commerce électronique, cela pourrait justifier un module séparé.

• Lors de l'importation de fonctionnalités externes : Lorsque vous utilisez des bibliothèques externes, comme Angular Material, vous importez généralement un module spécifique à cette bibliothèque.

• Pour le routage : Lorsque vous créez des routes pour votre application, c'est une bonne pratique de regrouper ces routes et les composants associés dans un module spécifique.

Créer un module ​

Le fichier monmodule.module.ts contient le code suivant :

import { NgModule } from '@angular/core'

@NgModule({
  imports: [],
  declarations: []
})
export class MonModuleModule { }

import { NgModule } from '@angular/core'

@NgModule({
  imports: [],
  declarations: []
})
export class MonModuleModule { }

On déclare un module avec le décorateur NgModule. Trois propriétés sont requises :

Imports ​

Les autres modules vont construire les fonctionnalités de notre application. C'est un tableau contenant les différentes classes.

Pour bien comprendre ​

Au départ, la notion des imports peut paraître obscure. Pourrait-on importer tous les modules et les mettre dans cet unique module ? ça serait possible mais c'est une mauvaise pratique.

Imaginez que vous partez en voyage dans plusieurs pays, allez vous regrouper toutes vos photos dans le même dossier ? Non, car si votre ami vous demande les photos de votre voyage en Californie, ça serait embêtant de lui envoyer les photos de vous au Bahamas.

De la même manière, le module est indépendant te permet de structurer une partie de votre application. ça doit être comme une pièce de puzzle que vous ajoutez à votre jeu de puzzle.

Alors quand vous réfléchissez à la structure de votre application, posez vous cette question: "Est-ce que la partie que je développe peut être détaché du reste, peut être même être travaillé par un autre développeur ?"

declarations ​

Tous les composants, pipes et directives créés doivent être déclarés dans ce tableau. Autrement dit, nous avons un tableau de composants. Le prochain chapitre expliquera les composants plus en détails. Les éléments sont utilisables uniquement dans ce module et pas à l'extérieur

Générer un module ​

ng generate module nom-du-module

ng generate module nom-du-module

ou de façon abrégée :

ng g m nom-du-module

ng g m nom-du-module