honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Polish ngmodule.jade

This commit is contained in:
Yang Lin 2016-12-03 23:01:22 +08:00
parent e56cca9c79
commit 4bd612d0d8
1 changed files with 277 additions and 192 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

347
public/docs/ts/latest/guide/ngmodule.jade
View File

@ -7,7 +7,7 @@ block includes
:marked
**Angular Modules** help organize an application into cohesive blocks of functionality.
**Angular模块**能帮你把应用组织成多个紧密相关的功能块。
**Angular 模块**能帮你把应用组织成多个内聚的功能块。
An Angular Module is a _class_ adorned with the **@NgModule** decorator function.
`@NgModule` takes a metadata object that tells Angular how to compile and run module code.
@ -27,7 +27,8 @@ block includes
of creating and maintaining a single _root_ `AppModule` for the entireapplication .
Read that first.
[根模块](appmodule.html)章介绍了如何为整个应用 Angular 模块和创建于维护单一 *根* `AppModule`类。先阅读这一章。
[根模块](appmodule.html)章介绍过 Angular 模块，以及如何为整个应用创建和维护单一的*根*`AppModule`类。
先阅读这一章。
This page goes into much greater depth as this extensive table of contents reveals.
@ -38,33 +39,60 @@ block includes
## 目录
* [Angular modularity](#angular-modularity "Add structure to the app with NgModule")
* [Angular模块化](#angular-modularity "用NgModule把结构添加到应用中")
[Angular 模块化](#angular-modularity "用 NgModule 把结构添加到应用中")
* [The application root module](#root-module "The startup module that every app requires")
* [应用的根模块](#root-module "任何应用都需要的启动模块")
[应用的根模块](#root-module "任何应用都需要的启动模块")
* [Bootstrap](#bootstrap "Launch the app in a browser with the root module as the entry point") the root module
* [引导](#bootstrap "在浏览器中把根模块作为入口点来启动应用")根模块
[引导](#bootstrap "在浏览器中把根模块作为入口点来启动应用")根模块
* [Declarations](#declarations "Declare the components, directives, and pipes that belong to a module")
* [声明](#declarations "声明从属于模块的组件、指令和管道")
[声明](#declarations "声明从属于模块的组件、指令和管道")
* [Providers](#providers "Extend the app with additional services")
* [提供商](#providers "使用更多服务来扩展该应用")
[提供商](#providers "使用更多服务来扩展该应用")
* [Imports](#imports "Import components, directives, and pipes for use in component templates")
* [导入](#imports "为组件模板导入组件、指令和管道")
[导入](#imports "为组件模板导入组件、指令和管道")
* [Resolve conflicts](#resolve-conflicts "When two directives have the same selector ...")
* [解决冲突](#resolve-conflicts "当两指令具有相同的选择器时……")
[解决冲突](#resolve-conflicts "当两指令具有相同的选择器时……")
* [Feature modules](#feature-modules "Partition the app into feature modules")
* [特性模块](#feature-modules "把应用分割成一些特性模块")
[特性模块](#feature-modules "把应用分割成一些特性模块")
* [Lazy loaded modules](#lazy-load "Load modules asynchronously") with the Router
* 通过路由器[惰性加载模块](#lazy-load "惰性加载模块")
通过路由器[惰性加载模块](#lazy-load "惰性加载模块")
* [Shared modules](#shared-module "Create modules for commonly used components, directives, and pipes")
* [共享模块](#shared-module "为公用的组件、指令和管道创建模块")
[共享模块](#shared-module "为公用的组件、指令和管道创建模块")
* [The Core module](#core-module "Create a core module with app-wide singleton services and single-use components")
* [核心模块](#core-module "用应用级单例服务和一次性组件创建核心模块")
[核心模块](#core-module "用应用级单例服务和一次性组件创建核心模块")
* [Configure core services with _forRoot_](#core-for-root "Configure providers during module import")
* [用_forRoot_配置核心服务](#core-for-root "在导入模块时配置提供商")
[用 _forRoot_ 配置核心服务](#core-for-root "在导入模块时配置提供商")
* [Prevent reimport of the _CoreModule_](#prevent-reimport "because bad things happen if a lazy loaded module imports Core")
* [禁止重复导入_CoreModule_](#prevent-reimport "如果惰性加载模块导入了核心模块，就会出问题")
[禁止重复导入 _CoreModule_](#prevent-reimport "如果惰性加载模块导入了核心模块，就会出问题")
* [NgModule metadata properties](#ngmodule-properties "A technical summary of the @NgModule metadata properties")
* [NgModule元数据的属性](#ngmodule-properties "对@NgModule元数据属性的技术性总结")
[NgModule 元数据的属性](#ngmodule-properties "对@NgModule元数据属性的技术性总结")
### 在线例子
@ -73,15 +101,24 @@ block includes
本章通过一个基于《英雄指南》的渐进式例子解释了 Angular 的模块。这里是例子演化过程中一些关键节点的在线例子。
* <live-example plnkr="minimal.0">A minimal NgModule app</live-example>
* <live-example plnkr="minimal.0">最小化的NgModule应用</live-example>
<live-example plnkr="minimal.0">最小的 NgModule 应用</live-example>
* <live-example plnkr="contact.1b">The first contact module</live-example>
* <live-example plnkr="contact.1b">第一个联系人模块</live-example>
<live-example plnkr="contact.1b">第一个联系人模块</live-example>
* <live-example plnkr="contact.2">The revised contact module</live-example>
* <live-example plnkr="contact.2">修改过的联系人模块</live-example>
<live-example plnkr="contact.2">修改过的联系人模块</live-example>
* <live-example plnkr="pre-shared.3">Just before adding _SharedModule_</live-example>
* <live-example plnkr="pre-shared.3">添加_SharedModule_之前</live-example>
<live-example plnkr="pre-shared.3">添加 _SharedModule_ 之前</live-example>
* <live-example>The final version</live-example>
* <live-example>最终版</live-example>
<live-example>最终版</live-example>
### Frequently Asked Questions (FAQs)
@ -109,7 +146,7 @@ a#angular-modularity
Modules are a great way to organize the application and extend it with capabilities from external libraries.
模块是组织应用程序和使用外部程序库的最佳途径。
模块是组织应用和使用外部库扩展应用的最佳途径。
Many Angular libraries are modules (e.g, `FormsModule`, `HttpModule`, `RouterModule`).
Many third party libraries are available as Angular modules (e.g.,
@ -117,8 +154,8 @@ a#angular-modularity
<a href="http://ionicframework.com/" target="_blank">Ionic</a>,
<a href="https://github.com/angular/angularfire2" target="_blank">AngularFire2</a>).
很多Angular库都是模块，比如：`FormsModule`、`HttpModule`、`RouterModule`。
很多第三方库也封装成了Angular模块，比如：<a href="https://material.angular.io/" target="_blank">Material Design</a>、
很多 Angular 库都是模块，例如：`FormsModule`、`HttpModule`、`RouterModule`。
很多第三方库也封装成了 Angular 模块，例如：<a href="https://material.angular.io/" target="_blank">Material Design</a>、
<a href="http://ionicframework.com/" target="_blank">Ionic</a>、
<a href="https://github.com/angular/angularfire2" target="_blank">AngularFire2</a>。
@ -126,13 +163,14 @@ a#angular-modularity
cohesive blocks of functionality, each focused on a
feature area, application business domain, workflow, or common collection of utilities.
Angular模块把组件、指令和管道打包成内聚的功能块，每块聚焦于一个特性分区、业务领域、工作流，或一组通用的工具。
Angular 模块把组件、指令和管道打包成内聚的功能块，每个模块聚焦于一个特性区域、业务领域、工作流或通用工具。
Modules can also add services to the application.
Such services might be internally-developed such as the application logger.
They can come from outside sources such as the Angular router and Http client.
模块还能用来把服务加到应用程序中。这些服务可能是内部研发的，比如应用日志服务；也可能是外部资源，比如Angular路由和Http客户端。
模块还能用来把服务加到应用程序中。这些服务可能是内部研发的，例如应用日志服务；
也可能是外部资源，例如 Angular 路由和 Http 客户端。
Modules can be loaded eagerly when the application starts.
They can also be _lazy loaded_ asynchronously by the router.
@ -145,19 +183,19 @@ a#angular-modularity
* declare which components, directives and pipes _belong_ to the module.
* 声明哪些组件、指令、管道属于该模块。
声明哪些组件、指令、管道_属于_该模块。
* make some of those classes public so that other component templates can use them.
* 公开某些类，以便其它的组件模板可以使用它们。
公开某些类，以便其它的组件模板可以使用它们。
* import other modules with the components, directives and pipes needed by the components in _this_ module.
* 导入其它模块，从其它模块总获得本模块所需的组件、指令和管道。
导入其它模块，从其它模块中获得_本_模块所需的组件、指令和管道。
* provide services at the application level that any application component can use.
* 在应用程序级提供服务，以便应用中的任何组件都能使用它。
在应用程序级提供服务，以便应用中的任何组件都能使用它。
Every Angular app has at least one module class, the _root module_.
We bootstrap that module to launch the application.
@ -170,7 +208,7 @@ a#angular-modularity
We then import these modules into the _root module_.
对于组件很少的简单应用来说，只用一个_根模块_就足够了。
随着应用规模的增长，我们逐步从_根模块_中重构出一些**特性模块**，它们用来实现一组密切相关的功能。
随着应用规模的增长，我们逐步从_根模块_中重构出一些**特性模块**，来代表一组相关功能的集合。
然后，我们在_根模块_中导入它们。
We'll see how later in the page. Let's start with the _root module_.
@ -192,7 +230,7 @@ a#root-module
The `AppModule` from the [_QuickStart seed_](setup.html) is about as minimal as it gets:
[快速起步种子库](setup.html)中的`AppModule`是绝对最小化的版本：
[快速起步种子库](setup.html)中的`AppModule`是能找到的最小版本：
+makeExample('setup/ts/app/app.module.ts', '', 'app/app.module.ts (minimal)')(format=".")
:marked
@ -211,12 +249,12 @@ a#root-module
in any of this modules component templates.
`BrowserModule`注册了一些关键的应用服务提供商。
它还包括了一些通用的指令，比如`NgIf`和`NgFor`，所以这些指令在该模块的任何组件模板中都是可用的。
它还包括了一些通用的指令，例如`NgIf`和`NgFor`，所以这些指令在该模块的任何组件模板中都是可用的。
The `declarations` list identifies the application's only component,
the _root component_, the top of this app's rather bare component tree.
`declarations`列出了该应用程序中唯一的组件（根组件），这是该应用的顶层组件，而不会暴露出整个组件树。
`declarations`列出了该应用程序中唯一的组件（_根组件_），它是应用的光秃秃的组件树的根。
The example `AppComponent` simply displays a data-bound title:
@ -228,7 +266,7 @@ a#root-module
When Angular launches the app, it places the HTML rendering of `AppComponent` in the DOM,
inside the `<my-app>` element tags of the `index.html`
最后，`@NgModule.bootstrap`属性把这个`AppComponent`标记为_引导（bootstrap）组件_。
最后，`@NgModule.bootstrap`属性把这个`AppComponent`标记为_引导 (bootstrap) 组件_。
当 Angular 引导应用时，它会在 DOM 中渲染`AppComponent`，并把结果放进`index.html`的`<my-app>`元素标记内部。
a#bootstrap
@ -250,12 +288,12 @@ a#bootstrap
### Dynamic bootstrapping with the Just-in-time (JiT) compiler
### 通过即时（JiT）编译器动态引导
### 通过即时 (JiT) 编译器动态引导
In the first, _dynamic_ option, the [Angular compiler](../cookbook/ngmodule-faq.html#q-angular-compiler "About the Angular Compiler")
compiles the application in the browser and then launches the app.
先看看_dynamic_选项，[Angular编译器](../cookbook/ngmodule-faq.html#q-angular-compiler "关于Angular编译器")在浏览器中编译并引导该应用。
先看看_动态_选项，[Angular 编译器](../cookbook/ngmodule-faq.html#q-angular-compiler "关于 Angular 编译器")在浏览器中编译并引导该应用。
+makeExample('ngmodule/ts/app/main.ts', '', 'app/main.ts (dynamic)')(format=".")
@ -268,7 +306,7 @@ a#bootstrap
### Static bootstrapping with the Ahead-of-time (AoT) compiler
### 使用预编译器（AoT - Ahead-Of-Time）进行静态引导
### 使用预编译器 (AoT - Ahead-Of-Time) 进行静态引导
Consider the static alternative which can produce a much smaller application that
launches faster, especially on mobile devices and high latency networks.
@ -279,7 +317,7 @@ a#bootstrap
producing a collection of class factories in their own files.
Among them is the `AppModuleNgFactory`.
使用_static_选项，Angular编译器作为构建流程的一部分提前运行，生成一组类工厂。它们的核心就是`AppModuleNgFactory`。
使用_静态_选项，Angular 编译器作为构建流程的一部分提前运行，生成一组类工厂。它们的核心就是`AppModuleNgFactory`。
The syntax for bootstrapping the pre-compiled `AppModuleNgFactory` is similar to
the dynamic version that bootstraps the `AppModule` class.
@ -305,9 +343,9 @@ a#bootstrap
The AoT compiler outputs the factory to a physical file
that we're importing here in the static version of `main.ts`.
无论是JIT还是AOT编译器都会从同一份`AppModule`源码中生成一个`AppModuleNgFactory`类。
JIT编译器动态、在内存中、在浏览器中创建这个工厂类。
AOT编译器把工厂输出成一个物理文件，也就是我们在静态版本`main.ts`中导入的那个。
无论是 JiT 还是 AoT 编译器都会从同一份`AppModule`源码中生成一个`AppModuleNgFactory`类。
JiT 编译器动态地在浏览器的内存中创建这个工厂类。
AoT 编译器把工厂输出成一个物理文件，也就是我们在静态版本`main.ts`中导入的那个。
In general, the `AppModule` should neither know nor care how it is bootstrapped.
@ -415,7 +453,7 @@ a#providers
accessible through a user service.
This sample application has a dummy implementation of such a `UserService`.
很多应用都需要获取当前登录的用户的信息，并且通过user服务来访问它们。
很多应用都需要获取当前登录的用户的信息，并且通过一个用户服务来访问它们。
该范例中有一个`UserService`的伪实现。
+makeExample('ngmodule/ts/app/user.service.ts', '', 'app/user.service.ts')(format=".")
@ -447,7 +485,7 @@ a#imports
:marked
## Import supporting modules
## 导入“支持模块”
## 导入支持性模块
The app shouldn't welcome a user if there is no user.
@ -603,7 +641,7 @@ a#imports
form features such as validation are not yet available.
退一步说，即使 Angular 有办法识别`ngModel`，`ContactComponent`也不会表现的像 Angular 表单，
因为本组件表单的表单相关的特性（比如有效性验证）还不可用。
因为本组件表单的表单相关的特性（例如有效性验证）还不可用。
### Import the FormsModule
@ -739,7 +777,7 @@ a#application-scoped-providers
在实践中，服务的范围很少会成为问题。
联系人之外的组件不会意外注入`ContactService`服务。
要想注入`ContactService`，你得先导入它的_类型_。
而只有联系人组件才会导入`ContactService`)类型_。
而只有联系人组件才会导入`ContactService`_类型_。
See the [FAQ that pursues this issue](../cookbook/ngmodule-faq.html#q-component-scoped-providers)
and its mitigations in greater detail.
@ -876,11 +914,11 @@ a#feature-modules
* The root `AppModule` grows larger with each new application class and shows no signs of stopping.
* 随着一个个类被加入应用中，根模块`AppModule`变大了，并且还会继续变大。
随着一个个类被加入应用中，根模块`AppModule`变大了，并且还会继续变大。
* We have conflicting directives.
* 我们遇到了指令冲突。
我们遇到了指令冲突。
The `HighlightDirective` in contact is re-coloring the work done by the `HighlightDirective` declared in `AppModule`.
And it's coloring the application title text when it should only color the `ContactComponent`.
@ -906,8 +944,8 @@ a#feature-modules
just like a root module.
Feature module metadata have the same properties as the metadata for a root module.
_特性模块_是带有`@NgModule`装饰器及其元数据的类，就像根模块中一样。
特性模块的元数据和根模块的元数据携带的属性是一样的。
_特性模块_是带有`@NgModule`装饰器及其元数据的类，就像根模块一样。
特性模块的元数据和根模块的元数据的属性是一样的。
The root module and the feature module share the same execution context.
They share the same dependency injector which means the services in one module
@ -923,11 +961,11 @@ a#feature-modules
1. We _boot_ the root module to _launch_ the app;
we _import_ a feature module to _extend_ the app.
1. 我们_引导_根模块来_启动_应用，但_导入_特性模块来_扩展_应用。
我们_引导_根模块来_启动_应用，但_导入_特性模块来_扩展_应用。
2. A feature module can expose or hide its implementation from other modules.
2. 特性模块可以对其它模块暴露或隐藏自己的实现。
特性模块可以对其它模块暴露或隐藏自己的实现。
Otherwise, a feature module is distinguished primarily by its intent.
@ -937,8 +975,8 @@ a#feature-modules
focused on an application business domain, a user workflow, a facility (forms, http, routing),
or a collection of related utilities.
特性模块用来提供一组紧密相关的功能。
聚焦于应用的某个业务领域、用户的某个工作流、某个基础设施（表单、HTTP、路由），或一组相互关联的工具。
特性模块用来提供了内聚的功能集合。
聚焦于应用的某个业务领域、用户工作流、某个基础设施（表单、HTTP、路由），或一组相关的工具集合。
While we can do everything within the root module,
feature modules help us partition the app into areas of specific interest and purpose.
@ -954,7 +992,7 @@ a#feature-modules
In the next section, we carve the contact functionality out of the root module
and into a dedicated feature module.
在下一节，我们从根模块中把与联系人有关的功能切分到专门的特性模块中。
下一节，我们从根模块中把与联系人有关的功能切分到专门的特性模块中。
<a id="contact-module-v1"></a>
### Make _Contact_ a feature module
@ -967,19 +1005,19 @@ a#feature-modules
1. Create the `ContactModule` in the `app/contact` folder.
1. 在`app/contact`目录下创建`ContactModule`。
在`app/contact`目录下创建`ContactModule`。
1. Move the contact material from `AppModule` to `ContactModule`.
1. 把联系人相关的元素从`AppModule`移到`ContactModule`中。
把联系人相关的元素从`AppModule`移到`ContactModule`中。
1. Replace the imported `BrowserModule` with `CommonModule`.
1. 把导入`BrowserModule`改为导入`CommonModule`。
把导入`BrowserModule`改为导入`CommonModule`。
1. Import the `ContactModule` into the `AppModule`.
1. 在`AppModule`中导入`ContactModule`。
在`AppModule`中导入`ContactModule`。
`AppModule` is the only _existing_ class that changes. But we do add one new file.
@ -999,11 +1037,11 @@ a#feature-modules
We copy from `AppModule` the contact-related import statements and the `@NgModule` properties
that concern the contact and paste them in `ContactModule`.
我们从`AppModule`中把与联系人有关的import语句和`@NgModule`中与联系人有关的内容拷贝到`ContactModule`中。
把`AppModule`中的相关联系人的 import 语句和`@NgModule`的相关属性复制到`ContactModule`。
We _import_ the `FormsModule` because the contact component needs it.
我们还_导入_了`FormsModule`，来满足“联系人”组件的需求。
_导入_`FormsModule`，因为联系人组件需要它。
.alert.is-important
:marked
@ -1023,19 +1061,19 @@ a#feature-modules
We _declare_ the contact component, directive, and pipe in the module `declarations`.
我们在该模块的`declarations`中*声明*了“联系人”的组件、指令和管道。
我们在该模块的`declarations`中*声明*了联系人组件、指令和管道。
We _export_ the `ContactComponent` so
other modules that import the `ContactModule` can include it in their component templates.
我们*导出*了`ContactComponent`，这样其它模块只要导入了`ContactModule`，就可以在其组件模板中使用来自`ContactModule`中的组件了。
我们*导出*了`ContactComponent`，这样其它模块只要导入了`ContactModule`，就可以在它们的组件模板中使用`ContactComponent`了。
All other declared contact classes are private by default.
The `AwesomePipe` and `HighlightDirective` are hidden from the rest of the application.
The `HighlightDirective` can no longer color the `AppComponent` title text.
“联系人”中声明的所有其它类默认都是私有的。
`AwesomePipe`和`HighlightDirective`对应用的其它部分则是不可见的。
声明的所有其它联系人类默认都是私有的。
`AwesomePipe`和`HighlightDirective`对应用的其它部分是不可见的。
所以`HighlightDirective`不能把`AppComponent`的标题文字染色。
:marked
@ -1058,11 +1096,11 @@ a#feature-modules
Then import the `ContactModule` so the app can continue to display the exported `ContactComponent`.
然后，导入`ContactModule`，以便应用仍然可以显示从这里导出的`ContactComponent`。
然后，导入`ContactModule`，以便应用能够继续显示导出的`ContactComponent`。
Here's the refactored version of the `AppModule` side-by-side with the previous version.
下面是`AppModule`重构完的版本与之前版本的一对一对比。
下面是`AppModule`重构完的版本与之前版本的对比。
+makeTabs(
`ngmodule/ts/app/app.module.2.ts,
@ -1072,7 +1110,8 @@ a#feature-modules
app/app.module.ts (v1)`)
:marked
### Improvements
### 增强功能
### 改进之处
:marked
There's a lot to like in the revised `AppModule`
@ -1081,35 +1120,35 @@ a#feature-modules
* It does not change as the _Contact_ domain grows.
* 它不会再随着_联系人_的领域扩张而修改。
它不会再随着_联系人_的领域扩张而修改。
* It only changes when we add new modules.
* 只有当添加新模块时才需要修改它。
只有当添加新模块时才需要修改它。
* It's simpler:
* 它也变得简单了：
它也变得简单了：
* Fewer import statements
* 更少的`import`语句
更少的`import`语句
* No `FormsModule` import
* 不再导入`FormsModule`
不再导入`FormsModule`
* No contact-specific declarations
* 没有与联系人有关的声明
没有与联系人有关的声明
* No `ContactService` provider
* 没有`ContactService`提供商
没有`ContactService`提供商
* No `HighlightDirective` conflict
* 没有`HighlightDirective`冲突
没有`HighlightDirective`冲突
Try this `ContactModule` version of the sample.
@ -1122,14 +1161,14 @@ a#lazy-load
:marked
## Lazy loading modules with the Router
## 用路由器实现延迟（Lazy）加载
## 用路由器实现惰性 (lazy) 加载
The Heroic Staffing Agency sample app has evolved.
It has two more modules, one for managing the heroes-on-staff and another for matching crises to the heroes.
Both modules are in the early stages of development.
Their specifics aren't important to the story and we won't discuss every line of code.
“英雄管理局”这个例子应用继续成长。
英雄职介所这个例子应用继续成长。
它又增加了两个模块，一个用来管理雇佣的英雄，另一个用来匹配英雄与危机。
这两个模块都还处于前期开发阶段。
它们对于整个故事来说无关紧要，这里我们就不逐行讨论了。
@ -1148,23 +1187,23 @@ a#lazy-load
* The app has three feature modules: Contact, Hero, and Crisis.
* 该应用有三个特性模块：联系人（Contact）、英雄（Hero）和危机（Crisis）。
该应用有三个特性模块：联系人 (Contact) 、英雄 (Hero) 和危机 (Crisis) 。
* The Angular router helps users navigate among these modules.
* Angular路由器帮助用户在这些模块之间导航。
Angular 路由器帮助用户在这些模块之间导航。
* The `ContactComponent` is the default destination when the app starts.
* `ContactComponent`组件是应用启动时的默认页。
`ContactComponent`组件是应用启动时的默认页。
* The `ContactModule` continues to be "eagerly" loaded when the application starts.
* `ContactModule`仍然会在应用启动时被主动加载。
`ContactModule`仍然会在应用启动时被主动加载。
* `HeroModule` and the `CrisisModule` are lazy loaded.
* `HeroModule`和`CrisisModule`会被惰性加载。
`HeroModule`和`CrisisModule`会被惰性加载。
<a id="app-component-template"></a>
Let's start at the top with the new `AppComponent` template: a title, three links, and a `<router-outlet>`.
@ -1177,11 +1216,11 @@ a#lazy-load
:marked
The `<app-contact>` element is gone; we're routing to the _Contact_ page now.
`<app-contact>`元素不见了，改成了路由到*联系人*页。
`<app-contact>`元素不见了，改成了路由到_联系人_页。
The `AppModule` has changed modestly:
`AppModule`被的修改很大：
对`AppModule`进行适度的修改：
+makeExample('ngmodule/ts/app/app.module.3.ts', '', 'app/app.module.ts (v3)')
@ -1202,7 +1241,7 @@ a#lazy-load
The module does _not_ import `HeroModule` or `CrisisModule`.
They'll be fetched and mounted asynchronously when the user navigates to one of their routes.
该模块不用导入`HeroModule`或`CrisisModule`。
该模块_不_导入`HeroModule`或`CrisisModule`。
它们将在用户导航到其中的某个路由时，被异步获取并加载。
The significant change from version 2 is the addition of the ***AppRoutingModule*** to the module `imports`.
@ -1222,7 +1261,7 @@ a#lazy-load
The router is the subject of [its own page](router.html) so we'll skip lightly over the details and
concentrate on the intersection of Angular modules and routing.
路由器有[专门的章节](router.html)做了深入讲解，所以这里我们跳过细节，而是专注于它和Angular模块的协作。
路由器有[专门的章节](router.html)做深入讲解，所以这里我们跳过细节，而是专注于它和 Angular 模块的协作。
This file defines three routes.
@ -1231,7 +1270,7 @@ a#lazy-load
The first redirects the empty URL (e.g., `http://host.com/`)
to another route whose path is `contact` (e.g., `http://host.com/contact`).
第一个路由把空白URL（比如：`http://host.com/`）重定向到了另一个路径为`contact`的路由（比如：`http://host.com/contact`）。
第一个路由把空白 URL（例如`http://host.com/`）重定向到了另一个路径为`contact`的路由（例如`http://host.com/contact`）。
The `contact` route isn't defined here.
It's defined in the _Contact_ feature's _own_ routing module, `contact-routing.module.ts`.
@ -1269,11 +1308,11 @@ a#lazy-load
The returned `AppRoutingModule` class is a `Routing Module` containing both the `RouterModule` directives
and the Dependency Injection providers that produce a configured `Router`.
该方法返回的`AppRoutingModule`类是一个`Routing Module`，它同时包含了`RouterModule`指令和用来生成配置好的`Router`的依赖注入提供商。
该方法返回的`AppRoutingModule`类是一个`路由模块`，它同时包含了`RouterModule`指令和用来生成配置好的`Router`的依赖注入提供商。
This `AppRoutingModule` is intended for the app _root_ module _only_.
这个`AppRoutingModule`*仅仅*是给应用程序的*根*模块使用的。
这个`AppRoutingModule`_仅_用于应用的_根_模块。
.alert.is-critical
:marked
@ -1284,7 +1323,7 @@ a#lazy-load
Back in the root `AppModule`, we add the `AppRoutingModule` to its `imports` list,
and the app is ready to navigate.
回到根模块`AppModule`，把这个`routing`对象添加到根模块的`imports`列表中，该应用就可以正常导航了。
回到根模块`AppModule`，把这个`AppRoutingModule`添加到根模块的`imports`列表中，该应用就可以正常导航了。
+makeExample('ngmodule/ts/app/app.module.3.ts', 'imports', 'app/app.module.ts (imports)')(format='.')
@ -1296,7 +1335,7 @@ a#lazy-load
It defines the `contact` route we mentioned a bit earlier and also provides a `ContactRoutingModule` like so:
`app/contact`目录中也有一个新文件`contact-routing.module.ts`。
它定义了我们前面提到过的`contact`路由，并提供了`ContactRoutingModule`，就像这样：
它定义了我们前面提到过的`联系人`路由，并提供了`ContactRoutingModule`，就像这样：
+makeExample('ngmodule/ts/app/contact/contact-routing.module.ts', 'routing', 'app/contact/contact-routing.module.ts (routing)')(format='.')
@ -1320,7 +1359,7 @@ a#lazy-load
deliver different `import` values to root and feature modules.
Angular doesn't recognize them but Angular developers do.
当需要为根模块和特性模块分别提供不同的`import`值时，***forRoot***和***forChild***也可以作为约定俗成的方法名。
当需要为根模块和特性模块分别提供不同的`导入`值时，***forRoot***和***forChild***是约定俗成的方法名。
虽然 Angular 无法识别它们，但是 Angular 开发人员可以。
[Follow this convention](../cookbook/ngmodule-faq.html#q-for-root) if you write a similar module
@ -1342,18 +1381,18 @@ a#lazy-load
:marked
1. It imports the `ContactRoutingModule` object from `contact-routing.module.ts`
1. 它从`contact-routing.module.ts`中导入了`ContactRoutingModule`对象
它从`contact-routing.module.ts`中导入了`ContactRoutingModule`对象
1. It no longer exports `ContactComponent`
1. 它不再导出`ContactComponent`
它不再导出`ContactComponent`
Now that we navigate to `ContactComponent` with the router there's no reason to make it public.
Nor does it need a selector.
No template will ever again reference this `ContactComponent`.
It's gone from the [_AppComponent_ template](#app-component-template).
现在我们改成了通过路由器导航到`ContactComponent`，所以也就没有理由公开它了。它也不再需要选择器（selector）。
现在我们通过路由器导航到`ContactComponent`，所以也就没有理由公开它了。它也不再需要选择器 (selector)。
也没有模板会再引用`ContactComponent`。它从 [_AppComponent_ 模板](#app-component-template)中彻底消失了。
a#hero-module
@ -1365,7 +1404,7 @@ a#hero-module
The lazy loaded `HeroModule` and `CrisisModule` follow the same principles as any feature module.
They don't look different from the eagerly loaded `ContactModule`.
惰性加载的`HeroModule`和`CrisisModule`与其它特性模块遵循同样的规则。它们和“主动加载”的`ContactModule`看上去没有任何区别。
惰性加载的`HeroModule`和`CrisisModule`与其它特性模块遵循同样的规则。它们和主动加载的`ContactModule`看上去没有任何区别。
The `HeroModule` is a bit more complex than the `CrisisModule` which makes it
a more interesting and useful example. Here's its file structure:
@ -1389,7 +1428,7 @@ a#hero-module
or an editor of a selected hero (`HeroDetail`).
Both components delegate to the `HeroService` to fetch and save data.
如果你读过[路由](router.html#child-routing-component)章，那么对这个子路由的场景应该觉得很熟悉。
如果你读过[路由](router.html#child-routing-component)那章，那么对这个子路由的场景应该觉得很熟悉。
`HeroComponent`是本特性区的顶级组件和路由宿主。
模板带有`<router-outlet>`指令，它或者显示英雄列表（`HeroList`）或者显示所选英雄的编辑器（`HeroDetail`）。
这两个组件都把获取和保存数据的任务委托给`HeroService`执行。
@ -1439,18 +1478,27 @@ a#shared-module
Let's add a `SharedModule` to hold the common components, directives, and pipes
and share them with the modules that need them.
我们添加`SharedModule`来存放这些公共组件、指令和管道，并且共享给那些想用它们的模块。
我们添加`SharedModule`来存放这些公共组件、指令和管道，并且共享给那些需要它们的模块。
* create an `app/shared` folder
* 创建`app/shared`目录
创建`app/shared`目录
* move the `AwesomePipe` and `HighlightDirective` from `app/contact` to `app/shared`.
* 把`AwesomePipe`和`HighlightDirective`从`app/contact`移到`app/shared`中。
把`AwesomePipe`和`HighlightDirective`从`app/contact`移到`app/shared`中。
* delete the `HighlightDirective` classes from `app/` and `app/hero`
* 从`app/`和`app/hero`目录中删除`HighlightDirective`类
从`app/`和`app/hero`目录中删除`HighlightDirective`类
* create a `SharedModule` class to own the shared material
* 创建`SharedModule`类来管理这些共享的素材
创建`SharedModule`类来管理这些共享的素材
* update other feature modules to import `SharedModule`
* 更新启动特性模块，让它们导入`SharedModule`
更新其它特性模块，导入`SharedModule`
Most of this is familiar blocking and tackling. Here is the `SharedModule`
@ -1463,11 +1511,16 @@ a#shared-module
值得注意的有：
* It imports the `CommonModule` because its component needs common directives.
* 它导入了`CommonModule`，这是因为它的组件需要这些公共指令。
它导入了`CommonModule`，这是因为它的组件需要这些公共指令。
* It declares and exports the utility pipe, directive, and component classes as expected.
* 正如我们所期待的，它声明并导出了工具性的管道、指令和组件类。
正如我们所期待的，它声明并导出了工具性的管道、指令和组件类。
* It re-exports the `CommonModule` and `FormsModule`
* 它重新导出了`CommonModule`和`FormsModule`
它重新导出了`CommonModule`和`FormsModule`
### Re-exporting other modules
@ -1550,7 +1603,8 @@ a#core-module
.l-main-section
:marked
## The Core module
## 核心（Core）模块
## 核心 (Core) 模块
At the moment, our root folder is cluttered with the `UserService`
and the `TitleComponent` that only appears in the root `AppComponent`.
@ -1569,17 +1623,24 @@ a#core-module
**步骤：**
* create an `app/core` folder
* 创建`app/core`文件夹
创建`app/core`文件夹
* move the `UserService` and `TitleComponent` from `app/` to `app/core`
* 把`UserService`和`TitleComponent`从`app`移到`app/core`中
把`UserService`和`TitleComponent`从`app`移到`app/core`中
* create a `CoreModule` class to own the core material
* 创建`CoreModule`类来管理这些核心素材
创建`CoreModule`类来管理这些核心素材
* update the `AppRoot` module to import `CoreModule`
* 更新`AppRoot`模块，使其导入`CoreModule`模块
更新`AppRoot`模块，使其导入`CoreModule`模块
Again, most of this is familiar blocking and tackling. The interesting part is the `CoreModule`
这些都是一些熟悉的普通任务。最有趣的是`CoreModule`：
这些都是一些熟悉的普通任务。令人感兴趣的是`CoreModule`：
+makeExample('ngmodule/ts/app/core/core.module.ts', 'v4', 'app/app/core/core.module.ts')
@ -1597,19 +1658,22 @@ a#core-module
`TitleComponent` needs the Angular `NgIf` directive that we import from `CommonModule`.
我们对`@NgModule`的元数据应该很熟悉。
由于该模块*拥有*`TitleComponent`，所以我们声明了它。由于`AppComponent`（位于`AppModule`模块）在模板中显示了这个标题，所以我们导出了它。
由于该模块_拥有_`TitleComponent`，所以我们声明了它。由于`AppComponent`（位于`AppModule`模块）在模板中显示了这个标题，所以我们导出了它。
由于`TitleComponent`需要用到 Angular 的`NgIf`指令，所以我们导入了`CommonModule`。
`CoreModule` _provides_ the `UserService`. Angular registers that provider with the app root injector,
making a singleton instance of the `UserService` available to any component that needs it,
whether that component is eagerly or lazily loaded.
`CoreModule`*提供*了`UserService`。Angular在该应用的“根注入器”中注册了它的提供商，导致这份`UserService`的实例在每个需要它的组件中都是可用的，无论那个组件时主动加载的还是惰性加载的。
`CoreModule`_提供_了`UserService`。Angular 在该应用的根注入器中注册了它的提供商，
导致这份`UserService`的实例在每个需要它的组件中都是可用的，无论那个组件时主动加载的还是惰性加载的。
.l-sub-section
:marked
#### Why bother?
#### 没必要？
This scenario is clearly contrived.
The app is too small to worry about a single service file and a tiny, one-time component.
@ -1630,7 +1694,7 @@ a#core-module
Yet they're too big and messy to leave loose in the root folder.
但真实的应用要考虑很多。
它们有只用于`AppComponent`的模板中的一些一次性的组件（比如：加载动画、消息浮层和模态对话框等）。
它们有一些只用于`AppComponent`的模板的一次性的组件（例如：加载动画、消息浮层和模态对话框等）。
我们不用在其它地方导入它们，因此没必要*共享*它们。
然而如果把它们留在根目录，还是显得太大、太乱了。
@ -1645,7 +1709,9 @@ a#core-module
no other component or module should define or re-create the services themselves.
Their _providers_ are not shared.
当很多组件在它们的构造函数中注入这些服务时（因此也需要用JavaScript的`import`语句来导入它们的符号），任何组件或模块自身都不应该定义或重新创建这些服务。
当很多组件在它们的构造函数中注入这些服务时 &mdash;
因此也需要用 JavaScript 的`import`语句来导入它们的符号 &mdash;
任何组件或模块自身都不应该定义或重新创建这些服务。
因为它们的*提供商*不是共享的。
We recommend collecting such single-use classes and hiding their gory details inside a `CoreModule`.
@ -1657,6 +1723,7 @@ a#core-module
.l-main-section
:marked
## Cleanup
## 清理
Having refactored to a `CoreModule` and a `SharedModule`, it's time to cleanup the other modules.
@ -1684,15 +1751,23 @@ a#core-module
注意`AppModule`已经变得：
* a little smaller because many `app/root` classes have moved to other modules.
* 更小了。因为很多`app/root`下的类被移到了其它模块中。
更小了。因为很多`app/root`下的类被移到了其它模块。
* stable because we'll add future components and providers to other modules, not this one.
* 更稳定了。因为我们以后会在其它模块中添加组件和服务提供商，而不是这里。
更稳定了。因为我们以后会在其它模块中添加组件和服务提供商，而不是这里。
* delegating to imported modules rather than doing work.
* 导入其它模块并把任务委托给它们，而不是亲力亲为。
导入其它模块并把任务委托给它们，而不是亲力亲为。
* focused on its main task, orchestrating the app as a whole.
* 聚焦于自己的主要任务：总指挥整个应用程序。
聚焦于自己的主要任务：总指挥整个应用程序。
### A trimmer _ContactModule_
### 清理*ContactModule*
Here is the new `ContactModule` paired with the prior version:
@ -1712,11 +1787,16 @@ a#core-module
注意：
* The `AwesomePipe` and `HighlightDirective` are gone.
* `AwesomePipe`和`HighlightDirective`不见了。
`AwesomePipe`和`HighlightDirective`不见了。
* The imports include `SharedModule` instead of `CommonModule` and `FormsModule`
* 导入`SharedModule`，不再导入`CommonModule`和`FormsModule`。
导入`SharedModule`，不再导入`CommonModule`和`FormsModule`。
* This new version is leaner and cleaner.
* 这个新版本更加精简和干净了。
这个新版本更加精简和干净了。
.l-hr
@ -1729,7 +1809,7 @@ a#core-for-root
A module that adds providers to the application can offer a facility for configuring those providers as well.
那些为应用添加服务提供商的模块，也可以同时提供配置那些提供商的功能。
为应用添加服务提供商的模块也可以同时提供配置那些提供商的功能。
By convention, the **_forRoot_** static method both provides and configures services at the same time.
It takes a service configuration object and returns a
@ -1740,9 +1820,12 @@ a#core-for-root
它接收一个服务配置对象，并返回一个[ModuleWithProviders](../api/core/index/ModuleWithProviders-interface.html)。这个简单对象具有两个属性：
* `ngModule` - the `CoreModule` class
* `ngModule` - `CoreModule`类
`ngModule` - `CoreModule`类
* `providers` - the configured providers
* `providers` - 配置好的服务提供商
`providers` - 配置好的服务提供商
The root `AppModule` imports the `CoreModule` and adds the `providers` to the `AppModule` providers.
@ -1797,7 +1880,7 @@ a#core-for-root
Remember to _import_ the result; don't add it to any other `@NgModule` list.
别忘了*导入*其返回结果，而且不要把它添加到`@NgModule`的其它任何列表中。
别忘了_导入_其返回结果，而且不要把它添加到`@NgModule`的其它任何列表中。
.l-hr
@ -1851,7 +1934,7 @@ a#prevent-reimport
It's a different story if we improperly import `CoreModule` into a lazy loaded module such as `HeroModule` (try it).
如果我们错误的把`CoreModule`导入了一个惰性加载模块（比如`HeroModule`）中，那就不一样了。
如果我们错误的把`CoreModule`导入了一个惰性加载模块（例如`HeroModule`）中，那就不一样了。
Angular creates a lazy loaded module with its own injector, a _child_ of the root injector.
`@SkipSelf` causes Angular to look for a `CoreModule` in the parent injector which this time is the root injector.
@ -1877,10 +1960,12 @@ a#prevent-reimport
### Frequently Asked Questions
### 常见问题（FAQ）
### 常见问题 (FAQ)
Now that you understand Angular Modules, you may be interested
in the companion [Angular Module FAQs](../cookbook/ngmodule-faq.html "Angular Module FAQs") cookbook
with its ready answers to specific design and implementation questions.
现在，你已经理解了Angular的模块。可能你还会对烹饪宝典中的[Angular模块常见问题](../cookbook/ngmodule-faq.html "Angular模块常见问题")感兴趣，它解答了很多关于设计和实现方面的问题。
现在，你已经理解了 Angular 的模块。可能你还会对烹饪宝典中的
[Angular 模块常见问题](../cookbook/ngmodule-faq.html "Angular 模块常见问题")感兴趣，
它解答了很多关于设计和实现方面的问题。