Comment on page
Définition d'un Module
Angular propose un concept de modules afin de mieux structurer le code et faciliter la réutilisation et le partage.
Attention à ne pas confondre les modules Angular avec les modules ES2015 / TypeScript.
Un module Angular est un mécanisme permettant de :
- regrouper des composants (mais aussi des services, directives, pipes etc...),
- définir leurs dépendances,
- et définir leur visibilité.
Un module Angular est défini simplement avec une classe (généralement vide) et le décorateur
NgModule.src/app/book/book.module.ts
import { NgModule } from '@angular/core';
import { PictureModule } from '../picture/picture.module';
import { BookPreviewComponent } from './book-preview/book-preview.component';
@NgModule({
declarations: [
BookPreviewComponent
],
exports: [
BookPreviewComponent
],
imports: [
HttpModule,
PictureModule
]
})
export class BookModule {
}
Définit la liste des composants (ou directives, pipes etc...) contenus dans ce module.
Définit la liste des composants pouvant être utilisés par les modules qui importent celui-ci.
Les composants non-exportés ne peuvent être utilisés que par les composants contenus dans le module.
Pour exporter un composant lors de sa génération par Angular CLI, il faut ajouter l'option
--export : yarn ng generate component --export book/book-preview.Pour éviter de lutter contre les oublis, une astuce consiste à ajouter un "script" à votre fichier
package.json pour unifier la façon de générer vos composants.package.json
{
"scripts": {
"generate:component": "ng generate component --export"
}
}
yarn generate:component book/book-preview
Définit la liste des dépendances du module. Il s'agit généralement de la liste des modules contenant les composants utilisés par les composants de la section
declarations.
Angular Modules
La convention est de regrouper tous les composants dans le même dossier que le module.
book/
book.module.ts
book-preview/
book-preview.component.ts
book-preview.component.html
...
Evitez les sous-arborescences (définition de modules à l'intérieur d'autres modules etc...).
Flat is better than nested.
Vous pouvez générer un module avec la commande suivante :
yarn ng generate module book
Pensez à utiliser des "live templates" sur votre IDE !
Angular Module Live Template
Dernière mise à jour 3yr ago