angular2 NgModel模組的詳細介紹

這篇文章帶給大家的內容是關於angular2 NgModel模組的詳細介紹，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

angular2 NgModel 模組

在Angular2中一個Module指的是使用@NgModule修飾的class。 @NgModule利用一個元資料物件來告訴Angular如何去編譯和執行程式碼。一個模組內部可以包含元件、指令、管道，並且可以將它們的存取權聲明為公有，以使外部模組的元件可以存取和使用到它們。我們也可以透過定義子模組來擴展我們應用的功能。

NgModule 的API

interface NgModule {
     // providers: 这个选项是一个数组,需要我们列出我们这个模块的一些需要共用的服务
     //            然后我们就可以在这个模块的各个组件中通过依赖注入使用了.
    providers : Provider[]
     // declarations: 数组类型的选项, 用来声明属于这个模块的指令,管道等等.
     //               然后我们就可以在这个模块中使用它们了.
    declarations : Array<type>|any[]>
     // imports: 数组类型的选项,我们的模块需要依赖的一些其他的模块,这样做的目的使我们这个模块
     //          可以直接使用别的模块提供的一些指令,组件等等.
    imports : Array<type>|ModuleWithProviders|any[]>
     // exports: 数组类型的选项,我们这个模块需要导出的一些组件,指令,模块等;
     //          如果别的模块导入了我们这个模块,
     //          那么别的模块就可以直接使用我们在这里导出的组件,指令模块等.
    exports : Array<type>|any[]>
    // entryComponents: 数组类型的选项,指定一系列的组件,这些组件将会在这个模块定义的时候进行编译
    //                  Angular会为每一个组件创建一个ComponentFactory然后把它存储在ComponentFactoryResolver
    entryComponents : Array<type>|any[]>
    // bootstrap: 数组类型选项, 指定了这个模块启动的时候应该启动的组件.当然这些组件会被自动的加入到entryComponents中去
    bootstrap : Array<type>|any[]>
    // schemas: 不属于Angular的组件或者指令的元素或者属性都需要在这里进行声明.
    schemas : Array<schemametadata>
    // id: 字符串类型的选项,模块的隐藏ID,它可以是一个名字或者一个路径;用来在getModuleFactory区别模块,如果这个属性是undefined
    //     那么这个模块将不会被注册.
    id : string
 }</schemametadata></type></type></type></type></type>

常用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'指明了模組的路徑，和模組的名稱。

【相關推薦：angular影片教學】

#

以上是angular2 NgModel模組的詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！