Angular2 模块简介

Angular2 模块简介

NgModule 简介

Angular 应用是模块化的， 而NgModule咱们能够把它当作一个容器，用于存放一些内聚的代码块，它接收一个元数据对象并经过该对象告诉 Angular 如何编译和运行模块代码。它标记出该模块拥有的组件、指令和管道， 并把它们的一部分公开出去，以便外部组件使用它们。 它能够向应用的依赖注入器中添加服务提供商。
每一个 Angular 应用都至少有一个 NgModule 类，也就是根模块，它习惯上命名为 AppModule，并位于一个名叫 app.module.ts 的文件中。引导这个根模块就能够启动你的应用。

NgModule 元数据

NgModule 是一个带有 @NgModule() 装饰器的类。@NgModule() 装饰器是一个函数，它接受一个元数据对象，该对象的属性用来描述这个模块。其中最重要的属性以下。

• declarations（可声明对象表） —— 那些属于本 NgModule 的组件、指令、管道。
• exports（导出表） —— 那些能在其它模块的组件模板中使用的可声明对象的子集。
• imports（导入表） —— 那些导出了本模块中的组件模板所需的类的其它模块。
• providers —— 本模块向全局服务中贡献的那些服务的建立器。
  这些服务能被本应用中的任何部分使用。（你也能够在组件级别指定服务提供商，这一般是首选方式。）
• bootstrap —— 应用的主视图，称为根组件。它是应用中全部其它视图的宿主。只有根模块才应该设置这个 bootstrap 属性。

通俗一点讲即：

1. 声明哪些组件、指令、管道属于该模块；
2. 公开某些类，以便其它的组件模板可使用它们；
3. 导入其它模块，从其它模块中得到本模块所需的组件、指令和管道；
4. 在应用程序级提供服务，以便应用中的任何组件都能使用它。

如：

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { HttpModule, Http } from '@angular/http';
import { RouterModule } from '@angular/router';
import { appRoutes } from './app.routes';
import { AppcontentModule } from './appcontent/appcontent.module';
import { AppComponent } from './app.component';
import { CommonService } from './shared/common.service';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpModule,
    RouterModule.forRoot(appRoutes),
    AppcontentModule
  ],
  providers: [CommonService],
  bootstrap: [AppComponent]
})
export class AppModule { }

特性模块

咱们通常把自定义的其余模块叫特性模块。随着应用的扩大，全部的事情都在一个模块中完成不免会变乱，咱们就会想着把统分为多个模块，每一个模块都只作各自的事情而互不干扰，用根模块来引导程序并管理全部子模块即经过路由定向以及为它们提供全局配置与服务实例。
实现方式以下：

1. 根模块负责全局的路由。
2. 核心模块负责全局服务，也能够定义一些只在根模块中使用的组件等，并只能由根模块引入一次，再也不导出。
3. 共享模块不作服务的提供，而是定义全局共享的组件等，以及帮助子模块导入系统模块，让子模块只须要导入此共享模块就够了。
4. 子模块内部能够细分本身的子路由到具体的子组件，以及提供本身的服务等。
5. 除了页面入口模块(即除了根模块外的具体业务模块)以外的其余子模块均考虑写成惰性加载的模块，以提高页面引导的速度减小性能浪费。
6. 当须要一个比较通用的全局服务时，能够将其加入CoreModule，也能够再建立一个仅被根模块引入的特性模块。进一步的，甚至能够将此模块发布到npm，这就须要更强的编码能力和技术积累了。

Angular2模块的目录和目录结构通常以下：

1. 每一个模块一个应该单独的文件夹
2. 模块内功能相关或相近
3. 每一个模块最好都有单独的路由定义