7. NgModules : Les briques de construction

Les applications Angular sont modulaires. Les NgModules (@NgModule) sont des conteneurs qui regroupent des composants, services et pipes liés, définissant comment Angular doit compiler et lancer des parties de l'application.

Le décorateur @NgModule

Un NgModule est une classe décorée avec @NgModule, qui prend un unique objet de métadonnées.

typescript import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component';

@NgModule({ declarations: [AppComponent, /* Autres Components, Directives, Pipes /], imports: [BrowserModule, / Autres Modules Angular ou personnalisés /], providers: [/ Les Services vont ici */], bootstrap: [AppComponent] // Uniquement dans le Module Racine }) export class AppModule { }

Propriétés clés de @NgModule

1. declarations : Liste les composants, directives et pipes qui appartiennent à ce module. Important : Un élément ne peut être déclaré que dans un seul module.
2. imports : Importe d'autres NgModules dont les classes exportées (composants, directives, pipes) sont requises par les composants de ce module.
3. providers : Liste les services qui doivent être rendus disponibles via l'Injection de Dépendances (DI) à l'ensemble de l'application (ou juste à ce module, selon la portée).
4. exports : Liste le sous-ensemble de composants, directives et pipes qui doivent être accessibles aux autres modules qui importent celui-ci (par exemple, si nous créons un SharedModule).
5. bootstrap : (Utilisé uniquement dans le module racine, AppModule). Identifie le composant racine qu'Angular doit charger lors du démarrage de l'application.