Angular 模块 (NgModule)



A basic understanding of the following concepts:


NgModules configure the injector and the compiler and help organize related things together.

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

An NgModule is a class marked by the @NgModule decorator. @NgModule takes a metadata object that describes how to compile a component's template and how to create an injector at runtime. It identifies the module's own components, directives, and pipes, making some of them public, through the exports property, so that external components can use them. @NgModule can also add service providers to the application dependency injectors.

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

For an example app showcasing all the techniques that NgModules related pages cover, see the. For explanations on the individual techniques, visit the relevant NgModule pages under the NgModules section.

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

Angular modularity

Angular 模块化

Modules are a great way to organize an application and extend it with capabilities from external libraries.


Angular libraries are NgModules, such as FormsModule, HttpClientModule, and RouterModule. Many third-party libraries are available as NgModules such as Material Design, Ionic, and AngularFire2.

Angular 自己的库都是 NgModule,比如 FormsModuleHttpClientModuleRouterModule。 很多第三方库也是 NgModule,比如 Material DesignIonicAngularFire2

NgModules consolidate components, directives, and pipes into cohesive blocks of functionality, each focused on a feature area, application business domain, workflow, or common collection of utilities.

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

Modules can also add services to the application. Such services might be internally developed, like something you'd develop yourself or come from outside sources, such as the Angular router and HTTP client.

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

Modules can be loaded eagerly when the application starts or lazy loaded asynchronously by the router.


NgModule metadata does the following:

NgModule 的元数据会做这些:

  • Declares which components, directives, and pipes belong to the module.


  • Makes some of those components, directives, and pipes public so that other module's component templates can use them.


  • Imports other modules with the components, directives, and pipes that components in the current module need.


  • Provides services that the other application components can use.


Every Angular app has at least one module, the root module. You bootstrap that module to launch the application.

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

The root module is all you need in a simple application with a few components. As the app grows, you refactor the root module into feature modules that represent collections of related functionality. You then import these modules into the root module.

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

The basic NgModule


The CLI generates the following basic app module when creating a new app.

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

// 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 { }

At the top are the import statements. The next section is where you configure the @NgModule by stating what components and directives belong to it (declarations) as well as which other modules it uses (imports). This page builds on Bootstrapping, which covers the structure of an NgModule in detail. If you need more information on the structure of an @NgModule, be sure to read Bootstrapping.

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

More on NgModules

关于 NgModule 的更多知识

You may also be interested in the following: