Angular 2
modules

Invoering

Een eenvoudige module

Een module is een klasse met de decorateur @NgModule . Om een module te maken voegen we @NgModule door enkele parameters door te geven:

• bootstrap : het onderdeel dat de root van uw applicatie zal zijn. Deze configuratie is alleen aanwezig op uw rootmodule
• declarations : bronnen die de module aangeeft. Wanneer u een nieuwe component toevoegt, moet u de declaraties bijwerken ( ng generate component automatisch ng generate component )
• exports : middelen voor het exporteren van modules die in andere modules kunnen worden gebruikt
• imports : bronnen die de module gebruikt van andere modules (alleen moduleklassen worden geaccepteerd)
• providers : bronnen die kunnen worden geïnjecteerd (di) in een component

Een eenvoudig voorbeeld:

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

Nestmodules

Modules kunnen worden genest met behulp van de imports parameter van @NgModule decorateur.

We kunnen in onze applicatie een core.module maken die generieke dingen bevat, zoals een ReservePipe (een pijp die een string omkeert) en die in deze module bundelen:

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

Vervolgens in de 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 { }