Angular2 NgModule 模塊詳解
Angular的模塊的目的是用來組織app的邏輯結(jié)構(gòu)。
在ng中使用@NgModule修飾的class就被認(rèn)為是一個ng module。NgModule可以管理模塊內(nèi)部的Components、Directives、Pipes,引入Service,并控制外部組件對內(nèi)部成員的訪問權(quán)限。
angular2 具有了模塊的概念,響應(yīng)了后臺程序的號召,高內(nèi)聚 低耦合。模塊就是用來進(jìn)行封裝,進(jìn)行高內(nèi)聚 低耦合的功能。
其實(shí)各人認(rèn)為ng2 的模塊和.net的工程類似,如果要使用模塊中定義的功能,第一步就是必須要引用它,ng2 中叫import 導(dǎo)入。
那么我們看模塊是否有層級概念呢,至少目前來看,模塊都是平級的,沒有主子之分。
如何定義模塊呢?
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; /* App Root */ import { AppComponent } from './app.component'; /* Feature Modules */ import { ContactModule } from './contact/contact.module'; import { CoreModule } from './core/core.module'; import { routing } from './app.routing'; import { Title } from '@angular/platform-browser'; @NgModule({ imports: [ BrowserModule, ContactModule, /* CoreModule, */ CoreModule.forRoot({ userName: 'Miss Marple' }), routing ], declarations: [AppComponent],//聲明當(dāng)前模塊需要的指定 組件信息 exports:[], providers: [Title], bootstrap: [AppComponent] }) export class AppModule { }
簡單說明一下模塊元數(shù)據(jù)中各個參數(shù)的用途。
imports:導(dǎo)入其他模塊,就是要使用其他模塊的功能,必須要導(dǎo)入。
declarations:聲明,聲明本模塊包含的內(nèi)容??赡苡行┩瑢W(xué)會遇到,定義了一個指令,在component中使用卻總是沒有生效的問題,首先我們要檢查的就是是否進(jìn)行了聲明。
exports:外部可見的內(nèi)容。相當(dāng)于.net中聲明為public的那些類。
providers:服務(wù)提供者,主要用來定義服務(wù)。估計ng2框架會自動將注冊的服務(wù)體檢到依賴注入實(shí)例中,目前測試也是如此。
bootstrap:啟動模塊。只在根模塊使用。在除了根模塊以外的其他模塊不能使用。
2.問題2
目前官方叫法:啟動模塊為根模塊,自定義的其他模塊叫特性模塊。
我們是否可以在特性模塊中import根模塊呢?
實(shí)驗(yàn)是檢驗(yàn)真理的最好方法。
import { NgModule } from '@angular/core'; import { SharedModule } from '../shared/shared.module'; import { ContactComponent } from './contact.component'; import { ContactService } from './contact.service'; import { routing } from './contact.routing'; import{GuozhiqiModule}from '../directives/guozhiqi.module'; import{AppModule}from '../app.module'; @NgModule({ imports: [ SharedModule, routing,GuozhiqiModule,AppModule ],// 導(dǎo)入模塊 declarations: [ ContactComponent ],//聲明 指令 providers: [ ContactService ]//服務(wù)提供者 在當(dāng)前模塊提供者中注冊當(dāng)前模塊需要的服務(wù) }) export class ContactModule { }
appModule是根模塊,我們定義的contactModule是特性模塊,現(xiàn)在我們通過imports 導(dǎo)入根模塊。
執(zhí)行出現(xiàn)錯誤,contactModule導(dǎo)入了一個undefined的module?
為什么會出現(xiàn)這個問題呢?
各人估計是因?yàn)?.導(dǎo)致了循環(huán)引用的問題。appModule會加載ContactModule,而在ContactModule中又要import 根模塊,導(dǎo)致循環(huán)引用,從而出現(xiàn)錯誤。
2.另一種解釋就是根模塊不允許導(dǎo)入。ng2框架不允許這樣
問題3:如何避免出現(xiàn)循環(huán)引用呢?
官方給出了答案:https://angular.cn/docs/ts/latest/guide/ngmodule.html#!#prevent-reimport
constructor (@Optional() @SkipSelf() parentModule: CoreModule) { if (parentModule) { throw new Error( 'CoreModule is already loaded. Import it in the AppModule only'); } }
但是我本地驗(yàn)證并不會有效的驗(yàn)證如何避免重復(fù)import一個模塊。
問題4. 模塊與路由的關(guān)系。
基本上每個特性模塊都有單獨(dú)的路由定義,關(guān)于模塊和路由的關(guān)系定義,下次說到ng2路由時再細(xì)說,因?yàn)閚g2的路由太強(qiáng)大,以至于需要很長時間的理解才能明白。
ng2模塊的目錄和目錄結(jié)構(gòu)的最佳實(shí)踐:
1.每個模塊一個單獨(dú)的文件夾
2.模塊是高內(nèi)聚 低耦合
3.模塊內(nèi)功能相關(guān)或相近
4.每個模塊都有單獨(dú)的路由定義 -不是必須
5.不要重復(fù)導(dǎo)入一些模塊,必要的時候加入限制。 因?yàn)橹貜?fù)導(dǎo)入可能會影響依賴注入實(shí)例
感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!
相關(guān)文章
詳解Angular中通過$location獲取地址欄的參數(shù)
這篇文章主要介紹了詳解 Angular中通過$location獲取地址欄的參數(shù),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-08-08AngularJS實(shí)現(xiàn)的自定義過濾器簡單示例
這篇文章主要介紹了AngularJS實(shí)現(xiàn)的自定義過濾器,結(jié)合實(shí)例形式分析了AngularJS自定義過濾器的簡單定義與使用操作技巧,需要的朋友可以參考下2019-02-02angular 數(shù)據(jù)綁定之[]和{{}}的區(qū)別
這篇文章主要介紹了angular 數(shù)據(jù)綁定之[]和{{}}的區(qū)別,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-09-09AngularJS ngModel實(shí)現(xiàn)指令與輸入直接的數(shù)據(jù)通信
這篇文章主要介紹了AngularJS ngModel實(shí)現(xiàn)指令與輸入直接的數(shù)據(jù)通信的相關(guān)資料,需要的朋友可以參考下2016-09-09AngularJS 中的指令實(shí)踐開發(fā)指南(一)
指令(Directives)是所有AngularJS應(yīng)用最重要的部分。盡管AngularJS已經(jīng)提供了非常豐富的指令,但還是經(jīng)常需要創(chuàng)建應(yīng)用特定的指令。這篇教程會為你講述如何自定義指令,以及介紹如何在實(shí)際項(xiàng)目中使用2016-03-03小談angular ng deploy的實(shí)現(xiàn)
這篇文章主要介紹了小談angular ng deploy的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04AngularJS ng-blur 指令詳解及簡單實(shí)例
本文主要介紹AngularJS ng-blur 指令,這里對ng-blur 指令的知識詳細(xì)介紹給大家,并給大家一個實(shí)例作為參考,有需要的小伙伴可以參考下2016-07-07AngularJs 最新驗(yàn)證手機(jī)號碼的實(shí)例,成功測試通過
下面小編就為大家分享一篇AngularJs 最新驗(yàn)證手機(jī)號碼的實(shí)例,成功測試通過,具有很好的參考價值。希望對大家有所幫助。一起跟隨小編過來看看吧2017-11-11