Angular 2
Modules

Introduction

Un module simple

Un module est une classe avec le décorateur @NgModule . Pour créer un module, nous ajoutons @NgModule passant quelques paramètres:

• bootstrap : le composant qui sera la racine de votre application. Cette configuration est uniquement présente sur votre module racine
• declarations : Ressources declarations le module. Lorsque vous ajoutez un nouveau composant, vous devez mettre à jour les déclarations ( ng generate component fait automatiquement)
• exports : ressources le module exporte pouvant être utilisé dans d'autres modules
• imports : ressources utilisées par le module à partir d'autres modules (seules les classes de modules sont acceptées)
• providers : ressources pouvant être injectées (di) dans un composant

Un exemple simple:

import { AppComponent } from './app.component';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
 
@NgModule({
  bootstrap: [AppComponent]
  declarations: [AppComponent],
  exports: [],
  imports: [BrowserModule],
  providers: [],
})
export class AppModule { }

Modules d'imbrication

Les modules peuvent être imbriqués à l'aide du paramètre imports de @NgModule decorator.

Nous pouvons créer un core.module dans notre application qui contiendra des objets génériques, comme un ReservePipe (un canal qui inverse une chaîne) et regroupera ceux de ce module:

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { ReversePipe } from '../reverse.pipe';

@NgModule({
  imports: [
    CommonModule
  ],
  exports: [ReversePipe], // export things to be imported in another module
  declarations: [ReversePipe],
})
export class CoreModule { }

Ensuite, dans le app.module :

import { CoreModule } from 'app/core/core.module';

@NgModule({
  declarations: [...], // ReversePipe is available without declaring here
                       // because CoreModule exports it
  imports: [
    CoreModule,        // import things from CoreModule
    ...
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }