Angular 2
Moduły

Wprowadzenie

Prosty moduł

Moduł jest klasą z dekoratorem @NgModule . Aby utworzyć moduł, dodajemy @NgModule przekazując kilka parametrów:

• bootstrap : składnik, który będzie katalogiem głównym aplikacji. Ta konfiguracja jest obecna tylko w module głównym
• declarations : Zasoby declarations przez moduł. Kiedy dodajesz nowy komponent, musisz zaktualizować deklaracje ( ng generate component robi to automatycznie)
• exports : Zasoby modułu eksportuje, które mogą być używane w innych modułach
• imports : zasoby, których moduł używa z innych modułów (akceptowane są tylko klasy modułów)
• providers : zasoby, które można wstrzykiwać (di) do komponentu

Prosty przykład:

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

Moduły zagnieżdżone

Moduły mogą być zagnieżdżone za pomocą imports parametr @NgModule dekoratora.

W naszej aplikacji możemy utworzyć core.module , który będzie zawierał rzeczy ogólne, takie jak ReservePipe (potok, który odwraca ciąg znaków) i ReservePipe te w tym 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 { }

Następnie w 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 { }