摘要：模块在中一个指的是使用修饰的。中没有模块级别的，所有在中声明的都是注册在根级别的中导入其他，其它暴露的出的等可以在本的组件中被使用。导入一个并不意味着会自动导入这个内部导入的所暴露出的公共成员。
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"指明了模块的路径，和模块的名称。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/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版，这意味着它已经做好了...
阅读 2513·2023-04-25 19:47
阅读 3337·2019-08-29 17:18
阅读 822·2019-08-29 15:26
阅读 3335·2019-08-29 14:17
阅读 1021·2019-08-26 13:49
阅读 3269·2019-08-26 13:22
阅读 2974·2019-08-26 10:44
阅读 2667·2019-08-23 16:51
