angular2 NgModel` 模塊

angular2 NgModel 模塊

在 Angular2中一個 Module指的是使用 @NgModule修飾的 class。 @NgModule利用一個元數據對象來告訴 Angular如何去編譯和運行代碼。一個模塊內部能夠包含組件、指令、管道，而且能夠將它們的訪問權限聲明爲公有，以使外部模塊的組件能夠訪問和使用到它們。咱們也能夠經過定義子模塊來擴展咱們應用的功能。

NgModule 的API

interface NgModule {
     // providers: 這個選項是一個數組,須要咱們列出咱們這個模塊的一些須要共用的服務
     //            而後咱們就能夠在這個模塊的各個組件中經過依賴注入使用了.
    providers : Provider[]
     // declarations: 數組類型的選項, 用來聲明屬於這個模塊的指令,管道等等.
     //               而後咱們就能夠在這個模塊中使用它們了.
    declarations : Array<Type<any>|any[]>
     // imports: 數組類型的選項,咱們的模塊須要依賴的一些其餘的模塊,這樣作的目的使咱們這個模塊
     //          能夠直接使用別的模塊提供的一些指令,組件等等.
    imports : Array<Type<any>|ModuleWithProviders|any[]>
     // exports: 數組類型的選項,咱們這個模塊須要導出的一些組件,指令,模塊等;
     //          若是別的模塊導入了咱們這個模塊,
     //          那麼別的模塊就能夠直接使用咱們在這裏導出的組件,指令模塊等.
    exports : Array<Type<any>|any[]>
    // entryComponents: 數組類型的選項,指定一系列的組件,這些組件將會在這個模塊定義的時候進行編譯
    //                  Angular會爲每個組件建立一個ComponentFactory而後把它存儲在ComponentFactoryResolver
    entryComponents : Array<Type<any>|any[]>
    // bootstrap: 數組類型選項, 指定了這個模塊啓動的時候應該啓動的組件.固然這些組件會被自動的加入到entryComponents中去
    bootstrap : Array<Type<any>|any[]>
    // schemas: 不屬於Angular的組件或者指令的元素或者屬性都須要在這裏進行聲明.
    schemas : Array<SchemaMetadata|any[]>
    // id: 字符串類型的選項,模塊的隱藏ID,它能夠是一個名字或者一個路徑;用來在getModuleFactory區別模塊,若是這個屬性是undefined
    //     那麼這個模塊將不會被註冊.
    id : string
 }

經常使用API簡介

NgModule的主要屬性以下：

• declarations：模塊內部Components/Directives/Pipes的列表，聲明一下這個模塊內部成員，聲明以後才能使用對應的組件等。
• providers：指定應用程序的根級別須要使用的service。（Angular2中沒有模塊級別的service，全部在NgModule中聲明的Provider都是註冊在根級別的Dependency Injector中）
• imports：導入其餘module，其它module暴露的出的Components、Directives、Pipes等能夠在本module的組件中被使用。好比導入CommonModule後就可使用NgIf、NgFor等指令。
• exports：用來控制將哪些內部成員暴露給外部使用。導入一個module並不意味着會自動導入這個module內部導入的module所暴露出的公共成員。除非導入的這個module把它內部導入的module寫到exports中。
• bootstrap：一般是app啓動的根組件，通常只有一個component。bootstrap中的組件會自動被放入到entryComponents中。
• entryCompoenents: 不會再模板中被引用到的組件。這個屬性通常狀況下只有ng本身使用，通常是bootstrap組件或者路由組件，ng會自動把bootstrap、路由組件放入其中。 除非不經過路由動態將component加入到dom中，不然不會用到這個屬性。

子模塊

　 隨着程序的壯大，單一的根模塊已不能清晰的劃分職責，這時候即可以引入Feature Module。Feature Module與根模塊的建立方式同樣，全部的模塊共享一個運行期上下文和依賴注入器。

　　功能模塊與根模塊的職責區別主要有如下兩點：

• 根模塊的目的在於啓動app，功能模塊的目的在於擴展app
• 功能模塊能夠根據須要暴露或隱藏具體的實現

Angular2提供的另外一個與模塊有關的技術就是延遲加載了。默認狀況下Angular2將全部的代碼打包成一個文件，目的是爲了提升應用的流暢性，可是若是是運行在mobile中的app，加載一個大文件可能會過慢，因此rc5提供了一種延遲加載方式。

import { ModuleWithProviders }  from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

export const routes: Routes = [
  { path: '', redirectTo: 'contact', pathMatch: 'full'},
  { path: 'crisis', loadChildren: 'app/crisis/crisis.module#CrisisModule' }, // 能夠延遲加載子模塊，子模塊的結構和父模塊同樣，它會去加載子模塊中的Routes配置，並跳轉對應的組件中去。
  { path: 'heroes', loadChildren: 'app/hero/hero.module#HeroModule' }
];

export const routing: ModuleWithProviders = RouterModule.forRoot(routes);

其中，path指明路徑，loadChildren指明使用延遲加載，'app/crisis/crisis.module#CrisisModule'指明瞭模塊的路徑，和模塊的名稱。