Pour expérimenter en toute sécurité avec les modules, il est recommandé de créer une copie du projet existant. Ces modifications sont uniquement destinées à la pratique et n'affecteront pas le projet original. Dans les chapitres suivants, l'attention sera de nouveau portée sur la création d'applications à l'aide de composants autonomes.

Création d'un module pour le TaskComponent

Cette étape consiste à créer un module pour le TaskComponent. Le module déclarera le composant, une directive associée et un pipe.

Pour générer un module dans Angular, il existe une commande CLI dédiée :

Maintenant que le fichier task.module.ts a été créé dans le dossier task, nous pouvons l'implémenter

Ce module déclare le TaskComponent, sa directive associée et un pipe personnalisé. Il importe CommonModule pour permettre l'utilisation des directives structurelles telles que *ngIf et *ngFor. Le TaskComponent est exporté afin de pouvoir être réutilisé dans d'autres modules.

Création d'un module pour le TaskListComponent

À cette étape, un module sera créé pour le TaskListComponent. Créer un nouveau module dans le dossier task-list :

Maintenant que le fichier task-list.module.ts a été créé dans le dossier task-list, nous pouvons l’implémenter

Ce module déclare TaskListComponent, chargé d'afficher une liste de tâches. Il importe TaskModule pour accéder au composant de tâche et FormsModule pour des fonctionnalités telles que les formulaires de création de tâches. Le composant est exporté afin de pouvoir être utilisé dans d'autres modules.

Création du module racine

Dans cette étape, nous allons définir le module principal qui sert de point de départ à toute l'application.

Chaque application Angular nécessite un module racine qui indique à Angular comment lancer l'application. Ce module rassemble tous les éléments nécessaires : les fonctionnalités intégrées d'Angular, nos modules personnalisés et le composant racine.

Créez un nouveau module dans le dossier app :

L'option --flat indique à Angular CLI de créer le fichier du module sans générer de dossier séparé.

Ce module sert de point d'entrée à l'application. Il importe BrowserModule, nécessaire pour exécuter Angular dans le navigateur, ainsi que le TaskListModule, qui contient la fonctionnalité principale de gestion des tâches. Le AppComponent est défini comme composant racine pour lancer l'application.

Configuration du point d'entrée

Cette étape met à jour le point d'entrée de l'application pour lancer à l'aide du module racine au lieu d'un composant autonome.

Ouvrez main.ts et remplacez son contenu par ce qui suit :

Ce code initialise l'application en utilisant AppModule. Cette configuration illustre l'architecture modulaire : l'application est divisée en modules, chacun encapsulant ses propres composants, directives, pipes, services, et plus encore.

L'architecture modulaire dans Angular permet d'organiser l'application en blocs logiques, rendant le code évolutif, bien structuré et réutilisable.