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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -774,9 +774,11 @@ a#application-scoped-providers
:marked
Try the 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
.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 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.
@ -824,7 +826,7 @@ a#resolve-conflicts
:marked
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.
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.
* 随着一个个类被加入应用中，根模块`AppModule`变大了，并且看起来还会继续变大。
* 随着一个个类被加入应用中，根模块`AppModule`变大了，并且还会继续变大。
* 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. 特性模块可以暴露或隐藏来自其它模块的实现。
2. 特性模块可以对其他模块暴露或隐藏自己的实现。
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.
把与联系人有关的这些编程元素重构到“联系人”特性模块中很简单。
把与联系人有关的这些元素重构到“联系人”特性模块中很简单。
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. 把联系人相关的编程元素从`AppModule`移到`ContactModule`中。
1. 把联系人相关的元素从`AppModule`移到`ContactModule`中。
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`只剩下了这个类本身，不过我们还会添加一个新文件。
`AppModule`是唯一有改变的_已经存在_的类，不过我们还会添加一个新文件。
### Add the _ContactModule_
@ -1008,13 +1010,13 @@ a#feature-modules
当前模块不会继承其它模块中对组件、指令或管道的访问权。
`AppModule`中的imports与`ContatModule`的imports互不相干。
如果`ContactComponent`要绑定到`[(ngModel)]`，它所在的`ContactModule`也同样得导入`FormsModule`。
如果`ContactComponent`要绑定到`[(ngModel)]`，它所在的`ContactModule`必需导入`FormsModule`。
:marked
We also replaced `BrowserModule` by `CommonModule` for reasons explained in
[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`.
@ -1039,7 +1041,7 @@ a#feature-modules
Return to the `AppModule` and remove everything specific to the contact feature set.
返回`AppModule`，并移除所有与联系人有关的内容。
返回`AppModule`，移除所有与联系人有关的内容。
Delete the contact import statements.
Delete the contact declarations and contact providers.
@ -1072,7 +1074,7 @@ a#feature-modules
:marked
There's a lot to like in the revised `AppModule`
修改后的`AppModule`中还有很多类似的修改
修改后的`AppModule`有很令人喜欢的特征：
* It does not change as the _Contact_ domain grows.
@ -1133,11 +1135,9 @@ a#lazy-load
.l-sub-section
:marked
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>
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 plnkr="pre-shared.3" img="devguide/ngmodule/v3-plunker.png">在线例子</live-example>
试用并下载当前版本的完整代码。
:marked
@ -1167,11 +1167,11 @@ a#lazy-load
<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>`.
<a id="app-component-template"></a>
我们从这个`AppComponent`新模板的顶部看起：
一个标题、三个链接和一个`<router-outlet>`。
Let's start at the top with the new `AppComponent` template: a title, three links, and a `<router-outlet>`.
我们从这个`AppComponent`新模板的顶部看起：一个标题、三个链接和一个`<router-outlet>`。
+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:
`AppModule`被改成了这样：
`AppModule`被的修改很大：
+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.
We'll explain differences that matter in due course.
有些文件名带有`.3`扩展名，用以和以前/以后的版本区分开。
有些文件名带有`.3`扩展名，用来和以前/以后的版本区分开。
我们会在适当的时机解释它们的差异。
:marked
@ -1262,7 +1262,7 @@ a#lazy-load
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='.')
@ -1270,7 +1270,7 @@ a#lazy-load
The returned `routing` object is a `ModuleWithProviders` containing both the `RouterModule` directives
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_.
@ -1389,7 +1389,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`执行。
@ -1404,7 +1404,7 @@ a#hero-module
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='.')
@ -1419,8 +1419,6 @@ a#hero-module
`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>
a#shared-module
@ -1434,23 +1432,23 @@ a#shared-module
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.
本应用继续改进。
本应用在继续演进中。
让我们感到不爽的是：这里有`HighlightDirective`的三个不同版本。
还有一大堆其它乱七八糟的东西堆在app目录这一级，我们得把它们清出去。
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`中。
* delete the `HighlightDirective` classes from `app/` and `app/hero`
* 从`app/`和`app/hero`目录中删除`HighlightDirective`类
* create a `SharedModule` class to own the shared material
* 创建一个`SharedModule`类来管理这些共享的素材
* 创建`SharedModule`类来管理这些共享的素材
* update other feature modules to import `SharedModule`
* 更新启动特性模块，让它们导入`SharedModule`
@ -1493,7 +1491,7 @@ a#shared-module
As it happens, the components declared by `SharedModule` itself don't bind with `[(ngModel)]`.
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`.
@ -1538,7 +1536,7 @@ a#shared-module
`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
:marked
@ -1573,7 +1571,7 @@ a#core-module
* create an `app/core` folder
* 创建`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
* 创建一个`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`
又只剩下一些熟悉的普通任务了，但这次是针对`CoreModule`的：
这些都是一些熟悉的普通任务。最有趣的是`CoreModule`：
+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.
They'll become relevant later in this page.
我们正在从Angular核心库中导入一些从未用过的符号，稍后我们会接触它们。
我们正在从Angular核心库中导入一些从未用到的符号，稍后我们会接触它们。
:marked
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.
`TitleComponent` needs the Angular `NgIf` directive that we import from `CommonModule`.
我们对`@NgModule`的元数据应该很熟悉了吧。
我们对`@NgModule`的元数据应该很熟悉。
由于该模块*拥有*`TitleComponent`，所以我们声明了它。由于`AppComponent`（位于`AppModule`模块）在模板中显示了这个标题，所以我们导出了它。
由于`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.
但真实的应用要考虑很多。
它们有很多一次性的组件（比如：加载动画、消息浮层和模态对话框等），而且只用于`AppComponent`的模板中。
它们有只用于`AppComponent`的模板中的一些一次性的组件（比如：加载动画、消息浮层和模态对话框等）。
我们不用在其它地方导入它们，因此没必要*共享*它们。
然而如果把它们留在根目录，还是显得太大、太乱了。
@ -1648,7 +1646,7 @@ a#core-module
Their _providers_ are not shared.
当很多组件在它们的构造函数中注入这些服务时（因此也需要用JavaScript的`import`语句来导入它们的符号），任何组件或模块自身都不应该定义或重新创建这些服务。
它们的*提供商*不是共享的。
因为它们的*提供商*不是共享的。
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.