Angular 2
moduli

introduzione

Un modulo semplice

Un modulo è una classe con il decoratore @NgModule . Per creare un modulo aggiungiamo @NgModule passando alcuni parametri:

• bootstrap : il componente che sarà la radice della tua applicazione. Questa configurazione è presente solo sul modulo radice
• declarations : risorse dichiarate dal modulo. Quando aggiungi un nuovo componente devi aggiornare le dichiarazioni ( ng generate component fa automaticamente)
• exports : Risorse che il modulo esporta che può essere utilizzato in altri moduli
• imports : risorse che il modulo utilizza da altri moduli (sono accettate solo le classi di moduli)
• providers : risorse che possono essere iniettate (di) in un componente

Un semplice esempio:

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

Moduli di annidamento

I moduli possono essere nidificati utilizzando il parametro imports del decoratore @NgModule .

Possiamo creare un core.module nella nostra applicazione che conterrà cose generiche, come un ReservePipe (una pipe che inverte una stringa) e raggruppa quelli in questo modulo:

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

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