review: ngmodule(line 1672)

This commit is contained in:
Zhimin YE (Rex) 2016-09-16 17:01:51 +01:00
parent 0db676a23c
commit 79ca5433f5
1 changed files with 39 additions and 41 deletions

View File

@ -774,9 +774,11 @@ a#application-scoped-providers
:marked :marked
Try the example: Try the example:
试试这个例子:
<live-example embedded plnkr="contact.1b" img="devguide/ngmodule/contact-1b-plunker.png"></live-example> <live-example embedded plnkr="contact.1b" img="devguide/ngmodule/contact-1b-plunker.png"></live-example>
<live-example plnkr="contact.1b">试试这个在线例子</live-example>
a#resolve-conflicts a#resolve-conflicts
.l-main-section .l-main-section
@ -788,7 +790,7 @@ a#resolve-conflicts
We ran into trouble [above](#import-name-conflict) when we declared the contact's `HighlightDirective` because We ran into trouble [above](#import-name-conflict) when we declared the contact's `HighlightDirective` because
we already had a `HighlightDirective` class at the application level. we already had a `HighlightDirective` class at the application level.
[以前](#import-name-conflict)我们声明联系人的`HighlightDirective`指令时遇到了问题,因为在应用程序一级已经有了一个`HighlightDirective`类。 [以前](#import-name-conflict)我们声明联系人的`HighlightDirective`指令时遇到了问题,因为在应用程序一级已经有了一个`HighlightDirective`类。
That both directives have the same name smells of trouble. That both directives have the same name smells of trouble.
@ -824,7 +826,7 @@ a#resolve-conflicts
:marked :marked
The real problem is that there are _two different classes_ trying to do the same thing. The real problem is that there are _two different classes_ trying to do the same thing.
真正的问题在于有_两个不同的类_图做同一件事。 真正的问题在于有_两个不同的类_图做同一件事。
It's OK to import the _same_ directive class multiple times. It's OK to import the _same_ directive class multiple times.
Angular removes duplicate classes and only registers one of them. Angular removes duplicate classes and only registers one of them.
@ -871,7 +873,7 @@ a#feature-modules
* The root `AppModule` grows larger with each new application class and shows no signs of stopping. * The root `AppModule` grows larger with each new application class and shows no signs of stopping.
* 随着一个个类被加入应用中,根模块`AppModule`变大了,并且看起来还会继续变大。 * 随着一个个类被加入应用中,根模块`AppModule`变大了,并且还会继续变大。
* We have conflicting directives. * We have conflicting directives.
@ -922,7 +924,7 @@ a#feature-modules
2. A feature module can expose or hide its implementation from other modules. 2. A feature module can expose or hide its implementation from other modules.
2. 特性模块可以暴露或隐藏来自其它模块的实现。 2. 特性模块可以对其他模块暴露或隐藏自己的实现。
Otherwise, a feature module is distinguished primarily by its intent. Otherwise, a feature module is distinguished primarily by its intent.
@ -958,7 +960,7 @@ a#feature-modules
It's easy to refactor the contact material into a contact feature module. It's easy to refactor the contact material into a contact feature module.
把与联系人有关的这些编程元素重构到“联系人”特性模块中很简单。 把与联系人有关的这些元素重构到“联系人”特性模块中很简单。
1. Create the `ContactModule` in the `app/contact` folder. 1. Create the `ContactModule` in the `app/contact` folder.
@ -966,7 +968,7 @@ a#feature-modules
1. Move the contact material from `AppModule` to `ContactModule`. 1. Move the contact material from `AppModule` to `ContactModule`.
1. 把联系人相关的编程元素从`AppModule`移到`ContactModule`中。 1. 把联系人相关的元素从`AppModule`移到`ContactModule`中。
1. Replace the imported `BrowserModule` with `CommonModule`. 1. Replace the imported `BrowserModule` with `CommonModule`.
@ -978,7 +980,7 @@ a#feature-modules
`AppModule` is the only _existing_ class that changes. But we do add one new file. `AppModule` is the only _existing_ class that changes. But we do add one new file.
改完之后`AppModule`只剩下了这个类本身,不过我们还会添加一个新文件。 `AppModule`是唯一有改变的_已经存在_的类,不过我们还会添加一个新文件。
### Add the _ContactModule_ ### Add the _ContactModule_
@ -1008,13 +1010,13 @@ a#feature-modules
当前模块不会继承其它模块中对组件、指令或管道的访问权。 当前模块不会继承其它模块中对组件、指令或管道的访问权。
`AppModule`中的imports与`ContatModule`的imports互不相干。 `AppModule`中的imports与`ContatModule`的imports互不相干。
如果`ContactComponent`要绑定到`[(ngModel)]`,它所在的`ContactModule`也同样得导入`FormsModule`。 如果`ContactComponent`要绑定到`[(ngModel)]`,它所在的`ContactModule`必需导入`FormsModule`。
:marked :marked
We also replaced `BrowserModule` by `CommonModule` for reasons explained in We also replaced `BrowserModule` by `CommonModule` for reasons explained in
[an FAQ](../cookbook/ngmodule-faq.html#q-browser-vs-common-module). [an FAQ](../cookbook/ngmodule-faq.html#q-browser-vs-common-module).
我们还用`CommonModule`替换了`BrowserModule`,其中缘由参见[这条FAQ](../cookbook/ngmodule-faq.html#q-browser-vs-common-module)。 我们还用`CommonModule`替换了`BrowserModule`,其中缘由参见[这条常见问题](../cookbook/ngmodule-faq.html#q-browser-vs-common-module)。
We _declare_ the contact component, directive, and pipe in the module `declarations`. We _declare_ the contact component, directive, and pipe in the module `declarations`.
@ -1039,7 +1041,7 @@ a#feature-modules
Return to the `AppModule` and remove everything specific to the contact feature set. Return to the `AppModule` and remove everything specific to the contact feature set.
返回`AppModule`移除所有与联系人有关的内容。 返回`AppModule`,移除所有与联系人有关的内容。
Delete the contact import statements. Delete the contact import statements.
Delete the contact declarations and contact providers. Delete the contact declarations and contact providers.
@ -1072,7 +1074,7 @@ a#feature-modules
:marked :marked
There's a lot to like in the revised `AppModule` There's a lot to like in the revised `AppModule`
修改后的`AppModule`中还有很多类似的修改 修改后的`AppModule`有很令人喜欢的特征:
* It does not change as the _Contact_ domain grows. * It does not change as the _Contact_ domain grows.
@ -1133,11 +1135,9 @@ a#lazy-load
.l-sub-section .l-sub-section
:marked :marked
Examine and download the complete source for this version from the Examine and download the complete source for this version from the <live-example plnkr="pre-shared.3" img="devguide/ngmodule/v3-plunker.png">live example.</live-example>
<live-example plnkr="pre-shared.3" img="devguide/ngmodule/v3-plunker.png">live example.</live-example>
到<live-example plnkr="pre-shared.3" img="devguide/ngmodule/v3-plunker.png">在线例子</live-example>
<live-example plnkr="pre-shared.3" img="devguide/ngmodule/v3-plunker.png">在线例子</live-example>
试用并下载当前版本的完整代码。 试用并下载当前版本的完整代码。
:marked :marked
@ -1167,11 +1167,11 @@ a#lazy-load
<a id="app-component-template"></a> <a id="app-component-template"></a>
Let's start at the top with the new `AppComponent` template: <a id="app-component-template"></a>
a title, three links, and a `<router-outlet>`.
我们从这个`AppComponent`新模板的顶部看起: Let's start at the top with the new `AppComponent` template: a title, three links, and a `<router-outlet>`.
一个标题、三个链接和一个`<router-outlet>`。
我们从这个`AppComponent`新模板的顶部看起:一个标题、三个链接和一个`<router-outlet>`。
+makeExample('ngmodule/ts/app/app.component.3.ts', 'template', 'app/app.component.ts (v3 - Template)')(format='.') +makeExample('ngmodule/ts/app/app.component.3.ts', 'template', 'app/app.component.ts (v3 - Template)')(format='.')
@ -1182,7 +1182,7 @@ a#lazy-load
The `AppModule` has changed modestly: The `AppModule` has changed modestly:
`AppModule`被改成了这样 `AppModule`被的修改很大
+makeExample('ngmodule/ts/app/app.module.3.ts', '', 'app/app.module.ts (v3)') +makeExample('ngmodule/ts/app/app.module.3.ts', '', 'app/app.module.ts (v3)')
@ -1192,7 +1192,7 @@ a#lazy-load
a difference with prior or future versions. a difference with prior or future versions.
We'll explain differences that matter in due course. We'll explain differences that matter in due course.
有些文件名带有`.3`扩展名,用和以前/以后的版本区分开。 有些文件名带有`.3`扩展名,用和以前/以后的版本区分开。
我们会在适当的时机解释它们的差异。 我们会在适当的时机解释它们的差异。
:marked :marked
@ -1262,7 +1262,7 @@ a#lazy-load
The last line calls the `forRoot` static class method of the `RouterModule`, passing in the configuration. The last line calls the `forRoot` static class method of the `RouterModule`, passing in the configuration.
最后一行调用了`RouterModule`类的静态方法`forRoot`,并把配置信息传给它。 最后一行调用了`RouterModule`类的静态方法`forRoot`,并把路由配置信息传给它。
+makeExample('ngmodule/ts/app/app.routing.ts', 'forRoot')(format='.') +makeExample('ngmodule/ts/app/app.routing.ts', 'forRoot')(format='.')
@ -1270,7 +1270,7 @@ a#lazy-load
The returned `routing` object is a `ModuleWithProviders` containing both the `RouterModule` directives The returned `routing` object is a `ModuleWithProviders` containing both the `RouterModule` directives
and the Dependency Injection providers that produce a configured `Router`. and the Dependency Injection providers that produce a configured `Router`.
该方法返回的`routing`是一个`ModuleWithProviders`对象,它包含了一些`RouterModule`的指令和一些服务提供商,它们用于生成配置好的`Router`实例 该方法返回的`routing`是一个`ModuleWithProviders`对象,它包含了一些`RouterModule`的指令和用来生成配置好的`Router`的依赖注入提供商
This `routing` object is intended for the app _root_ module _only_. This `routing` object is intended for the app _root_ module _only_.
@ -1389,7 +1389,7 @@ a#hero-module
or an editor of a selected hero (`HeroDetail`). or an editor of a selected hero (`HeroDetail`).
Both components delegate to the `HeroService` to fetch and save data. Both components delegate to the `HeroService` to fetch and save data.
如果你读过[路由](router.html#child-routing-component),那么对这个子路由的场景应该觉得很熟悉。 如果你读过[路由](router.html#child-routing-component),那么对这个子路由的场景应该觉得很熟悉。
`HeroComponent`是本特性区的顶级组件和路由宿主。 `HeroComponent`是本特性区的顶级组件和路由宿主。
模板带有一个`<router-outlet>`指令,它或者显示英雄列表(`HeroList`)或者显示所选英雄的编辑器(`HeroDetail`)。 模板带有一个`<router-outlet>`指令,它或者显示英雄列表(`HeroList`)或者显示所选英雄的编辑器(`HeroDetail`)。
这两个组件都把获取和保存数据的任务委托给`HeroService`执行。 这两个组件都把获取和保存数据的任务委托给`HeroService`执行。
@ -1404,7 +1404,7 @@ a#hero-module
The `HeroModule` is a feature module like any other. The `HeroModule` is a feature module like any other.
`HeroModule`是一个特性模块,与其它的没什么不同。 `HeroModule`是一个特性模块,与其它的没什么不同。
+makeExample('ngmodule/ts/app/hero/hero.module.3.ts', 'class', 'app/hero/hero.module.ts (class)')(format='.') +makeExample('ngmodule/ts/app/hero/hero.module.3.ts', 'class', 'app/hero/hero.module.ts (class)')(format='.')
@ -1419,8 +1419,6 @@ a#hero-module
`CrisisModule`和本模块非常像,我们不再赘述。 `CrisisModule`和本模块非常像,我们不再赘述。
<live-example embedded plnkr="pre-shared.3" img="devguide/ngmodule/v3-plunker.png">Try the live example.</live-example>
<live-example embedded plnkr="pre-shared.3" img="devguide/ngmodule/v3-plunker.png">试试在线例子。</live-example> <live-example embedded plnkr="pre-shared.3" img="devguide/ngmodule/v3-plunker.png">试试在线例子。</live-example>
a#shared-module a#shared-module
@ -1434,23 +1432,23 @@ a#shared-module
One thing we don't like is carrying three different versions of the `HighlightDirective`. One thing we don't like is carrying three different versions of the `HighlightDirective`.
And there's a bunch of other stuff cluttering the app folder level that could be tucked away. And there's a bunch of other stuff cluttering the app folder level that could be tucked away.
本应用继续改进 本应用在继续演进中
让我们感到不爽的是:这里有`HighlightDirective`的三个不同版本。 让我们感到不爽的是:这里有`HighlightDirective`的三个不同版本。
还有一大堆其它乱七八糟的东西堆在app目录这一级我们得把它们清出去。 还有一大堆其它乱七八糟的东西堆在app目录这一级我们得把它们清出去。
Let's add a `SharedModule` to hold the common components, directives, and pipes Let's add a `SharedModule` to hold the common components, directives, and pipes
and share them with the modules that need them. and share them with the modules that need them.
我们添加一个`SharedModule`来存放这些公共组件、指令和管道,并且共享给那些想用它们的模块。 我们添加`SharedModule`来存放这些公共组件、指令和管道,并且共享给那些想用它们的模块。
* create an `app/shared` folder * create an `app/shared` folder
* 创建一个`app/shared`目录 * 创建`app/shared`目录
* move the `AwesomePipe` and `HighlightDirective` from `app/contact` to `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` * 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 * create a `SharedModule` class to own the shared material
* 创建一个`SharedModule`类来管理这些共享的素材 * 创建`SharedModule`类来管理这些共享的素材
* update other feature modules to import `SharedModule` * update other feature modules to import `SharedModule`
* 更新启动特性模块,让它们导入`SharedModule` * 更新启动特性模块,让它们导入`SharedModule`
@ -1493,7 +1491,7 @@ a#shared-module
As it happens, the components declared by `SharedModule` itself don't bind with `[(ngModel)]`. As it happens, the components declared by `SharedModule` itself don't bind with `[(ngModel)]`.
Technically, there is no need for `SharedModule` to import `FormsModule`. Technically, there is no need for `SharedModule` to import `FormsModule`.
如果`SharedModule`本身所声明的组件没绑定过`[(ngModel)]`,那么,从技术角度看`SharedModule`并不需要导入`FormsModule`。 实际上,`SharedModule`本身所声明的组件没绑定过`[(ngModel)]`,那么,从技术角度看`SharedModule`并不需要导入`FormsModule`。
`SharedModule` can still export `FormsModule` without listing it among its `imports`. `SharedModule` can still export `FormsModule` without listing it among its `imports`.
@ -1538,7 +1536,7 @@ a#shared-module
`UserService`是一个全应用级单例。 `UserService`是一个全应用级单例。
我们不希望每个模块都各自有它的一个实例。 我们不希望每个模块都各自有它的一个实例。
而如果由`SharedModule`提供`UserService`,就会导致[一个真正的危险](../cookbook/ngmodule-faq.html#q-why-it-is-bad)。 而如果由`SharedModule`提供`UserService`,就会导致[一个铁板钉钉的危险](../cookbook/ngmodule-faq.html#q-why-it-is-bad)。
.alert.is-critical .alert.is-critical
:marked :marked
@ -1573,7 +1571,7 @@ a#core-module
* create an `app/core` folder * create an `app/core` folder
* 创建`app/core`文件夹 * 创建`app/core`文件夹
* move the `UserService` and `TitleComponent` from `app/` to `app/core` * move the `UserService` and `TitleComponent` from `app/` to `app/core`
* 把`UserService`和`TitleComponent`从`app`移到`app`中 * 把`UserService`和`TitleComponent`从`app`移到`app/core`中
* create a `CoreModule` class to own the core material * create a `CoreModule` class to own the core material
* 创建一个`CoreModule`类来管理这些核心素材 * 创建一个`CoreModule`类来管理这些核心素材
* update the `AppRoot` module to import `CoreModule` * update the `AppRoot` module to import `CoreModule`
@ -1581,7 +1579,7 @@ a#core-module
Again, most of this is familiar blocking and tackling. The interesting part is the `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') +makeExample('ngmodule/ts/app/core/core.module.ts', 'v4', 'app/app/core/core.module.ts')
@ -1590,7 +1588,7 @@ a#core-module
We're importing some extra symbols from the Angular core library that we're not using yet. We're importing some extra symbols from the Angular core library that we're not using yet.
They'll become relevant later in this page. They'll become relevant later in this page.
我们正在从Angular核心库中导入一些从未用的符号,稍后我们会接触它们。 我们正在从Angular核心库中导入一些从未用的符号,稍后我们会接触它们。
:marked :marked
The `@NgModule` metadata should be familiar. The `@NgModule` metadata should be familiar.
@ -1598,7 +1596,7 @@ a#core-module
because `AppComponent` (which is in `AppModule`) displays the title in its template. because `AppComponent` (which is in `AppModule`) displays the title in its template.
`TitleComponent` needs the Angular `NgIf` directive that we import from `CommonModule`. `TitleComponent` needs the Angular `NgIf` directive that we import from `CommonModule`.
我们对`@NgModule`的元数据应该很熟悉了吧 我们对`@NgModule`的元数据应该很熟悉。
由于该模块*拥有*`TitleComponent`,所以我们声明了它。由于`AppComponent`(位于`AppModule`模块)在模板中显示了这个标题,所以我们导出了它。 由于该模块*拥有*`TitleComponent`,所以我们声明了它。由于`AppComponent`(位于`AppModule`模块)在模板中显示了这个标题,所以我们导出了它。
由于`TitleComponent`需要用到Angular的`NgIf`指令,所以我们导入了`CommonModule`。 由于`TitleComponent`需要用到Angular的`NgIf`指令,所以我们导入了`CommonModule`。
@ -1632,7 +1630,7 @@ a#core-module
Yet they're too big and messy to leave loose in the root folder. Yet they're too big and messy to leave loose in the root folder.
但真实的应用要考虑很多。 但真实的应用要考虑很多。
它们有很多一次性的组件(比如:加载动画、消息浮层和模态对话框等),而且只用于`AppComponent`的模板中 它们有只用于`AppComponent`的模板中的一些一次性的组件(比如:加载动画、消息浮层和模态对话框等)。
我们不用在其它地方导入它们,因此没必要*共享*它们。 我们不用在其它地方导入它们,因此没必要*共享*它们。
然而如果把它们留在根目录,还是显得太大、太乱了。 然而如果把它们留在根目录,还是显得太大、太乱了。
@ -1648,7 +1646,7 @@ a#core-module
Their _providers_ are not shared. Their _providers_ are not shared.
当很多组件在它们的构造函数中注入这些服务时因此也需要用JavaScript的`import`语句来导入它们的符号),任何组件或模块自身都不应该定义或重新创建这些服务。 当很多组件在它们的构造函数中注入这些服务时因此也需要用JavaScript的`import`语句来导入它们的符号),任何组件或模块自身都不应该定义或重新创建这些服务。
它们的*提供商*不是共享的。 因为它们的*提供商*不是共享的。
We recommend collecting such single-use classes and hiding their gory details inside a `CoreModule`. We recommend collecting such single-use classes and hiding their gory details inside a `CoreModule`.
A simplified root `AppModule` imports `CoreModule` in its capacity as orchestrator of the application as a whole. A simplified root `AppModule` imports `CoreModule` in its capacity as orchestrator of the application as a whole.