Angular2 小貼士 NgModule 模塊


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.不要重復導入一些模塊,必要的時候加入限制。 因為重復導入可能會影響依賴注入實例

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM