angular2 具有了模塊的概念,響應了后台程序的號召,高內聚 低耦合。模塊就是用來進行封裝,進行高內聚 低耦合的功能。
其實各人認為ng2 的模塊和.net的工程類似,如果要使用模塊中定義的功能,第一步就是必須要引用它,ng2 中叫import 導入。
那么我們看模塊是否有層級概念呢,至少目前來看,模塊都是平級的,沒有主子之分。
如何定義模塊呢?
1 import { NgModule } from '@angular/core'; 2 import { BrowserModule } from '@angular/platform-browser'; 3 4 /* App Root */ 5 import { AppComponent } from './app.component'; 6 7 /* Feature Modules */ 8 import { ContactModule } from './contact/contact.module'; 9 import { CoreModule } from './core/core.module'; 10 import { routing } from './app.routing'; 11 import { Title } from '@angular/platform-browser'; 12 @NgModule({ 13 imports: [ 14 BrowserModule, 15 ContactModule, 16 /* 17 CoreModule, 18 */ 19 CoreModule.forRoot({ userName: 'Miss Marple' }), 20 routing 21 ], 22 declarations: [AppComponent],//聲明當前模塊需要的指定 組件信息 23 exports:[], 24 providers: [Title], 25 bootstrap: [AppComponent] 26 }) 27 export class AppModule { }
簡單說明一下模塊元數據中各個參數的用途。
imports:導入其他模塊,就是要使用其他模塊的功能,必須要導入。
declarations:聲明,聲明本模塊包含的內容。可能有些同學會遇到,定義了一個指令,在component中使用卻總是沒有生效的問題,首先我們要檢查的就是是否進行了聲明。
exports:外部可見的內容。相當於.net中聲明為public的那些類。
providers:服務提供者,主要用來定義服務。估計ng2框架會自動將注冊的服務體檢到依賴注入實例中,目前測試也是如此。
bootstrap:啟動模塊。只在根模塊使用。在除了根模塊以外的其他模塊不能使用。
2.問題2
目前官方叫法:啟動模塊為根模塊,自定義的其他模塊叫特性模塊。
我們是否可以在特性模塊中import根模塊呢?
實驗是檢驗真理的最好方法。
1 import { NgModule } from '@angular/core'; 2 import { SharedModule } from '../shared/shared.module'; 3 4 import { ContactComponent } from './contact.component'; 5 import { ContactService } from './contact.service'; 6 import { routing } from './contact.routing'; 7 import{GuozhiqiModule}from '../directives/guozhiqi.module'; 8 import{AppModule}from '../app.module'; 9 @NgModule({ 10 imports: [ SharedModule, routing,GuozhiqiModule,AppModule ],// 導入模塊 11 declarations: [ ContactComponent ],//聲明 指令 12 providers: [ ContactService ]//服務提供者 在當前模塊提供者中注冊當前模塊需要的服務 13 }) 14 export class ContactModule { }
appModule是根模塊,我們定義的contactModule是特性模塊,現在我們通過imports 導入根模塊。
執行出現錯誤,contactModule導入了一個undefined的module?
為什么會出現這個問題呢?
各人估計是因為1.導致了循環引用的問題。appModule會加載ContactModule,而在ContactModule中又要import 根模塊,導致循環引用,從而出現錯誤。
2.另一種解釋就是根模塊不允許導入。ng2框架不允許這樣
問題3:如何避免出現循環引用呢?
官方給出了答案:https://angular.cn/docs/ts/latest/guide/ngmodule.html#!#prevent-reimport
1 constructor (@Optional() @SkipSelf() parentModule: CoreModule) { 2 if (parentModule) { 3 throw new Error( 4 'CoreModule is already loaded. Import it in the AppModule only'); 5 } 6 }
但是我本地驗證並不會有效的驗證如何避免重復import一個模塊。
問題4. 模塊與路由的關系。
基本上每個特性模塊都有單獨的路由定義,關於模塊和路由的關系定義,下次說到ng2路由時再細說,因為ng2的路由太強大,以至於需要很長時間的理解才能明白。
ng2模塊的目錄和目錄結構的最佳實踐:
1.每個模塊一個單獨的文件夾
2.模塊是高內聚 低耦合
3.模塊內功能相關或相近
4.每個模塊都有單獨的路由定義 -不是必須
5.不要重復導入一些模塊,必要的時候加入限制。 因為重復導入可能會影響依賴注入實例