diff --git a/public/docs/ts/latest/guide/architecture.jade b/public/docs/ts/latest/guide/architecture.jade index 2dea4e1a2c..0c9fd2cf23 100644 --- a/public/docs/ts/latest/guide/architecture.jade +++ b/public/docs/ts/latest/guide/architecture.jade @@ -7,13 +7,13 @@ block includes Angular is a framework for building client applications in HTML and either JavaScript or a language (like Dart or TypeScript) that compiles to JavaScript. - Angular 2是一个用HTML和JavaScript或者一个可以编译成JavaScript的语言（比如Dart或者TypeScript），来构建客户端应用的框架。 + Angular是一个用HTML和JavaScript或者一个可以编译成JavaScript的语言（例如Dart或者TypeScript），来构建客户端应用的框架。 block angular-parts :marked The framework consists of several libraries, some of them core and some optional. - 该框架包括一系列库文件，有些是核心库，有些是可选库。 + 该框架包括一系列库，有些是核心库，有些是可选库。 :marked You write Angular applications by composing HTML *templates* with Angularized markup, @@ -22,7 +22,7 @@ block angular-parts 我们是这样写Angular应用的：用带Angular扩展语法的HTML写*模板*， 用*组件*类管理这些模板，用*服务*添加应用逻辑， - 并在*模块*中打包发布组件与服务。 + 用*模块*打包发布组件与服务。 Then you launch the app by *bootstrapping* the _root module_. Angular takes over, presenting your application content in a browser and @@ -114,11 +114,11 @@ figure _feature modules_, each a cohesive block of code dedicated to an application domain, a workflow, or a closely related set of capabilities. - _根模块_在一些小型应用中可能是唯一的模块，不过大多数应用可能会有很多_特性模块_，它们由一组领域类、工作流、或紧密相关的功能聚合而成。 + _根模块_在一些小型应用中可能是唯一的模块，不过大多数应用会有很多_特性模块_，每个模块都是一个内聚的代码块专注于某个应用领域、工作流或紧密相关的功能。 An Angular module, whether a _root_ or _feature_, is a class with an `@NgModule` decorator. - Angular模块（无论是_根_模块还是_特性模块_）都是一个带有`@NgModule`装饰器的类。 + Angular模块（无论是_根模块_还是_特性模块_）都是一个带有`@NgModule`装饰器的类。 .l-sub-section :marked @@ -129,7 +129,7 @@ figure Learn more about decorators on the web. 装饰器是用来修饰JavaScript类的函数。 - Angular有很多装饰器，它们负责把元数据附加到类上，以了解那些类的设计意图以及如何使用它们。 + Angular有很多装饰器，它们负责把元数据附加到类上，以了解那些类的设计意图以及它们应如何工作。 点此学习更多知识。 :marked @@ -146,21 +146,21 @@ figure * `exports` - the subset of declarations that should be visible and usable in the component [templates](#templates) of other modules. - * `exports` - 声明（declaration）的子集，它可用于其它模块中的组件[模板](#templates)。 + * `exports` - 声明（declarations）的子集，可用于其它模块的组件[模板](#templates)。 * `imports` - other modules whose exported classes are needed by component templates declared in _this_ module. - * `imports` - _本_模块组件模板中需要由其它模块导出的类。 + * `imports` - _本_模块声明的组件模板需的类所在的其它模块。 * `providers` - creators of [services](#services) that this module contributes to the global collection of services; they become accessible in all parts of the app. - * `providers` - [服务](#services)的创建者。本模块把它们加入全局的服务表中，让它们在应用中的任何部分都可被访问到。 + * `providers` - [服务](#services)的创建者，并加入到全局服务表中，可用于应用任何部分。 * `bootstrap` - the main application view, called the _root component_, that hosts all other app views. Only the _root module_ should set this `bootstrap` property. - * `bootstrap` - 标识出应用的主视图（被称为_根组件_），它是所有其它视图的宿主。只有_根模块_才能设置`bootstrap`属性。 + * `bootstrap` - 指定应用的主视图（称为_根组件_），它是所有其它视图的宿主。只有_根模块_才能设置`bootstrap`属性。 Here's a simple root module: @@ -172,7 +172,7 @@ figure :marked The `export` of `AppComponent` is just to show how to export; it isn't actually necessary in this example. A root module has no reason to _export_ anything because other components don't need to _import_ the root module. - `AppComponent`的`export`语句只是用于演示“如何导出”的，它在这个例子中并无必要。 + `AppComponent`的`export`语句只是用于演示如何导出的，它在这个例子中并不是必须的。 根模块不需要_导出_任何东西，因为其它组件不需要导入根模块。 :marked @@ -180,7 +180,7 @@ figure During development you're likely to bootstrap the `AppModule` in a `main.ts` file like this one. 我们通过_引导_根模块来启动应用。 - 在开发期间，我们通常在一个`main.ts`文件中来引导`AppModule`，就像这样： + 在开发期间，你通常在一个`main.ts`文件中来引导`AppModule`，就像这样： +makeExample('app/main.ts', '', 'app/main.ts')(format='.') @@ -196,16 +196,16 @@ figure JavaScript also has its own module system for managing collections of JavaScript objects. It's completely different and unrelated to the Angular module system. - JavaScript还有自己的模块系统，它用来管理一组JavaScript对象。 - 它和Angular的模块体系是完全不同而且完全无关的。 + JavaScript有自己的模块系统，用来管理一组JavaScript对象。 + 它与Angular的模块体系完全不同且完全无关。 In JavaScript each _file_ is a module and all objects defined in the file belong to that module. The module declares some objects to be public by marking them with the `export` key word. Other JavaScript modules use *import statements* to access public objects from other modules. - 在JavaScript中，每个_文件_就是一个模块，并且该文件中定义的所有对象都从属于那个模块。 - 通过`export`关键字，模块可以把它的某些对象声明为公开的。 - 别的JavaScript模块中可以使用*import语句*来访问这些公开对象。 + JavaScript中，每个_文件_是一个模块，文件中定义的所有对象都从属于那个模块。 + 通过`export`关键字，模块可以把它的某些对象声明为公共的。 + 其它JavaScript模块可以使用*import语句*来访问这些公共对象。 +makeExample('app/app.module.ts', 'imports', '')(format='.') +makeExample('app/app.module.ts', 'export', '')(format='.') @@ -223,7 +223,7 @@ figure ### Angular libraries - ### 模块库 + ### Angular模块库 figure img(src="/resources/images/devguide/architecture/library-module.png" alt="Component" align="left" style="width:240px; margin-left:-40px;margin-right:10px" ) @@ -238,37 +238,37 @@ figure You install them with the **npm** package manager and import parts of them with JavaScript `import` statements. - 我们可以用**npm**包管理工具安装它们，并且用JavaScript的`import`语句导入它们的某些部件。 + 我们可以用**npm**包管理工具安装它们，用JavaScript的`import`语句导入其中某些部件。

:marked For example, import Angular's `Component` decorator from the `@angular/core` library like this: - 比如，我们从`@angular/core`库中导入`Component`装饰器，就像这样： + 例如，我们从`@angular/core`库中导入`Component`装饰器，就像这样： +makeExample('app/app.component.ts', 'import', '')(format='.') :marked You also import Angular _modules_ from Angular _libraries_ using JavaScript import statements: - 我们还使用JavaScript的导入语句从Angular_库_中导入Angular的_某些模块_。 + 我们还可以使用JavaScript的导入语句从Angular_库_中导入Angular的_某些模块_。 +makeExample('app/mini-app.ts', 'import-browser-module', '')(format='.') :marked In the example of the simple root module above, the application module needs material from within that `BrowserModule`. To access that material, add it to the `@NgModule` metadata `imports` like this. - 在上面这个关于根模块的小例子中，应用模块需要来自`BrowserModule`的某些素材。要访问这些素材，我们就得把它加入`@NgModule`元数据的`imports`中去，就像这样： + 在上面这个根模块的例子中，应用模块需要`BrowserModule`的某些素材。要访问这些素材，我们就得把它加入`@NgModule`元数据的`imports`中去，就像这样： +makeExample('app/mini-app.ts', 'ngmodule-imports', '')(format='.') :marked In this way you're using both the Angular and JavaScript module systems _together_. - 这种情况下，我们正在同时使用Angular和JavaScript的模块化系统。 + 种情况下，你同时使用了Angular和JavaScript的模块化系统。 It's easy to confuse the two systems because they share the common vocabulary of "imports" and "exports". Hang in there. The confusion yields to clarity with time and experience. - 这两个系统比较容易混淆，因为它们共享相同的词汇（“imports”和“exports”）。 + 这两个系统比较容易混淆，因为它们共享相同的词汇“imports”和“exports”。 先放一放，随着时间和经验的增长，自然就会澄清了。 .l-sub-section @@ -292,7 +292,7 @@ figure :marked A _component_ controls a patch of screen called a *view*. - _组件_负责控制屏幕上的一小块地方，我们称之为*视图*。 + _组件_负责控制屏幕上的一小块区域，我们称之为*视图*。 For example, the following views are controlled by components: @@ -313,7 +313,7 @@ figure You define a component's application logic—what it does to support the view—inside a class. The class interacts with the view through an API of properties and methods. - 我们在类中定义组件的应用逻辑(它被用来为视图提供支持)。 + 我们在类中定义组件的应用逻辑(用来为视图提供支持)。 组件通过一些由属性和方法组成的API与视图交互。 @@ -322,7 +322,7 @@ figure `HeroListComponent` also has a `selectHero()` method that sets a `selectedHero` property when the user clicks to choose a hero from that list. - 例如，`HeroListComponent`有一个`heroes`属性，它返回一个“英雄”数组，这个数组是由一个服务提供的。 + 例如，`HeroListComponent`有一个`heroes`属性，它返回一个英雄数组，这个数组从一个服务获得。 `HeroListComponent`还有一个`selectHero()`方法，当用户从列表中点选一个英雄时，就把它/她设置到`selectedHero`属性。 +makeExcerpt('app/hero-list.component.ts', 'class') @@ -330,8 +330,8 @@ figure Angular creates, updates, and destroys components as the user moves through the application. Your app can take action at each moment in this lifecycle through optional [lifecycle hooks](lifecycle-hooks.html), like `ngOnInit()` declared above. - 当用户在这个应用中“移动”时，Angular会创建、更新和销毁组件。 - 本应用可以通过[生命周期钩子](lifecycle-hooks.html)在组件生命周期的各个时间点上插入自己的操作，比如上面声明的`ngOnInit()`。 + 当用户在这个应用中漫游时，Angular会创建、更新和销毁组件。 + 应用可以通过[生命周期钩子](lifecycle-hooks.html)在组件生命周期的各个时间点上插入自己的操作，例如上面声明的`ngOnInit()`。 .l-hr @@ -347,19 +347,19 @@ figure You define a component's view with its companion **template**. A template is a form of HTML that tells Angular how to render the component. - 我们通过组件的自带的**模板**来定义视图。模板以HTML形式存在，用来告诉Angular如何渲染组件(视图)。 + 我们通过组件的自带的**模板**来定义组件视图。模板以HTML形式存在，告诉Angular如何渲染组件(视图)。 A template looks like regular HTML, except for a few differences. Here is a template for our `HeroListComponent`: - 多数情况下，模板看起来很像标准HTML……当然也有一点奇怪的地方。下面是`HeroListComponent`组件的一个模板。 + 多数情况下，模板看起来很像标准HTML……当然也有一点不同的地方。下面是`HeroListComponent`组件的一个模板。 +makeExample('app/hero-list.component.html') :marked Although this template uses typical HTML elements like `

` and `

`, it also has some differences. Code like `*ngFor`, `{{hero.name}}`, `(click)`, `[hero]`, and `` uses Angular's [template syntax](template-syntax.html). - 虽然这个模板使用的是典型的HTML元素，比如`

`和`

`，但它也能使用别的。比如`*ngFor`、`{{hero.name}}`、`(click)`、`[hero]`和``使用的就是Angular的[模板语法](template-syntax.html)。 + 模板除了可以使用典型的HTML元素（`

`和`

`），它还能使用其它元素。例如(template-syntax.html)中使用了Angular的[模板语法]`*ngFor`、`{{hero.name}}`、`(click)`、`[hero]`和``。 In the last line of the template, the `` tag is a custom element that represents a new component, `HeroDetailComponent`. @@ -380,7 +380,7 @@ figure Notice how `` rests comfortably among native HTML elements. Custom components mix seamlessly with native HTML in the same layouts. 注意：``竟如此和谐的出现在那些原生HTML元素中。 - 在同一个格局中，自定义组件和原生HTML融合得天衣无缝。 + 自定义组件和原生HTML在同一布局中融合得天衣无缝。
@@ -408,7 +408,7 @@ figure In fact, `HeroListComponent` really is *just a class*. It's not a component until you *tell Angular about it*. - 实际上，`HeroListComponent`真的*只是一个类*。直到我们*告诉Angular*这是一个组件为止。 + 实际上，`HeroListComponent`真的*只是一个类*。直到我们*告诉Angular*它是一个组件。 To tell Angular that `HeroListComponent` is a component, attach **metadata** to the class. @@ -426,7 +426,7 @@ figure Here is the `@Component` !{_decorator}, which identifies the class immediately below it as a component class. - 这里看到`@Component`!{_decoratorCn}(毫无悬念的)把紧随其后的类标记成了组件类。 + 这里看到`@Component`!{_decoratorCn}，它把紧随其后的类标记成了组件类。 block ts-decorator :marked @@ -437,31 +437,31 @@ block ts-decorator Here are a few of the possible `@Component` configuration options: - 来看下`@Component`中的一些配置项： + `@Component`的配置项包括： :marked - `moduleId`: sets the source of the base address (`module.id`) for module-relative URLs such as the `templateUrl`. - - `moduleId`: 为与模块相关的URL（如`templateUrl`）提供基地址。 + - `moduleId`: 为与模块相关的URL（如`templateUrl`）提供基地址 - `selector`: CSS selector that tells Angular to create and insert an instance of this component where it finds a `` tag in *parent* HTML. For example, if an app's HTML contains ``, then Angular inserts an instance of the `HeroListComponent` view between those tags. - - `selector`： 一个CSS选择器，它告诉Angular在*父级*HTML中寻找一个``标签，然后创建该组件，并插入此标签中。 - 比如，如果应用的HTML包含``，Angular就会把`HeroListComponent`的一个实例插入到这个标签中。 + - `selector`： CSS选择器，它告诉Angular在*父级*HTML中查找``标签，创建并插入该组件。 + 例如，如果应用的HTML包含``，Angular就会把`HeroListComponent`的一个实例插入到这个标签中。 - `templateUrl`: module-relative address of this component's HTML template, shown [above](#templates). - - `templateUrl`：组件HTML模板的模块相对地址，我们在[前面](#templates)展示过它。 + - `templateUrl`：组件HTML模板的模块相对地址，[如前所示](#templates)。 - `providers`: !{_array} of **dependency injection providers** for services that the component requires. This is one way to tell Angular that the component's constructor requires a `HeroService` so it can get the list of heroes to display. - - `providers` - 一个数组，包含组件所依赖的服务所需要的*依赖注入提供商*。 - 这是在告诉Angular：该组件的构造函数需要一个`HeroService`服务，这样组件就可以从服务中获得用来显示英雄列表的那些数据。 + - `providers` - 组件所需服务的*依赖注入提供商*数组。 + 这是在告诉Angular：该组件的构造函数需要一个`HeroService`服务，这样组件就可以从服务中获得英雄数据。 figure img(src="/resources/images/devguide/architecture/template-metadata-component.png" alt="元数据" align="left" style="height:200px; margin-left:-40px;margin-right:10px" ) @@ -479,14 +479,14 @@ figure `@Injectable`, `@Input`, and `@Output` are a few of the more popular !{_decorator}s. 我们也会沿用类似的风格，用其它元数据!{_decoratorCn}来指导Angular的行为。 - 比如`@Injectable`、`@Input`和`@Output`等是一些最常用的!{_decoratorCn}。 + 例如`@Injectable`、`@Input`和`@Output`等是一些最常用的!{_decoratorCn}。
:marked The architectural takeaway is that you must add metadata to your code so that Angular knows what to do. - 这种架构所决定的是：必须往代码中添加元数据，以便Angular知道该做什么。 + 这种架构处理方式是：你向代码中添加元数据，以便Angular知道该怎么做。 .l-hr @@ -515,7 +515,7 @@ figure As the diagram shows, there are four forms of data binding syntax. Each form has a direction — to the DOM, from the DOM, or in both directions. - 如图所示，数据绑定的语法有四种形式。每种形式都有一个方向 —— 从DOM来、到DOM去、双向，就像图中的箭头所示意的。 + 如图所示，数据绑定的语法有四种形式。每种形式都有一个方向 —— 绑定到DOM、绑定自DOM以及双向绑定。
:marked @@ -540,8 +540,8 @@ figure that combines property and event binding in a single notation, using the `ngModel` directive. Here's an example from the `HeroDetailComponent` template: - **双向数据绑定**：这是很重要的第四种绑定形式，它在`ngModel`指令这个单一标记中同时实现了属性绑定和事件绑定的功能。 - 下面是一个来自`HeroDetailComponent`模板的范例： + **双向数据绑定**：这是很重要的第四种绑定形式，它使用`ngModel`指令组合了属性绑定和事件绑定的功能。 + 下面是`HeroDetailComponent`模板的范例： +makeExcerpt('app/hero-detail.component.html', 'ngModel') @@ -550,7 +550,7 @@ figure The user's changes also flow back to the component, resetting the property to the latest value, as with event binding. - 在双向绑定中，数据属性的值会从具有属性绑定的组件传到输入框。通过事件绑定，用户的修改被传回到组件，把属性值设置为最新的值。 + 在双向绑定中，数据属性值通过属性绑定从组件传到输入框。用户的修改通过事件绑传回到组件，把属性值设置为最新的值。 Angular processes *all* data bindings once per JavaScript event cycle, from the root of the application component tree through all child components. @@ -570,7 +570,7 @@ figure :marked Data binding is also important for communication between parent and child components. - 数据绑定在父组件与子组件的通讯中***也同样重要***。 + 数据绑定在父组件与子组件的通讯中也同样重要。
.l-hr @@ -579,7 +579,7 @@ figure :marked ## Directives - ## 指令 + ## 指令（directive) figure img(src="/resources/images/devguide/architecture/directive.png" alt="父与子" style="float:left; width:150px; margin-left:-40px;margin-right:10px" ) @@ -587,7 +587,7 @@ figure Angular templates are *dynamic*. When Angular renders them, it transforms the DOM according to the instructions given by **directives**. - Angular模板是*动态的*。当Angular渲染它们时，它会根据**指令**提供的操作指南对DOM进行修改。 + Angular模板是*动态的*。当Angular渲染它们时，它会根据**指令**提供的操作对DOM进行转换。 A directive is a class with directive metadata. In !{_Lang}, apply the `@Directive` !{_decorator} to attach metadata to the class. @@ -598,7 +598,7 @@ figure A component is a *directive-with-a-template*; a `@Component` !{_decorator} is actually a `@Directive` !{_decorator} extended with template-oriented features. - 我们已经遇到过指令的形式之一：组件。组件是一个*带模板的指令*，而且`@Component`!{_decoratorCn}实际上就是一个`@Directive`!{_decoratorCn}，只是扩展了一些面向模板的属性。 + 组件是一个*带模板的指令*；`@Component`!{_decoratorCn}实际上就是一个`@Directive`!{_decoratorCn}，只是扩展了一些面向模板的特性。 .l-sub-section :marked @@ -610,7 +610,7 @@ figure :marked Two *other* kinds of directives exist: _structural_ and _attribute_ directives. - 有两种*其它*类型的指令，我们称之为“结构型”指令和“属性(attribute)型”指令。 + 有两种*其它*类型的指令，我们称之为_结构型_指令和_属性(attribute)型_指令。 They tend to appear within an element tag as attributes do, sometimes by name but more often as the target of an assignment or a binding. @@ -650,7 +650,7 @@ block dart-bool an existing element (typically an ``) by setting its display value property and responding to change events. - `ngModel`指令就是属性型指令的一个例子，它实现了双向数据绑定。它修改了现有元素(一般是``)的行为：它设置了显示属性值，并对change事件做出相应回应。 + `ngModel`指令就是属性型指令的一个例子，它实现了双向数据绑定。它修改了现有元素(一般是``)的行为：设置其显示属性值，并响应change事件。 +makeExcerpt('app/hero-detail.component.html', 'ngModel') :marked @@ -686,7 +686,7 @@ figure A service is typically a class with a narrow, well-defined purpose. It should do something specific and do it well. 几乎任何东西都可以是一个服务。 - 典型的服务是一个类，具有专注的、良好定义的用途。它应该做一件具体的事情，把它做好。 + 典型的服务是一个类，具有专注的、明确的用途。它应该做一件特定的事情，并把它做好。
:marked Examples include: @@ -725,7 +725,7 @@ figure Here's an example of a service class that logs to the browser console: - 这里是一个“服务”类的范例，用于把日志记录到浏览器的控制台： + 这里是一个服务类的范例，用于把日志记录到浏览器的控制台： +makeExcerpt('app/logger.service.ts', 'class') @@ -747,8 +747,8 @@ figure validate user input, or log directly to the console. They delegate such tasks to services. - 我们更倾向于让组件保持精简。组件不需要从服务器获得数据、不需要验证输入，也不需要直接往控制台写日志。 - 它们把这些任务委托给了服务。 + 我们倾向于让组件保持精简。组件本身不从服务器获得数据、不进行验证输入，也不直接往控制台写日志。 + 它们把这些任务委托给服务。 A component's job is to enable the user experience and nothing more. It mediates between the view (rendered by the template) and the application logic (which often includes some notion of a _model_). @@ -767,7 +767,7 @@ figure Angular does help you *follow* these principles by making it easy to factor your application logic into services and make those services available to components through *dependency injection*. - Angular帮助我们*追随*这些原则 —— 它让我们能更轻易的把应用逻辑拆分到服务，并通过*依赖注入*来在组件中使用这些服务。 + Angular帮助我们*追随*这些原则 —— 它让我们能轻易地把应用逻辑拆分到服务，并通过*依赖注入*来在组件中使用这些服务。 .l-hr @@ -791,7 +791,7 @@ figure Angular can tell which services a component needs by looking at the types of its constructor parameters. For example, the constructor of your `HeroListComponent` needs a `HeroService`: - Angular能通过查看构造函数的参数类型，来得知组件需要哪些服务。 + Angular通过查看构造函数的参数类型得知组件需要哪些服务。 例如，`HeroListComponent`组件的构造函数需要一个`HeroService`： +makeExcerpt('app/hero-list.component.ts (constructor)', 'ctor') @@ -809,9 +809,9 @@ figure Angular can call the component's constructor with those services as arguments. This is *dependency injection*. - 注入器是一个维护服务实例的容器，存放着以前创建的实例。 - 如果容器中还没有所请求的服务实例，注入器就会创建一个服务实例，并且添加到容器中，然后把这个服务返回给Angular。 - 当所有的服务都被解析完并返回时，Angular会以这些服务为参数去调用组件的构造函数。 + 注入器维护了一个服务实例的容器，存放着以前创建的实例。 + 如果所请求的服务实例不在容器中，注入器就会创建一个服务实例，并且添加到容器中，然后把这个服务返回给Angular。 + 当所有请求的服务都被解析完并返回时，Angular会以这些服务为参数去调用组件的构造函数。 这就是*依赖注入* 。 The process of `HeroService` injection looks a bit like this: @@ -828,8 +828,8 @@ figure In brief, you must have previously registered a **provider** of the `HeroService` with the injector. A provider is something that can create or return a service, typically the service class itself. - 简单的说，必须在要求注入`HeroService`之前，把一个叫`HeroService`的**提供商Provider**到注入器。 - 提供商可以创建并返回服务，通常返回的就是这个“服务类”本身。 + 简单的说，必须在要求注入`HeroService`之前，在注入器中注册`HeroService`的**提供商Provider**。 + 提供商用于创建并返回一个服务，通常是这个“服务类”本身。 You can register providers in modules or in components. @@ -838,7 +838,7 @@ figure In general, add providers to the [root module](#module) so that the same instance of a service is available everywhere. - 我们通常会把提供商添加到[根模块](#module)上，以便任何地方使用的都是服务的同一个实例。 + 我们通常会把提供商添加到[根模块](#module)上，以便在任何地方使用服务的同一个实例。 +makeExample('app/app.module.ts', 'providers', 'app/app.module.ts (module providers)')(format='.') @@ -859,7 +859,7 @@ figure The full story is in the [dependency injection](dependency-injection.html) page. --> + 详见[依赖注入](dependency-injection.html)页 --> Points to remember about dependency injection: @@ -954,13 +954,13 @@ figure > **Change detection**: The change detection documentation will cover how Angular decides that a component property value has changed, when to update the screen, and how it uses **zones** to intercept asynchronous activity and run its change detection strategies. - > **变更检测**：“变更检测”文档会告诉你Angular是如何决定组件的属性值变化和什么时候该更新到屏幕的。 - 以及它是如何用**zones**来拦截异步行为并执行变更检测策略。 + > **变更检测**：变更检测文档会告诉你Angular是如何决定组件的属性值变化，什么时候该更新到屏幕， + 以及它是如何利用**zones**来拦截异步活动并执行变更检测策略。 > **Events**: The events documentation will cover how to use components and services to raise events with mechanisms for publishing and subscribing to events. - > **事件**：“事件”文档会告诉你如何使用组件和服务触发支持发布和订阅的事件。 + > **事件**：事件文档会告诉你如何使用组件和服务触发支持发布和订阅的事件。 > [**Forms**](forms.html): Support complex data entry scenarios with HTML-based validation and dirty checking. @@ -977,7 +977,7 @@ figure > [**Pipes**](pipes.html): Use pipes in your templates to improve the user experience by transforming values for display. Consider this `currency` pipe expression: - > [**管道**](pipes.html)：在模板中使用管道转换成可显示的值，以增强用户体验。比如这个`currency`管道表达式： + > [**管道**](pipes.html)：在模板中使用管道转换成用于显示的值，以增强用户体验。例如，`currency`管道表达式：

code-example(). @@ -986,12 +986,12 @@ code-example(). :marked > It displays a price of "42.33" as `$42.33`. - > 它把"42.33"显示为`$42.33`。 + > 它把价格"42.33"显示为`$42.33`。 > [**Router**](router.html): Navigate from page to page within the client application and never leave the browser. - > [**路由器**](router.html)：在应用程序客户端导航，并且不离开浏览器。 + > [**路由器**](router.html)：在应用程序客户端的页面间导航，并且不离开浏览器。 > [**Testing**](testing.html): Run unit tests on your application parts as they interact with the Angular framework using the _Angular Testing Platform_.