# Conflicts: # .nvmrc # aio/content/cli/index.md # aio/content/guide/ajs-quick-reference.md # aio/content/guide/animations.md # aio/content/guide/aot-compiler.md # aio/content/guide/app-shell.md # aio/content/guide/architecture-components.md # aio/content/guide/architecture-modules.md # aio/content/guide/architecture-services.md # aio/content/guide/architecture.md # aio/content/guide/attribute-directives.md # aio/content/guide/bazel.md # aio/content/guide/bootstrapping.md # aio/content/guide/browser-support.md # aio/content/guide/build.md # aio/content/guide/cheatsheet.md # aio/content/guide/cli-builder.md # aio/content/guide/comparing-observables.md # aio/content/guide/complex-animation-sequences.md # aio/content/guide/component-interaction.md # aio/content/guide/component-styles.md # aio/content/guide/creating-libraries.md # aio/content/guide/dependency-injection-in-action.md # aio/content/guide/dependency-injection-navtree.md # aio/content/guide/dependency-injection-providers.md # aio/content/guide/dependency-injection.md # aio/content/guide/deployment.md # aio/content/guide/deprecations.md # aio/content/guide/displaying-data.md # aio/content/guide/dynamic-component-loader.md # aio/content/guide/dynamic-form.md # aio/content/guide/elements.md # aio/content/guide/entry-components.md # aio/content/guide/feature-modules.md # aio/content/guide/file-structure.md # aio/content/guide/form-validation.md # aio/content/guide/forms-overview.md # aio/content/guide/forms.md # aio/content/guide/frequent-ngmodules.md # aio/content/guide/glossary.md # aio/content/guide/hierarchical-dependency-injection.md # aio/content/guide/http.md # aio/content/guide/i18n.md # aio/content/guide/ivy.md # aio/content/guide/language-service.md # aio/content/guide/lazy-loading-ngmodules.md # aio/content/guide/lifecycle-hooks.md # aio/content/guide/module-types.md # aio/content/guide/ngmodule-api.md # aio/content/guide/ngmodule-faq.md # aio/content/guide/ngmodule-vs-jsmodule.md # aio/content/guide/ngmodules.md # aio/content/guide/npm-packages.md # aio/content/guide/observables-in-angular.md # aio/content/guide/observables.md # aio/content/guide/pipes.md # aio/content/guide/providers.md # aio/content/guide/reactive-forms.md # aio/content/guide/releases.md # aio/content/guide/reusable-animations.md # aio/content/guide/route-animations.md # aio/content/guide/router.md # aio/content/guide/rx-library.md # aio/content/guide/schematics-authoring.md # aio/content/guide/schematics-for-libraries.md # aio/content/guide/schematics.md # aio/content/guide/security.md # aio/content/guide/service-worker-communications.md # aio/content/guide/service-worker-config.md # aio/content/guide/service-worker-devops.md # aio/content/guide/service-worker-getting-started.md # aio/content/guide/service-worker-intro.md # aio/content/guide/set-document-title.md # aio/content/guide/setup-local.md # aio/content/guide/sharing-ngmodules.md # aio/content/guide/singleton-services.md # aio/content/guide/static-query-migration.md # aio/content/guide/structural-directives.md # aio/content/guide/styleguide.md # aio/content/guide/template-syntax.md # aio/content/guide/testing.md # aio/content/guide/transition-and-triggers.md # aio/content/guide/typescript-configuration.md # aio/content/guide/universal.md # aio/content/guide/updating.md # aio/content/guide/upgrade-setup.md # aio/content/guide/upgrade.md # aio/content/guide/user-input.md # aio/content/guide/using-libraries.md # aio/content/guide/visual-studio-2015.md # aio/content/guide/web-worker.md # aio/content/guide/workspace-config.md # aio/content/marketing/events.html # aio/content/marketing/resources.json # aio/content/navigation.json # aio/content/start/data.md # aio/content/start/deployment.md # aio/content/start/forms.md # aio/content/start/index.md # aio/content/start/routing.md # aio/content/tutorial/index.md # aio/content/tutorial/toh-pt0.md # aio/content/tutorial/toh-pt1.md # aio/content/tutorial/toh-pt2.md # aio/content/tutorial/toh-pt3.md # aio/content/tutorial/toh-pt4.md # aio/content/tutorial/toh-pt5.md # aio/content/tutorial/toh-pt6.md # aio/package.json # aio/src/app/app.component.spec.ts # aio/src/app/custom-elements/api/api-list.component.html # aio/src/app/layout/doc-viewer/doc-viewer.component.ts # aio/src/app/layout/mode-banner/mode-banner.component.ts # aio/src/app/layout/nav-item/nav-item.component.html # aio/src/app/shared/toc.service.ts # aio/src/styles/0-base/_typography.scss # aio/src/styles/2-modules/_api-pages.scss # aio/tools/transforms/templates/api/lib/memberHelpers.html # aio/yarn.lock # packages/common/http/src/headers.ts # packages/common/http/src/interceptor.ts # packages/common/http/src/params.ts # packages/common/http/src/response.ts # packages/common/src/common_module.ts # packages/common/src/directives/ng_for_of.ts # packages/common/src/location/location.ts # packages/common/src/pipes/date_pipe.ts # packages/core/src/change_detection/pipe_transform.ts # packages/core/src/di/injectable.ts # packages/core/src/metadata/di.ts # packages/core/src/metadata/directives.ts # packages/core/src/metadata/ng_module.ts # packages/core/src/render3/component_ref.ts # packages/forms/src/directives/reactive_directives/form_control_name.ts # packages/forms/src/form_builder.ts # packages/forms/src/model.ts # packages/forms/src/validators.ts # packages/router/src/config.ts # packages/router/src/directives/router_outlet.ts # packages/router/src/events.ts # packages/router/src/router.ts # packages/router/src/router_module.ts # packages/router/src/router_state.ts # packages/router/src/shared.ts
138 lines
6.3 KiB
Markdown
138 lines
6.3 KiB
Markdown
# NgModules
|
||
|
||
**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 <live-example></live-example>. For explanations on the individual techniques, visit the relevant NgModule pages under the NgModules
|
||
section.
|
||
|
||
要想找一个涉及本章所讲的全部技术的范例,参见 <live-example></live-example>。
|
||
要想得到针对单项技术的一些讲解,参见本目录下的相关页面。
|
||
|
||
## 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
|
||
<a href="https://material.angular.io/">Material Design</a>,
|
||
<a href="http://ionicframework.com/">Ionic</a>, and
|
||
<a href="https://github.com/angular/angularfire2">AngularFire2</a>.
|
||
|
||
Angular 自己的库都是 NgModule,比如 `FormsModule`、`HttpClientModule` 和 `RouterModule`。
|
||
很多第三方库也是 NgModule,比如 <a href="https://material.angular.cn/">Material Design</a>、
|
||
<a href="http://ionicframework.com/">Ionic</a> 和
|
||
<a href="https://github.com/angular/angularfire2">AngularFire2</a>。
|
||
|
||
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.
|
||
|
||
NgModule 把组件、指令和管道打包成内聚的功能块,每个模块聚焦于一个特性区域、业务领域、工作流或通用工具。
|
||
|
||
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](guide/bootstrapping) that module to launch the application.
|
||
|
||
每个 Angular 应用都至少有一个模块,也就是根模块。
|
||
你可以[引导](guide/bootstrapping)那个模块,以启动该应用。
|
||
|
||
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](guide/feature-modules)
|
||
that represent collections of related functionality.
|
||
You then import these modules into the root module.
|
||
|
||
对于那些只有少量组件的简单应用,根模块就是你所需的一切。
|
||
随着应用的成长,你要把这个根模块重构成一些[特性模块](guide/feature-modules),它们代表一组密切相关的功能集。
|
||
然后你再把这些模块导入到根模块中。
|
||
|
||
## The basic NgModule
|
||
|
||
## 基本的模块
|
||
|
||
The [Angular CLI](cli) generates the following basic `AppModule` when creating a new app.
|
||
|
||
|
||
[Angular CLI](cli) 在创建新应用时会生成如下基本模块 `AppModule`。
|
||
|
||
<code-example path="ngmodules/src/app/app.module.1.ts" header="src/app/app.module.ts (default AppModule)">
|
||
// @NgModule decorator with its metadata
|
||
</code-example>
|
||
|
||
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`). For more information on the structure of an `@NgModule`, be sure to read [Bootstrapping](guide/bootstrapping).
|
||
|
||
文件的顶部是一些导入语句。接下来是你配置 `NgModule` 的地方,用于规定哪些组件和指令属于它(`declarations`),以及它使用了哪些其它模块(`imports`)。
|
||
如果要进一步了解 `@NgModule` 的结构,参见[引导](guide/bootstrapping)。
|
||
|
||
<hr />
|
||
|
||
## More on NgModules
|
||
|
||
## 关于 NgModule 的更多知识
|
||
|
||
You may also be interested in the following:
|
||
|
||
你可能还对下列内容感兴趣:
|
||
|
||
* [Feature Modules](guide/feature-modules).
|
||
|
||
[特性模块](guide/feature-modules)
|
||
|
||
* [Entry Components](guide/entry-components).
|
||
|
||
[入口组件](guide/entry-components)
|
||
|
||
* [Providers](guide/providers).
|
||
|
||
[服务提供商](guide/providers)。
|
||
|
||
* [Types of NgModules](guide/module-types).
|
||
|
||
[NgModule 的分类](guide/module-types).
|