資訊專欄INFORMATION COLUMN
摘要：模塊在中一個指的是使用修飾的。中沒有模塊級別的，所有在中聲明的都是注冊在根級別的中導入其他，其它暴露的出的等可以在本的組件中被使用。導入一個并不意味著會自動導入這個內部導入的所暴露出的公共成員。
angular2 NgModel 模塊
在Angular2中一個Module指的是使用@NgModule修飾的class。@NgModule利用一個元數據對象來告訴Angular如何去編譯和運行代碼。一個模塊內部可以包含組件、指令、管道，并且可以將它們的訪問權限聲明為公有，以使外部模塊的組件可以訪問和使用到它們。我們也可以通過定義子模塊來擴展我們應用的功能。NgModule 的API
interface NgModule {
// providers: 這個選項是一個數組,需要我們列出我們這個模塊的一些需要共用的服務
// 然后我們就可以在這個模塊的各個組件中通過依賴注入使用了.
providers : Provider[]
// declarations: 數組類型的選項, 用來聲明屬于這個模塊的指令,管道等等.
// 然后我們就可以在這個模塊中使用它們了.
declarations : Array|any[]>
// imports: 數組類型的選項,我們的模塊需要依賴的一些其他的模塊,這樣做的目的使我們這個模塊
// 可以直接使用別的模塊提供的一些指令,組件等等.
imports : Array|ModuleWithProviders|any[]>
// exports: 數組類型的選項,我們這個模塊需要導出的一些組件,指令,模塊等;
// 如果別的模塊導入了我們這個模塊,
// 那么別的模塊就可以直接使用我們在這里導出的組件,指令模塊等.
exports : Array|any[]>
// entryComponents: 數組類型的選項,指定一系列的組件,這些組件將會在這個模塊定義的時候進行編譯
// Angular會為每一個組件創建一個ComponentFactory然后把它存儲在ComponentFactoryResolver
entryComponents : Array|any[]>
// bootstrap: 數組類型選項, 指定了這個模塊啟動的時候應該啟動的組件.當然這些組件會被自動的加入到entryComponents中去
bootstrap : Array|any[]>
// schemas: 不屬于Angular的組件或者指令的元素或者屬性都需要在這里進行聲明.
schemas : Array
// id: 字符串類型的選項,模塊的隱藏ID,它可以是一個名字或者一個路徑;用來在getModuleFactory區別模塊,如果這個屬性是undefined
// 那么這個模塊將不會被注冊.
id : string
}
常用API簡介
NgModule的主要屬性如下：
declarations：模塊內部Components/Directives/Pipes的列表，聲明一下這個模塊內部成員，聲明之后才能使用對應的組件等。
providers：指定應用程序的根級別需要使用的service。（Angular2中沒有模塊級別的service，所有在NgModule中聲明的Provider都是注冊在根級別的Dependency Injector中）
imports：導入其他module，其它module暴露的出的Components、Directives、Pipes等可以在本module的組件中被使用。比如導入CommonModule后就可以使用NgIf、NgFor等指令。
exports：用來控制將哪些內部成員暴露給外部使用。導入一個module并不意味著會自動導入這個module內部導入的module所暴露出的公共成員。除非導入的這個module把它內部導入的module寫到exports中。
bootstrap：通常是app啟動的根組件，一般只有一個component。bootstrap中的組件會自動被放入到entryComponents中。
entryCompoenents: 不會再模板中被引用到的組件。這個屬性一般情況下只有ng自己使用，一般是bootstrap組件或者路由組件，ng會自動把bootstrap、路由組件放入其中。 除非不通過路由動態將component加入到dom中，否則不會用到這個屬性。
子模塊隨著程序的壯大，單一的根模塊已不能清晰的劃分職責，這時候便可以引入Feature Module。Feature Module與根模塊的創建方式一樣，所有的模塊共享一個運行期上下文和依賴注入器。
功能模塊與根模塊的職責區別主要有以下兩點：
根模塊的目的在于啟動app，功能模塊的目的在于擴展app
功能模塊可以根據需要暴露或隱藏具體的實現
Angular2提供的另一個與模塊有關的技術就是延遲加載了。默認情況下Angular2將所有的代碼打包成一個文件，目的是為了提高應用的流暢性，但是如果是運行在mobile中的app，加載一個大文件可能會過慢，所以rc5提供了一種延遲加載方式。
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" }, // 可以延遲加載子模塊，子模塊的結構和父模塊一樣，它會去加載子模塊中的Routes配置，并跳轉對應的組件中去。
{ path: "heroes", loadChildren: "app/hero/hero.module#HeroModule" }
];
export const routing: ModuleWithProviders = RouterModule.forRoot(routes);
其中，path指明路徑，loadChildren指明使用延遲加載，"app/crisis/crisis.module#CrisisModule"指明了模塊的路徑，和模塊的名稱。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/103404.html
摘要：入門系列四和表單元素屬性通過實現雙向綁定當開發一個數據錄入表單的時候，我們常常希望既可以顯示數據的屬性值，當用戶更改時，又可以更新數據的屬性值。以及怎么提取當前輸入框中的文本值，以便去更新數據屬性。 Angular2入門系列（四）————ngModel和表單元素name屬性 通過NgModel實現雙向綁定當開發一個數據錄入表單的時候，我們常常希望既可以顯示數據的屬性值，當用戶更改時，又...
摘要：入門系列四和表單元素屬性通過實現雙向綁定當開發一個數據錄入表單的時候，我們常常希望既可以顯示數據的屬性值，當用戶更改時，又可以更新數據的屬性值。以及怎么提取當前輸入框中的文本值，以便去更新數據屬性。 Angular2入門系列（四）————ngModel和表單元素name屬性 通過NgModel實現雙向綁定當開發一個數據錄入表單的時候，我們常常希望既可以顯示數據的屬性值，當用戶更改時，又...
摘要：下面我們看看如果使用是什么樣子的，首先我們需要在組件的修飾器中配置，然后在組件的構造函數中使用參數進行依賴注入。 第一節：Angular 2.0 從0到1 （一）第二節：Angular 2.0 從0到1 （二）第三節：Angular 2.0 從0到1 （三） 第二節：用Form表單做一個登錄控件 對于login組件的小改造 在 hello-angularsrcapploginlogin...
摘要：為了簡單起見，在本文中將會使用。已經實例化了并且將它的模板載入到了元素中。中的依賴注入發生在該類的構造函數中，因此我們將在構造函數中注入。 國內 Angular2 資料比較少，這里看到一篇不錯的入門文章就分享過來了 —— Angular 2 快速上手，這里面還有很多有關于 Angular2 的文章，感興趣的朋友可以去看一看 目前angular2已經來到了beta版，這意味著它已經做好了...
閱讀 2536·2023-04-25 19:47
閱讀 3383·2019-08-29 17:18
閱讀 855·2019-08-29 15:26
閱讀 3360·2019-08-29 14:17
閱讀 1114·2019-08-26 13:49
閱讀 3338·2019-08-26 13:22
閱讀 3023·2019-08-26 10:44
閱讀 2693·2019-08-23 16:51
