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中注入。