Angular2 NgModule

1. 說明

典型的模塊是一個內聚的代碼塊，用來實現某種單一的功能。Angular2應用程序本質上是有一系列模塊組成的，並且Angular 自己就是一組模塊庫。模塊主要是導出一些東西——類，函數，值，供其它模塊導入，而後使用這個類，函數或者值。Angular2 應用是模塊化的，而且 Angular2 有本身的模塊系統，它被稱爲 Angular2 模塊 或 NgModules。

NgModules是帶有 @NgModule 裝飾器函數的 類 。 @NgModule 接收一個元數據對象，該對象告訴 Angular 如何編譯和運行模塊代碼。它標記出該模塊擁有的組件，指令和管道，引入的其餘Angular2模塊，以及導出給其餘模塊使用的公共部分，同時還能夠向當前模塊注入對應的服務提供商等。

模塊是組織應用程序和使用外部程序庫的最佳途徑。不少 Angular 庫都是模塊，好比： FormsModule 、 HttpModule 、 RouterModule 。模塊可能在應用啓動時主動加載，也可能由路由器進行異步 惰性加載。

每一個Angular2應用都必須存在惟一一個根模塊，咱們將經過引導根模塊來啓動應用。

2. 實例

Angular2模塊通常由註解，元數據以及模塊類組成，來看下面的這個簡單的組件的例子：

import { NgModule } from '@angular/core'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { PortalComponent } from './portal'; import { routing } from './routes'; @NgModule({ imports: [ routing, FormsModule, ReactiveFormsModule ], exports: [], declarations: [PortalComponent], providers: [] }) export class PortalModule { }

以上的例子能夠看出，咱們經過元數據imports導入了FormsModule等其餘Angular2模塊，經過declarations聲明當前模塊中使用的組件等，固然，咱們還能夠經過exports導出公共部分提供其餘模塊使用，以及providers提供了當前模塊所使用的服務提供商。

3. 定義

經過官方提供的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 }

咱們分別對這些屬性加以說明：

l providers : Provider[]

注入在該模塊中使用的服務提供商，在根模塊注入的服務供應商能夠供整個應用程序使用。

l declarations : Array<Type<any>|any[]>

聲明在該模塊中使用的組件，指令以及通道

l imports : Array<Type<any>|ModuleWithProviders|any[]>

導入在該模塊中使用的其餘Angular2模塊中的組件，指令以及管道等，該模塊中的組件等由exports屬性導出。

l exports : Array<Type<any>|any[]>

導出該模塊中的組件，指令以及管道等，以便提供給其餘Angular2模塊使用。

l entryComponents : Array<Type<any>|any[]>

聲明在模塊定義時進行編譯的組件，當模塊加載的時候回生成ComponentFactory並保存在ComponentFactoryResolver，使用ComponentFactoryResolver建立組件的時候應該如今此處進行聲明。

l bootstrap : Array<Type<any>|any[]>

此處聲明當模塊啓動加載的時候同時執行啓動加載的組件，這些組件會自動添加到entryComponents中。

l schemas : Array<SchemaMetadata|any[]>

聲明在Angular中使用的非組件，指令或管道等Angular標準元素或者屬性的其餘自定義元素或屬性信息。經常使用的schemas形式有：

NO_ERRORS_SCHEMA: 全部的元素或者屬性都可以

CUSTOM_ELEMENTS_SCHEMA:任意元素（元素標籤中包含「-」）和屬性均可以

l id : string

一個獨立的模塊ID，用來在getModuleFactory標識對應的模塊，若是設定對應的ID信息，這不會在getModuleFactory中注入。