NgModule 简介

Angular 模块 (NgModule)

前提条件

对下列概念有基本的理解：

• 引导启动。

NgModules 用于配置注入器和编译器，并帮你把那些相关的东西组织在一起。

NgModule 是一个带有 @NgModule 装饰器的类。 @NgModule 的参数是一个元数据对象，用于描述如何编译组件的模板，以及如何在运行时创建注入器。 它会标出该模块自己的组件、指令和管道，通过 exports 属性公开其中的一部分，以便外部组件使用它们。 NgModule 还能把一些服务提供商添加到应用的依赖注入器中。

要想找一个涉及本章所讲的全部技术的范例，参见 在线例子 / 下载范例。 要想得到针对单项技术的一些讲解，参见本目录下的相关页面。

Angular 模块化

模块是组织应用和使用外部库扩展应用的最佳途径。

Angular 自己的库都是 NgModule，比如 FormsModule、HttpClientModule 和 RouterModule。 很多第三方库也是 NgModule，比如 Material Design、 Ionic 和 AngularFire2。

Angular 模块把组件、指令和管道打包成内聚的功能块，每个模块聚焦于一个特性区域、业务领域、工作流或通用工具。

模块还可以把服务加到应用中。 这些服务可能是内部开发的（比如你自己写的），或者来自外部的（比如 Angular 的路由和 HTTP 客户端）。

模块可以在应用启动时立即加载，也可以由路由器进行异步的惰性加载。

NgModule 的元数据会做这些：

• 声明某些组件、指令和管道属于这个模块。

每个 Angular 应用都至少有一个模块，也就是根模块。 你可以引导那个模块，以启动该应用。

对于那些只有少量组件的简单应用，根模块就是你所需的一切。 随着应用的成长，你要把这个根模块重构成一些特性模块，它们代表一组密切相关的功能集。 然后你再把这些模块导入到根模块中。

基本的模块

CLI 在创建新应用时会生成下列基本的应用模块。

src/app/app.module.ts

content_copy// imports
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';
import { ItemDirective } from './item.directive';


// @NgModule decorator with its metadata
@NgModule{
  declarations: [
    AppComponent,
    ItemDirective
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

文件的顶部是一些导入语句。接下来是你配置 NgModule 的地方，用于规定哪些组件和指令属于它（declarations），以及它使用了哪些其它模块（imports）。 本章是基于引导一章的，那里详细讲了 NgModule 的结构。如果要进一步了解 @NgModule 的结构，参见引导。

关于 NgModule 的更多知识

你可能还对下列内容感兴趣：

• 特性模块