[Angular] NgModule Decorator
前言
再深入講NgModule之前,要先說明App.Module的Decorator使用的一些原則。
在建立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
用法:1
2
3
4
5
6
7
8
9
10
11
12import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { AwesomePipe } from './awesome.pipe';
import { HighlightDirective } from './highlight.directive';
({
imports: [ CommonModule ],
declarations: [ AwesomePipe, HighlightDirective ],
exports: [ AwesomePipe, HighlightDirective,
CommonModule, FormsModule ]
})
export class SharedModule { }
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
。
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