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.

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.

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 {
}

declarations

Définit la liste des composants (ou directives, pipes etc...) contenus dans ce module.

exports

Définit la liste des composants pouvant être utilisés par les modules qui importent celui-ci.

{
    "scripts": {
        "generate:component": "ng generate component --export"
    }
}
yarn generate:component book/book-preview

imports

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

Bonnes Pratiques

Angular CLI - Generate Module

Vous pouvez générer un module avec la commande suivante :

yarn ng generate module book

Live Template

Pensez à utiliser des "live templates" sur votre IDE !

Angular Module Live Template

Dernière mise à jour