angular2 NgModel` 模块

angular2 NgModel 模块

在 Angular2中一个 Module指的是使用 @NgModule修饰的 class。 @NgModule利用一个元数据对象来告诉 Angular如何去编译和运行代码。一个模块内部能够包含组件、指令、管道，而且能够将它们的访问权限声明为公有，以使外部模块的组件能够访问和使用到它们。咱们也能够经过定义子模块来扩展咱们应用的功能。

NgModule 的API

interface NgModule {
     // providers: 这个选项是一个数组,须要咱们列出咱们这个模块的一些须要共用的服务
     //            而后咱们就能够在这个模块的各个组件中经过依赖注入使用了.
    providers : Provider[]
     // declarations: 数组类型的选项, 用来声明属于这个模块的指令,管道等等.
     //               而后咱们就能够在这个模块中使用它们了.
    declarations : Array<Type<any>|any[]>
     // imports: 数组类型的选项,咱们的模块须要依赖的一些其余的模块,这样作的目的使咱们这个模块
     //          能够直接使用别的模块提供的一些指令,组件等等.
    imports : Array<Type<any>|ModuleWithProviders|any[]>
     // exports: 数组类型的选项,咱们这个模块须要导出的一些组件,指令,模块等;
     //          若是别的模块导入了咱们这个模块,
     //          那么别的模块就能够直接使用咱们在这里导出的组件,指令模块等.
    exports : Array<Type<any>|any[]>
    // entryComponents: 数组类型的选项,指定一系列的组件,这些组件将会在这个模块定义的时候进行编译
    //                  Angular会为每个组件建立一个ComponentFactory而后把它存储在ComponentFactoryResolver
    entryComponents : Array<Type<any>|any[]>
    // bootstrap: 数组类型选项, 指定了这个模块启动的时候应该启动的组件.固然这些组件会被自动的加入到entryComponents中去
    bootstrap : Array<Type<any>|any[]>
    // schemas: 不属于Angular的组件或者指令的元素或者属性都须要在这里进行声明.
    schemas : Array<SchemaMetadata|any[]>
    // 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'指明了模块的路径，和模块的名称。