摘要:模塊簡(jiǎn)介簡(jiǎn)介應(yīng)用是模塊化的,而我們可以把它當(dāng)做一個(gè)容器,用于存放一些內(nèi)聚的代碼塊,它接收一個(gè)元數(shù)據(jù)對(duì)象并通過該對(duì)象告訴如何編譯和運(yùn)行模塊代碼。它標(biāo)記出該模塊擁有的組件指令和管道,并把它們的一部分公開出去,以便外部組件使用它們。
Angular2 模塊簡(jiǎn)介 NgModule 簡(jiǎn)介
Angular 應(yīng)用是模塊化的, 而NgModule我們可以把它當(dāng)做一個(gè)容器,用于存放一些內(nèi)聚的代碼塊,它接收一個(gè)元數(shù)據(jù)對(duì)象并通過該對(duì)象告訴 Angular 如何編譯和運(yùn)行模塊代碼。它標(biāo)記出該模塊擁有的組件、指令和管道, 并把它們的一部分公開出去,以便外部組件使用它們。 它可以向應(yīng)用的依賴注入器中添加服務(wù)提供商。
每個(gè) Angular 應(yīng)用都至少有一個(gè) NgModule 類,也就是根模塊,它習(xí)慣上命名為 AppModule,并位于一個(gè)名叫 app.module.ts 的文件中。引導(dǎo)這個(gè)根模塊就可以啟動(dòng)你的應(yīng)用。
NgModule 是一個(gè)帶有 @NgModule() 裝飾器的類。@NgModule() 裝飾器是一個(gè)函數(shù),它接受一個(gè)元數(shù)據(jù)對(duì)象,該對(duì)象的屬性用來描述這個(gè)模塊。其中最重要的屬性如下。
declarations(可聲明對(duì)象表) —— 那些屬于本 NgModule 的組件、指令、管道。
exports(導(dǎo)出表) —— 那些能在其它模塊的組件模板中使用的可聲明對(duì)象的子集。
imports(導(dǎo)入表) —— 那些導(dǎo)出了本模塊中的組件模板所需的類的其它模塊。
providers —— 本模塊向全局服務(wù)中貢獻(xiàn)的那些服務(wù)的創(chuàng)建器。
這些服務(wù)能被本應(yīng)用中的任何部分使用。(你也可以在組件級(jí)別指定服務(wù)提供商,這通常是首選方式。)
bootstrap —— 應(yīng)用的主視圖,稱為根組件。它是應(yīng)用中所有其它視圖的宿主。只有根模塊才應(yīng)該設(shè)置這個(gè) bootstrap 屬性。
通俗一點(diǎn)講即:
聲明哪些組件、指令、管道屬于該模塊;
公開某些類,以便其它的組件模板可以使用它們;
導(dǎo)入其它模塊,從其它模塊中獲得本模塊所需的組件、指令和管道;
在應(yīng)用程序級(jí)提供服務(wù),以便應(yīng)用中的任何組件都能使用它。
如:
import { BrowserModule } from "@angular/platform-browser"; import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; import { NgModule } from "@angular/core"; import { HttpModule, Http } from "@angular/http"; import { RouterModule } from "@angular/router"; import { appRoutes } from "./app.routes"; import { AppcontentModule } from "./appcontent/appcontent.module"; import { AppComponent } from "./app.component"; import { CommonService } from "./shared/common.service"; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BrowserAnimationsModule, HttpModule, RouterModule.forRoot(appRoutes), AppcontentModule ], providers: [CommonService], bootstrap: [AppComponent] }) export class AppModule { }特性模塊
我們一般把自定義的其他模塊叫特性模塊。隨著應(yīng)用的擴(kuò)大,所有的事情都在一個(gè)模塊中完成難免會(huì)變亂,我們就會(huì)想著把統(tǒng)分為多個(gè)模塊,每個(gè)模塊都只做各自的事情而互不干擾,用根模塊來引導(dǎo)程序并管理所有子模塊即通過路由定向以及為它們提供全局配置與服務(wù)實(shí)例。
實(shí)現(xiàn)方式如下:
根模塊負(fù)責(zé)全局的路由。
核心模塊負(fù)責(zé)全局服務(wù),也可以定義一些只在根模塊中使用的組件等,并只能由根模塊引入一次,不再導(dǎo)出。
共享模塊不做服務(wù)的提供,而是定義全局共享的組件等,以及幫助子模塊導(dǎo)入系統(tǒng)模塊,讓子模塊只需要導(dǎo)入此共享模塊就夠了。
子模塊內(nèi)部可以細(xì)分自己的子路由到具體的子組件,以及提供自己的服務(wù)等。
除了頁面入口模塊(即除了根模塊外的具體業(yè)務(wù)模塊)之外的其他子模塊均考慮寫成惰性加載的模塊,以提升頁面引導(dǎo)的速度減少性能浪費(fèi)。
當(dāng)需要一個(gè)比較通用的全局服務(wù)時(shí),可以將其加入CoreModule,也可以再創(chuàng)建一個(gè)僅被根模塊引入的特性模塊。進(jìn)一步的,甚至可以將此模塊發(fā)布到npm,這就需要更強(qiáng)的編碼能力和技術(shù)積累了。
Angular2模塊的目錄和目錄結(jié)構(gòu)一般如下:
每個(gè)模塊一個(gè)應(yīng)該多帶帶的文件夾
模塊內(nèi)功能相關(guān)或相近
每個(gè)模塊最好都有多帶帶的路由定義
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://m.specialneedsforspecialkids.com/yun/53526.html
摘要:模塊簡(jiǎn)介簡(jiǎn)介應(yīng)用是模塊化的,而我們可以把它當(dāng)做一個(gè)容器,用于存放一些內(nèi)聚的代碼塊,它接收一個(gè)元數(shù)據(jù)對(duì)象并通過該對(duì)象告訴如何編譯和運(yùn)行模塊代碼。它標(biāo)記出該模塊擁有的組件指令和管道,并把它們的一部分公開出去,以便外部組件使用它們。 Angular2 模塊簡(jiǎn)介 NgModule 簡(jiǎn)介 Angular 應(yīng)用是模塊化的, 而NgModule我們可以把它當(dāng)做一個(gè)容器,用于存放一些內(nèi)聚的代碼塊,它接...
摘要:模塊簡(jiǎn)介簡(jiǎn)介應(yīng)用是模塊化的,而我們可以把它當(dāng)做一個(gè)容器,用于存放一些內(nèi)聚的代碼塊,它接收一個(gè)元數(shù)據(jù)對(duì)象并通過該對(duì)象告訴如何編譯和運(yùn)行模塊代碼。它標(biāo)記出該模塊擁有的組件指令和管道,并把它們的一部分公開出去,以便外部組件使用它們。 Angular2 模塊簡(jiǎn)介 NgModule 簡(jiǎn)介 Angular 應(yīng)用是模塊化的, 而NgModule我們可以把它當(dāng)做一個(gè)容器,用于存放一些內(nèi)聚的代碼塊,它接...
摘要:模塊在中一個(gè)指的是使用修飾的。中沒有模塊級(jí)別的,所有在中聲明的都是注冊(cè)在根級(jí)別的中導(dǎo)入其他,其它暴露的出的等可以在本的組件中被使用。導(dǎo)入一個(gè)并不意味著會(huì)自動(dòng)導(dǎo)入這個(gè)內(nèi)部導(dǎo)入的所暴露出的公共成員。 angular2 NgModel 模塊 在Angular2中一個(gè)Module指的是使用@NgModule修飾的class。@NgModule利用一個(gè)元數(shù)據(jù)對(duì)象來告訴Angular如何去編譯和...
摘要:官方支持微軟出品,是的超集,是的強(qiáng)類型版本作為首選編程語言,使得開發(fā)腳本語言的一些問題可以更早更方便的找到。第一個(gè)組件那么我們來為我們的增加一個(gè)吧,在命令行窗口輸入。引導(dǎo)過程通過在中引導(dǎo)來啟動(dòng)應(yīng)用。它們的核心就是。 第一節(jié):Angular 2.0 從0到1 (一)第二節(jié):Angular 2.0 從0到1 (二)第三節(jié):Angular 2.0 從0到1 (三) 第一章:認(rèn)識(shí)Angular...
摘要:為了簡(jiǎn)單起見,在本文中將會(huì)使用。已經(jīng)實(shí)例化了并且將它的模板載入到了元素中。中的依賴注入發(fā)生在該類的構(gòu)造函數(shù)中,因此我們將在構(gòu)造函數(shù)中注入。 國(guó)內(nèi) Angular2 資料比較少,這里看到一篇不錯(cuò)的入門文章就分享過來了 —— Angular 2 快速上手,這里面還有很多有關(guān)于 Angular2 的文章,感興趣的朋友可以去看一看 目前angular2已經(jīng)來到了beta版,這意味著它已經(jīng)做好了...
閱讀 3129·2021-11-15 18:14
閱讀 1781·2021-09-22 10:51
閱讀 3294·2021-09-09 09:34
閱讀 3511·2021-09-06 15:02
閱讀 1027·2021-09-01 11:40
閱讀 3194·2019-08-30 13:58
閱讀 2532·2019-08-30 11:04
閱讀 1088·2019-08-28 18:31