From 35a1cce5dcd8ccee94d9c77cf22149359f137f0f Mon Sep 17 00:00:00 2001 From: "Zhimin YE (Rex)" Date: Thu, 15 Sep 2016 16:56:39 +0100 Subject: [PATCH] review: ngmodule.jade to line 700 --- public/docs/ts/latest/guide/ngmodule.jade | 68 +++++++++++------------ 1 file changed, 31 insertions(+), 37 deletions(-) diff --git a/public/docs/ts/latest/guide/ngmodule.jade b/public/docs/ts/latest/guide/ngmodule.jade index 5e4418ba7d..1c4911a182 100644 --- a/public/docs/ts/latest/guide/ngmodule.jade +++ b/public/docs/ts/latest/guide/ngmodule.jade @@ -16,17 +16,17 @@ block includes It may add service providers to the application dependency injectors. And there are more options covered here. - Angular模块就是一个带有**@NgModule**装饰器函数的_类_。 + Angular模块是一个带有**@NgModule**装饰器函数的_类_。 `@NgModule`接收一个元数据对象，该对象告诉Angular如何编译和运行模块代码。 它标记出该模块_拥有_的组件、指令和管道， - 把它们公开出去，以便外部组件使用它们。 + 并把它们的一部分公开出去，以便外部组件使用它们。 它可以向应用的依赖注入器中添加服务提供商。 - 本页还会涉及到更多选项。 + 本章还会涉及到更多选项。 This page explains how to **create** `NgModule` classes and how to load them, either immediately when the application launches or later, as needed, via the [Router](router.html). - 本页面将会讲解如何**创建**`NgModule`类，以及如何加载它们 —— 无论是在程序启动时立即加载，还是稍后由[路由器](router.html)按需加载。 + 本章将会讲解如何**创建**`NgModule`类，以及如何加载它们 —— 可以在程序启动时立即加载，也可以稍后由[路由器](router.html)按需加载。 ## Table of Contents @@ -61,14 +61,11 @@ block includes * [NgModule metadata properties](#ngmodule-properties "A technical summary of the @NgModule metadata properties") * [NgModule元数据的属性](#ngmodule-properties "对@NgModule元数据属性的技术性总结") - ### Live examples ### 在线例子 - This page explains Angular Modules through a progression of improvements to a sample with a "Tour of Heroes" theme. - Here's an index to live examples at key moments in the evolution of that sample: + This page explains Angular Modules through a progression of improvements to a sample with a "Tour of Heroes" theme. Here's an index to live examples at key moments in the evolution of that sample: - 此页面通过一个基于《英雄指南》的渐进式例子解释了Angular的模块。 - 这里是例子演化过程中一些关键节点的在线例子。 + 此页面通过一个基于《英雄指南》的渐进式例子解释了Angular的模块。这里是例子演化过程中一些关键节点的在线例子。 * A minimal NgModule app * 最小化的NgModule应用 @@ -93,8 +90,8 @@ block includes offers ready answers to specific design and implementation questions. Read this page first before hopping over to those FAQs. - 烹饪宝典中的[Angular模块常见问题](../cookbook/ngmodule-faq.html "Angular模块常见问题")为一些与设计与实现有关的问题提供了答案。 - 不过在阅读FAQ之前，要先阅读此页面。 + 烹饪宝典中的[Angular模块常见问题](../cookbook/ngmodule-faq.html "Angular模块常见问题")为一些与设计和实现有关的问题提供了答案。 + 不过在阅读常见问题之前，要先阅读此页面。 .l-hr @@ -124,7 +121,7 @@ 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. @@ -151,7 +148,7 @@ a#angular-modularity * 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. @@ -168,12 +165,12 @@ 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_. - 稍后我们就会看到怎么做。不过我们还是先从_根模块_开始吧！ + 稍后我们就会看到怎么做。不过还是先从_根模块_开始吧！ a#root_module .l-main-section @@ -190,7 +187,7 @@ a#root_module This `AppModule` is about as minimal as it gets: - 这个最小化的`AppModule`是这样的： + 最小化的`AppModule`是这样的： +makeExample('ngmodule/ts/app/app.module.0.ts', '', 'app/app.module.ts (minimal)')(format=".") @@ -219,7 +216,7 @@ a#root_module The example `AppComponent` simply displays a data-bound title: - 这个范例`AppComponent`只会显示出一个被绑定的标题： + 下面范例`AppComponent`显示被绑定的标题： +makeExample('ngmodule/ts/app/app.component.0.ts', '', 'app/app.component.ts (minimal)')(format=".") :marked @@ -245,7 +242,7 @@ a#bootstrap In this page we consider two options, both targeting the browser. 针对不同的平台，Angular提供了很多引导选项。 - 本页面我们只讲两个选项，都是针对浏览器平台的。 + 本章我们只讲两个选项，都是针对浏览器平台的。 ### Dynamic bootstrapping with the Just-in-time (JiT) compiler @@ -263,9 +260,7 @@ a#bootstrap 这里的例子演示进行动态引导的方法。 - Try the live example. - - 试试在线例子。 + Try the live example. ### Static bootstrapping with the Ahead-of-time (AoT) compiler @@ -298,7 +293,7 @@ a#bootstrap The application code downloaded to the browser is much smaller than the dynamic equivalent and it is ready to execute immediately. The performance boost can be significant. - 下载到浏览器中的应用代码比动态版本要小得多，并且能立即执行。引导的性能能得到显著提升。 + 下载到浏览器中的应用代码比动态版本要小得多，并且能立即执行。引导的性能可以得到显著提升。 Both the JiT and AoT compilers generate an `AppModuleNgFactory` class from the same `AppModule` source code. @@ -312,7 +307,7 @@ a#bootstrap In general, the `AppModule` should neither know nor care how it is bootstrapped. - 通常，`AppModule`不必关心它将被如何引导。 + 通常，`AppModule`不必关心它是如何被引导的。 Although the `AppModule` evolves as the app grows, the bootstrap code in `main.ts` doesn't change. This is the last time we'll look at `main.ts`. @@ -348,7 +343,7 @@ a#declarations If we ran the app now, Angular would not recognize the `highlight` attribute and would ignore it. We must declare the directive in `AppModule`. - 如果我们现在就运行该应用，Angular将无法识别`highlight`属性，而是会忽略它。 + 如果我们现在就运行该应用，Angular将无法识别`highlight`属性，并且忽略它。 我们必须在`AppModule`中声明该指令。 Import the `HighlightDirective` class and add it to the module's `declarations` like this: @@ -365,7 +360,7 @@ a#declarations We decide to refactor the title into its own `TitleComponent`. The component's template binds to the component's `title` and `subtitle` properties like this: - 我们打算把标题重构进独立的`TitleComponent`中去。 + 我们决定将标题重构到独立的`TitleComponent`中。 该组件的模板绑定到了组件的`title`和`subtitle`属性中，就像这样： +makeExample('ngmodule/ts/app/title.component.html', 'v1', 'app/title.component.html')(format=".") @@ -439,7 +434,7 @@ a#providers We've _defined_ and _used_ the service. Now we _provide_ it for all components to use by adding it to a `providers` property in the `AppModule` metadata: - 我们已经_定义_并_使用了_该服务。现在，我们通过把它加入`AppModule`元数据中的`providers`属性来把它_提供_给所有组件使用。 + 我们已经_定义_并_使用了_该服务。现在，我们通过把它加入`AppModule`元数据的`providers`属性中，来把它_提供_给所有组件使用。 +makeExample('ngmodule/ts/app/app.module.1.ts', 'providers', 'app/app.module.ts (providers)')(format=".") @@ -470,7 +465,7 @@ a#imports Angular _does_ recognize `NgIf` because we imported it earlier. The initial version of `AppModule` imports `BrowserModule`. - Angular能识别`NfIf`指令，是因为我们以前导入过它。最初版本的`AppModule`就导入了`BrowserModule`。 + Angular能识别`NgIf`指令，是因为我们以前导入过它。最初版本的`AppModule`就导入了`BrowserModule`。 +makeExample('ngmodule/ts/app/app.module.0.ts', 'imports', 'app/app.module.ts (imports)')(format=".") @@ -532,23 +527,23 @@ a#imports [_template-driven form_](forms.html) style or the [_reactive form_](../cookbook/dynamic-form.html) style. - 我们写Angular表单组件时，或者使用[_模板驱动式表单_](forms.html)， - 或者使用[_响应式表单_](../cookbook/dynamic-form.html)。 + 我们写Angular表单组件时，可以使用[_模板驱动式表单_](forms.html)， + 也可以使用[_响应式表单_](../cookbook/dynamic-form.html)。 This sample is about to import the `FormsModule` from `@angular/forms` because the `ContactComponent` is written in the _template-driven_ style. Modules with components written in the _reactive_ style, should import the `ReactiveFormsModule` instead. - 该例子中从`@angular/forms`中导入了`FormsModule`，这是因为`ContactComponent`组件用的是_模板驱动式_的。 - 那些带有_响应式表单_组件的模块，就应该转而导入`ReactiveFormsModule`了。 + 该例子中从`@angular/forms`中导入了`FormsModule`，这是因为`ContactComponent`组件用的是_模板驱动式表单_。 + 那些带有_响应式表单_组件的模块，应该转而导入`ReactiveFormsModule`。 :marked The `ContactComponent` selector matches an element named ``. Add an element with that name to the `AppComponent` template just below the ``: `ContactComponent`的选择器会去匹配名叫``的元素。 - 请在`AppComponent`模板中``的下方添加一个具有此名字的元素： + 在`AppComponent`模板中``的下方添加一个具有此名字的元素： +makeExample('ngmodule/ts/app/app.component.1b.ts', 'template', 'app/app.component.ts (template)')(format=".") @@ -559,8 +554,7 @@ a#imports and an alternative version of the `HighlightDirective`. `ContactComponent`还有很多事要做。 - 表单组件通常都是很复杂的，而这一个则具有自己的它自己的`ContactService`、 - 它自己的[自定义管道](#pipes.html#custom-pipes) `Awesome`， + 表单组件通常都是很复杂的。本组件具有它自己的`ContactService`和[自定义管道](#pipes.html#custom-pipes) `Awesome`， 以及`HighlightDirective`的另一个版本。 To make it manageable, we place all contact-related material in an `app/contact` folder @@ -605,7 +599,7 @@ a#imports form features such as validation are not yet available. 退一步说，即使Angular有办法识别`ngModel`，`ContactComponent`也不会表现的像一个Angular表单， - 因为这里没法使用Form相关的特性，比如有效性验证。 + 因为本组件表单的表单相关的特性（比如有效性验证）还不可用。 ### Import the FormsModule @@ -633,7 +627,7 @@ a#imports Components, directives and pipes belong to one module — and _one module only_. 这些指令属于`FormsModule`。 - 组件、指令和管道应该而且只能属于一个模块。 + 组件、指令和管道_只能_属于一个模块。 **Never re-declare classes that belong to another module.** @@ -686,7 +680,7 @@ a#import-name-conflict But then it would be scoped to this component _only_. We want to share this service with other contact-related components that we will surely add later. - 我们得在某个地方提供该服务。 + 我们必须在某个地方提供该服务。 在`ContactComponent`中_可以_提供它。 但是那样一来，它的作用范围就会_仅_局限于该组件及其子组件。 而我们希望让该服务与其它和联系人有关的组件中共享，稍后我们就会添加那些组件。