Angular2學習筆記——NgModule

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

　　模塊是用來組織應用的，經過模塊機制外部類庫能夠很方便的擴展應用，Rc5以後，Angular2將許多經常使用功能都分配到一個個的模塊中，如:FormModule、HttpModule、RouterModule。

　　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中，不然不會用到這個屬性。

　　每一個Angular2的應用都至少有一個模塊即跟模塊。

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-borwser';
import {AppComponent} from './AppComponent';

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule],
    bootstrap: [AppComponent]
})
export class AppModule{}

 

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

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

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

 

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

template: `
  <app-title [subtitle]="subtitle"></app-title>
  <nav>
    <a routerLink="contact" routerLinkActive="active">Contact</a>
    <a routerLink="crisis"  routerLinkActive="active">Crisis Center</a>
    <a routerLink="heroes"  routerLinkActive="active">Heroes</a>
  </nav>
  <router-outlet></router-outlet>
`

 

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' },
  { path: 'heroes', loadChildren: 'app/hero/hero.module#HeroModule' }
];

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

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