angular2 學習筆記 ( ngModule 模塊 )

2016-08-25, 當前版本是 RC 5.

參考 : https://angular.cn/docs/ts/latest/guide/ngmodule.html

提醒 : 這系列筆記的 "ng" 指的是 angular2 哦!

 

ECMA 6 中, 每個 .js 文件都是一個模塊. 

ng 中的模塊則指的是一組被封裝起來的組件, 指令, 管道, 它們能夠來自不一樣的 .js 文件.

因此 ng 模塊能夠說是 ECMA 模塊的更上一層封裝. 這正是咱們須要的. 

 

import { NgModule } from '@angular/core'; 
  
@NgModule({
    imports: [],
    declarations: [],
    exports: [],
    bootstrap: [],
    providers : []
})
export class AppModule { }

　　

大概長這樣.

imports 顧名思義, 就是導入其它的模塊，這和 ECMA 模塊是同樣的概念. 

declarations : [ProductComponent, ProductPipe, ProductDirective] declarations 是用來聲明當前這個模塊所具備的組件, 指令, 管道的. ( 組件若是沒有被聲明是不能用的哦，會報錯的. )

exports : [ImportedModule, DeclaredComponent] 咱們想導出什麼就寫什麼, 默認狀況下全部導入和聲明的模塊或組件都是私有的. 除非咱們導出它們. 

 

以上3項很好理解.

須要注意, 若是一個組件已經被"聲明"過了，請不要再次"聲明"它, 好比 : 模塊A 聲明瞭 組件A, 而 模塊B 導入了 模塊A, 那麼在 模塊B 中就可使用 組件A 了, 不須要在 模塊B 中"再次聲明", 即便你再聲明也無效 

 

 

bootstrap: [AppComponent] 只有在主模塊 AppModule 會使用到.

在 main.js 中啓動主模塊

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

這是動態的方式, 還有一個靜態的方式, 有興趣能夠去參考 

 

providers : [ProductService] 

模塊的 providers 會註冊進根注入器中. 意味着這是全局的. (lazyload module 例外, 由於 lazyload 的 module 會是 root module 的 child)

例如 : (we have 3 module : A,B,C ) A import B,C -> C can use B service, even C not import B 

因此, 若是你只想在某個 module 內使用某個 service 的話, 那寫在 component.providers 吧. 但其實把全部provider 定義全局也沒很大的問題, 畢竟 provider 都是 class or token 不會有命名衝突的問題.

ng 有個延遲加載 module 的功能叫 lazy load, 它是配合 router 一塊使用的. 

lazy load 會建立子注入器, 這個要留意哦, 它會影響到 providers (本來 module's providers 是註冊到 root injector 的), 

ng給出的理由是, 注入器一旦開始工做就不能修改了, 因此 lazyload 只能經過建立子注入器來擴展.

因此, 通常上 lazy load 的 module 須要聲明 providers 的話, 會這樣作.

這個作法是這樣的, 不把 providers 聲明到 @NgModule 裏面, 而是提供一個靜態方法給 root module import.

或則你能夠把 providers 獨立寫成另外一個模塊.

 

 

特性模塊

特性模塊和根模塊是差很少的，也是有根組件，路由等等 

區別以下

1.不會有 bootstrap: [AppComponent]

2.不會有 BrowserModule, 取而代之的是 CommonModule

@NgModule({
    imports: [       
        CommonModule,
        routing       
    ],
    declarations: [
        ProductComponent 
    ],
    providers: [routingProviders]
})
export class ProductModule { }

 

以前說的 forRoot 還有擴展模塊的好處, 能夠看到 import module 時能夠經過一個帶參數的方法, 那樣咱們就能夠依據不一樣的項目去設定或則擴展咱們的模塊了. (相似 ng1 的 app.config)

有一個叫 entryComponents 的屬性, 他和 declarations 不同的地方是, 它是專門用來定義動態組建的. 動態組建是經過 class 來建立的不是寫在 html 裏的. 若是咱們沒有告訴 ng 咱們有什麼動態的 component 的話, 那麼在 aot 的時候就沒辦法預編輯了.

 

更新 : 2017-01-26 

module 能夠不須要 import 直接 export 其它 module, 這和 ecma module 是同樣的.