前言

再深入講NgModule之前,要先說明App.Module的Decorator使用的一些原則。

app_moduleapp_module

在建立Angular預設專案的時候,會有一個app.module.ts,這是我們的起始module,這Ng Module有寫了很多的Decorator,這些Decorator都有一些使用原則,要在這邊做說明。

What Is an Angular Module

Angular module 是一個包含有NgModule decorator的class。 主要目的在於

  • 管理我們的application
  • 有既定的pattern管理程式碼
  • 可載入外部libraries,擴展原本的application
  • 可整合其他Module的程式碼

而Angular module 當application start時候,可以loaded eagerly,或者可以經由router做lazy loaded asynchronously。

Bootstrap Array Truth

Bootstrap Array定義哪一個是最初的Component,使用上也有些限制。

  • 至少要有一個component,我們稱為root application component
  • 只能用在root application module, AppModule

Declarations Array Truth

我們建立的每一個建立的component,directive,pipe,都會在Angular module中宣告,這些宣告就是放在declarations,表示這些component,directive,pipe都是屬於這個Angular module。

  • 每一個component,directive,pipe只能被一個Angular module宣告
  • declarations 只能宣告component,directive,pipe,不能放其他classes或是services
  • 不重覆宣告 component,directive,pipe 在其他的Angular module
  • 所有被宣告的component,directive,pipe預設只能在同一個Angular module使用
    • 可用export的方式讓其他Angular module使用

Exports Array Truth

Exports Array可以讓我們share component,directive,pipe 給其他的modules使用,甚至可以re-export 3rd party modules。

  • 如果其他component需要,則Export component,directive,pipe
  • Re-export modules to re-export their component,directive,pipe
  • Never export a service
    • 因為Services被宣告在root application Provider’s array,讓Services可被inject到其他class,所以不需要export

用法:

shared.module
  • ts
1
2
3
4
5
6
7
8
9
10
11
12
import { NgModule }            from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { AwesomePipe } from './awesome.pipe';
import { HighlightDirective } from './highlight.directive';
@NgModule({
imports: [ CommonModule ],
declarations: [ AwesomePipe, HighlightDirective ],
exports: [ AwesomePipe, HighlightDirective,
CommonModule, FormsModule ]
})
export class SharedModule { }

shared-module

Imports Array Truth

Angular module可以藉由importing其他的Angular module來 extend capabilities。

  • Importing module取得該module exported的component,directive,pipe
  • Only import what this module needs
  • Importing a module does NOT provide access to its imported modules 或者說 Imports are not inherited

以下圖做說明,就是AppModule可以使用StarComponet但是沒有辦法使用ngModel directive,除非SharedModule re-export FormsModule,AppModule再取得SharedModule re-export的FormsModule才可以使用ngModel directive

imports Arrayimports Array

Providers Array Truth

  • Any service provider added to the providers array is registered at the root of the application
  • 別在shared module 加入services
    • 可考慮建立一個CoreModule專門加入services,並只在AppModule importing一次
  • Routing guards 只能被加在 Angular module 的 providers array
providers