angular模块详解

原文：

https://www.jianshu.com/p/819421ff955a

大纲

　　1、angular应用是模块化的
　　2、对模块（Module）的认识
　　3、模块的分类：根模块和特性模块
　　4、NgModel参数详解
　　5、imports数组与文件头部的import的对比

angular应用是模块化的

　　1、Angular 应用是模块化的，并且Angular有自己的模块系统，它被称为Angular模块或NgModules.
　　2、每个Angular应用至少有一个模块（根模块），习惯上命名为AppModule
　　3、根模块在一些小型应用中可能是唯一的模块，大多数应用会有很多特性模块，每个模块都是一个内聚的代码块专注于某个应用领域、工作流或紧密相关的功能。
　　4、Angular模块（无论是根模块还是特性模块）都是一个带有@NgModule装饰器的类。
　　5、我们通过引导根模块来启动应用，在开发期间，通常在一个main.ts文件中引导AppModule,如：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';

platformBrowserBynamic().bootstrapModule(AppModule);

对模块（Module）的认识

　　1、Angular模块是一个由@NgModule装饰器提供元数据的类，元数据包括：
　　　　声明哪些组件、指令、管道属于该模块
　　　　公开某些类，以便其它的组件模板可以使用它们
　　　　导入其它模块，从其它模块中获得本模块所需的组件、指令和管道
　　　　在应用程序级提供服务，以便应用中的任何组件都能使用它
　　2、模块是组织应用和使用外部扩展应用的最佳途径
　　3、在Angular2中一个Module指的是使用@NgModule修饰的class。@NgModule利用一个元数据对象来告诉Angular如何去编译和运行代码。一个模块内部可以包含组件、指令、管道，并且可以将它们的访问权限声明为公有，以使外部模块的组件可以访问和使用到它们。
　　4、模块是用来组织应用的，通过模块机制外部类库可以很方便的扩展应用，Rc5之后，Angular2将许多常用功能都分配到一个个的模块中，如:FormModule、HttpModule、RouterModule。
　　5、模块与模块之间可以相互调用，调用用import，开出接口让人可以调用export
　　6、在Angular模块中管理着本模块中的各个组件。

模块的分类：根模块和特性模块

　　1、每个Angular2的应用都至少有一个模块即根模块。
随着程序的壮大，单一的根模块已不能清晰的划分职责，这时候便可以引入Feature Module。Feature Module与根模块的创建方式一样，所有的模块共享一个运行期上下文和依赖注入器。
　　2、功能模块与根模块的职责区别主要有以下两点：
　　　　2.1：根模块的目的在于启动app，功能模块的目的在于扩展app
　　　　2.2：功能模块可以根据需要暴露或隐藏具体的实现
　　3、Angular2提供的另一个与模块有关的技术就是延迟加载了。默认情况下Angular2将所有的代码打包成一个文件，目的是为了提高应用的流畅性，但是如果是运行在mobile中的app，加载一个大文件可能会过慢，所以rc5提供了一种延迟加载方式。

NgModel参数详解

　　NgModule是一个装饰器函数，它接收一个用来描述模块属性的元数据对象，其中最重要的属性是：
　　1、declarations：用于声明本模块中拥有的视图类，Angular有三种视图类：组件、指令和管道。
　　2、exports：declarations的子集，可用于其它模块的组件模板。（用来控制将哪些内部成员暴露给外部使用。导入一个module并不意味着会自动导入这个module内部导入的module所暴露出的公共成员。除非导入的这个module把它内部导入的module写到exports中。）
　　3、imports：本模块声明的组件模板需要的类所在的其它模块（导入其他module，其它module暴露的出的Components、Directives、Pipes等可以在本module的组件中被使用。比如导入CommonModule后就可以使用NgIf、NgFor等指令。）
　　4、providers：服务的创建者，并加入到全局服务列表中，可用于应用任何部分。（指定应用程序的根级别需要使用的service。（Angular2中没有模块级别的service，所有在NgModule中声明的Provider都是注册在根级别的Dependency Injector中））
　　5、bootstrap：指定应用的主视图（称为根组件），它是所有其它属兔的宿主，只有根模块才能设置bootstrap通常是app启动的根组件，一般只有一个component。bootstrap中的组件会自动被放入到entryComponents中。
　　6、entryCompoenents: 不会再模板中被引用到的组件。这个属性一般情况下只有ng自己使用，一般是bootstrap组件或者路由组件，ng会自动把bootstrap、路由组件放入其中。除非不通过路由动态将component加入到dom中，否则不会用到这个属性。

imports数组与文件头部的import的对比

　　1、imports数组和文件头部的import的应用
　　　　1.1、imports数组：是Angular中特有的，本模块声明的组件模板需要的类所在的其它模块（导入其他module，其它module暴露的出的Components、Directives、Pipes等可以在本module的组件中被使用。比如导入CommonModule后就可以使用NgIf、NgFor等指令。）
　　　　1.2、文件头部的import：用于引用一些在其他文件中定义好的公用的方法，数据模型，这是JavaScript的方式
　　2、区别：
　　　　2.1、JavaScript的import声明允许你访问在其他文件中导出的符号，这样你可以在当前文件引用它们。我们会往几乎所有类型的应用中加入import语句。它们与Angular毫无关系，Angular对它们一无所知。
　　　　2.2、模块的imports数组是@NgModule元数据中独有的。它告诉Angular特定Angular模块的信息——用@NgModule装饰的类——应用需要它们来正常工作

参考网址:

https://www.cnblogs.com/dojo-lzz/p/5878073.html