在Angular2中一個(gè)Module指的是使用@NgModule修飾的class。@NgModule利用一個(gè)元數(shù)據(jù)對(duì)象來告訴Angular如何去編譯和運(yùn)行代碼。一個(gè)模塊內(nèi)部可以包含組件、指令、管道，并且可以將它們的訪問權(quán)限聲明為公有，以使外部模塊的組件可以訪問和使用到它們。

模塊是用來組織應(yīng)用的，通過模塊機(jī)制外部類庫可以很方便的擴(kuò)展應(yīng)用，Rc5之后，Angular2將許多常用功能都分配到一個(gè)個(gè)的模塊中，如:FormModule、HttpModule、RouterModule。

NgModule的主要屬性如下：

• declarations：模塊內(nèi)部Components/Directives/Pipes的列表，聲明一下這個(gè)模塊內(nèi)部成員
• providers：指定應(yīng)用程序的根級(jí)別需要使用的service。（Angular2中沒有模塊級(jí)別的service，所有在NgModule中聲明的Provider都是注冊在根級(jí)別的Dependency Injector中）
• imports：導(dǎo)入其他module，其它module暴露的出的Components、Directives、Pipes等可以在本module的組件中被使用。比如導(dǎo)入CommonModule后就可以使用NgIf、NgFor等指令。
• exports：用來控制將哪些內(nèi)部成員暴露給外部使用。導(dǎo)入一個(gè)module并不意味著會(huì)自動(dòng)導(dǎo)入這個(gè)module內(nèi)部導(dǎo)入的module所暴露出的公共成員。除非導(dǎo)入的這個(gè)module把它內(nèi)部導(dǎo)入的module寫到exports中。
• bootstrap：通常是app啟動(dòng)的根組件，一般只有一個(gè)component。bootstrap中的組件會(huì)自動(dòng)被放入到entryComponents中。
• entryCompoenents: 不會(huì)再模板中被引用到的組件。這個(gè)屬性一般情況下只有ng自己使用，一般是bootstrap組件或者路由組件，ng會(huì)自動(dòng)把bootstrap、路由組件放入其中。 除非不通過路由動(dòng)態(tài)將component加入到dom中，否則不會(huì)用到這個(gè)屬性。

每個(gè)Angular2的應(yīng)用都至少有一個(gè)模塊即跟模塊。

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{}

隨著程序的壯大，單一的根模塊已不能清晰的劃分職責(zé)，這時(shí)候便可以引入Feature Module。Feature Module與根模塊的創(chuàng)建方式一樣，所有的模塊共享一個(gè)運(yùn)行期上下文和依賴注入器。

功能模塊與根模塊的職責(zé)區(qū)別主要有以下兩點(diǎn)：

• 根模塊的目的在于啟動(dòng)app，功能模塊的目的在于擴(kuò)展app
• 功能模塊可以根據(jù)需要暴露或隱藏具體的實(shí)現(xiàn)

Angular2提供的另一個(gè)與模塊有關(guān)的技術(shù)就是延遲加載了。默認(rèn)情況下Angular2將所有的代碼打包成一個(gè)文件，目的是為了提高應(yīng)用的流暢性，但是如果是運(yùn)行在mobile中的app，加載一個(gè)大文件可能會(huì)過慢，所以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'指明了模塊的路徑，和模塊的名稱。

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。