Architecture Modulaire dans Angular
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'accent sera de nouveau mis 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, il est possible de l'implémenter
task-module.ts
Le tableau exports dans @NgModule spécifie quels composants, directives ou pipes doivent être accessibles aux autres modules qui importent ce module. Dans ce cas, TaskComponent peut être utilisé en dehors du TaskModule.
Ce module déclare le TaskComponent, sa directive associée et un pipe personnalisé. Il importe CommonModule pour permettre l'utilisation de 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, il peut être implémenté.
task-list-module.ts
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, définition du module principal servant de point de départ à l’ensemble de 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 : fonctionnalités intégrées d’Angular, modules personnalisés et composant racine.
Créer 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é.
app-module.ts
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 initialiser 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.
Ouvrir main.ts et remplacer son contenu par ce qui suit :
main.ts
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.
Merci pour vos commentaires !
Demandez à l'IA
Demandez à l'IA
Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion
Awesome!
Completion rate improved to 3.13Architecture Modulaire dans Angular
Glissez pour afficher le menu
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'accent sera de nouveau mis 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, il est possible de l'implémenter
task-module.ts
Le tableau exports dans @NgModule spécifie quels composants, directives ou pipes doivent être accessibles aux autres modules qui importent ce module. Dans ce cas, TaskComponent peut être utilisé en dehors du TaskModule.
Ce module déclare le TaskComponent, sa directive associée et un pipe personnalisé. Il importe CommonModule pour permettre l'utilisation de 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, il peut être implémenté.
task-list-module.ts
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, définition du module principal servant de point de départ à l’ensemble de 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 : fonctionnalités intégrées d’Angular, modules personnalisés et composant racine.
Créer 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é.
app-module.ts
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 initialiser 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.
Ouvrir main.ts et remplacer son contenu par ce qui suit :
main.ts
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.
Merci pour vos commentaires !
