可搭配官網文章「Angular Modularity」做閱讀。

Angular2的模組，可以封裝商業邏輯或是特性，把需要用到的Component、Directives、Pipe跟Service打包聚合在一起，做出高內聚力的封裝區塊。專案開發的時候最怕的就是改A錯B，封裝成模組的好處是，開發者可以單獨的修改單一模組，不影響其他原本功能正常的模組。

很多Angular2的核心Library，例如：FormsModule、HttpModule、RouterModule，都是Module，而很多第三方的Library也都封裝成Anglar2的Module，例如：Material Design、 Ionic、 AngularFire2。

Angular2用@NgModule來定義模組，在專案中至少會有一個根模組－AppModule，透過Bootstrap來啟動根模組。簡單的專案架構可能只需要一個AppModule，隨著專案的規模增長，我們會逐步的從根模組重構出一些特性模組，來代表一組相關功能的集合，然後在根模組中導入它們。

以下是NgModule的API架構

interface NgModule {
    providers : Provider[]
    declarations : Array<Type<any>|any[]>
    imports : Array<Type<any>|ModuleWithProviders|any[]>
    exports : Array<Type<any>|any[]>
    entryComponents : Array<Type<any>|any[]>
    bootstrap : Array<Type<any>|any[]>
    schemas : Array<SchemaMetadata|any[]>
    id : string
 }

我最近在模組拆分的練習中，

最常用的是providers、declarations、imports、exports跟entryComponents

然後bootstrap則是用來指定要在index.html中做為起始節點的根元件。

• providers

用來列出模組需要用的共用Service

• declarations

用來聲明屬於這個模組的Component、Pipe、Directives，然後我們就可以在模組中使用這些元件

• imports

如果有使用到其它模組的元件或服務，會在這裡列出來

• exports

這個模組的元件若有要導出給其他模組使用，可在這裡宣告，

如果別的模組導入了這個模組，那麼別的模組就可以直接使用我們在這裡導出的元件。

• entryComponents

這裡通常是用來宣告不通過Route動態加入到DOM中的元件，指定在這裡的元件將會在這個模組定義的時候進行編譯。

以下是AppModule最簡單的模組宣告版本

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import { AppComponent }   from './app.component';
@NgModule({
    imports:      [ BrowserModule,HttpModule ],
    declarations: [ AppComponent ],
    bootstrap:    [ AppComponent ]
})
export class AppModule { }

• AppModule會使用到Angular2的核心Library的模組，BrowserModule及HttpModule。

• AppComponent是定義好的根元件，我們使用declarations告訴AppModule會使用AppComponent

• 透過bootstrap來告訴根模組使用AppComponent當做啟始的根元件

下次會搭配更完整的實例來介紹Angular2的Module。