From 9a6481dee52971e22d9d5be25533853e98b44b14 Mon Sep 17 00:00:00 2001 From: Rex Date: Mon, 20 Jun 2016 14:55:05 +0100 Subject: [PATCH] =?UTF-8?q?review=20of=20"=E6=88=91=E4=BB=AC"=20keyword=20?= =?UTF-8?q?for=20architecture.jade?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/docs/ts/latest/guide/animations.jade | 52 ++++++++-------- public/docs/ts/latest/guide/architecture.jade | 62 +++++++++---------- 2 files changed, 57 insertions(+), 57 deletions(-) diff --git a/public/docs/ts/latest/guide/animations.jade b/public/docs/ts/latest/guide/animations.jade index 1d2e87c839..9578809e5f 100644 --- a/public/docs/ts/latest/guide/animations.jade +++ b/public/docs/ts/latest/guide/animations.jade @@ -14,8 +14,8 @@ include ../_util-fns to with pure CSS animations. But we can also have our animation logic tightly integrated with the rest of our application code, where they can be easily triggered and controlled. - Angular的动画系统赋予了我们制作各种动画效果的能力，以构建出与原生CSS动画性能相同的动画。 - 但我们又额外获得了让动画逻辑与其它应用代码紧紧集成在一起的能力，这让动画可以被更容易的触发与控制。 + Angular的动画系统赋予了制作各种动画效果的能力，以构建出与原生CSS动画性能相同的动画。 + 我们也获得了额外的让动画逻辑与其它应用代码紧紧集成在一起的能力，这让动画可以被更容易的触发与控制。 .alert.is-helpful :marked @@ -100,7 +100,7 @@ figure Animations are defined inside `@Component` metadata. Before we can add some, we need to import a few animation-specific functions: - 动画会被定义在`@Component`元数据中。在添加动画之前，我们得先引入一些与动画有关的函数： + 动画会被定义在`@Component`元数据中。在添加动画之前，先引入一些与动画有关的函数： +makeExample('animations/ts/app/hero-list-basic.component.ts', 'imports')(format=".") @@ -109,7 +109,7 @@ figure metadata. It has animated transitions between two states: `active` and `inactive`. When a hero is active, we display a the element in slightly larger size and lighter color. - 通过这些，我们现在可以在组件元数据中定义一个名叫`heroState`的*动画触发器*。它在两个状态`active`和`inactive`之间进行转场。 + 通过这些，可以在组件元数据中定义一个名叫`heroState`的*动画触发器*。它在两个状态`active`和`inactive`之间进行转场。 当英雄处于激活状态时，它会把该元素显示得稍微大一点、亮一点。 +makeExample('animations/ts/app/hero-list-basic.component.ts', 'animationdef')(format=".") @@ -127,7 +127,7 @@ figure attaching it to one or more elements in the component's template using the "`@triggerName`" syntax: - 我们刚刚定义了一个动画，但它还没有被用到任何地方。要想使用它，我们可以在模板中用`@triggerName`语法来把它附加到一个或多个元素上。 + 我们刚刚定义了一个动画，但它还没有被用到任何地方。要想使用它，可以在模板中用`@triggerName`语法来把它附加到一个或多个元素上。 +makeExample('animations/ts/app/hero-list-basic.component.ts', 'template')(format=".") @@ -138,7 +138,7 @@ figure or `active`, since that's what we have defined animation states for. 这里，我们把该动画触发器添加到了由`ngFor`重复出来的每一个元素上。每个重复出来的元素都有独立的动画效果。 - 我们把`@triggerName`属性(Attribute)的值设置成表达式`hero.state`。这个值应该或者是`inactive`或者是`active`，因为我们刚刚为它们俩定义过动画状态。 + 然后把`@triggerName`属性(Attribute)的值设置成表达式`hero.state`。这个值应该或者是`inactive`或者是`active`，因为我们刚刚为它们俩定义过动画状态。 With this setup, an animated transition is shown whenever a hero object changes state! Here's the full component implementation: @@ -163,7 +163,7 @@ figure or it can be a value computed in a method. The important thing is that we can read it into the component's template. - 动画状态是一个由程序代码中定义的字符串值。在上面的例子中，我们基于英雄对象的逻辑状态使用了`'active'`和`'inactive'`这两种状态。 + 动画状态是一个由程序代码中定义的字符串值。在上面的例子中，基于英雄对象的逻辑状态,我们使用了`'active'`和`'inactive'`这两种状态。 状态的来源可以是像本例中这样简单的对象属性，也可以是由方法计算出来的值。重点是，我们得能从组件模板中读取它。 We can define *styles* for each animation state: @@ -179,12 +179,12 @@ figure animations here. We're actually defining what styles the element has in different states. 这些`state`具体定义了每个状态的*最终样式*。一旦元素转场到那个状态，该样式就会被应用到此元素上，*当它留在此状态时*，这些样式也会一直保持着。 - 从这个意义上讲，这里我们其实并不只是在定义动画，而是在定义该元素在不同状态时应该具有的样式。 + 从这个意义上讲，这里其实并不只是在定义动画，而是在定义该元素在不同状态时应该具有的样式。 Once we have states, we can define *transitions* between the states. Each transition controls the timing of switching between one set of styles and the next: - 定义完状态，我们就能定义在状态之间的各种*转场*了。每个转场都会控制一条在一组样式和下一组样式之间切换的时间线： + 定义完状态，就能定义在状态之间的各种*转场*了。每个转场都会控制一条在一组样式和下一组样式之间切换的时间线： +makeExample('animations/ts/app/hero-list-basic.component.ts', 'transitions')(format=".") @@ -195,7 +195,7 @@ figure.image-display If we have the same timing configuration for several transitions, we can combine them into the same `transition` definition: - 如果多个转场都有同样的时间线配置，我们就可以把它们合并进同一个`transition`定义中： + 如果多个转场都有同样的时间线配置，就可以把它们合并进同一个`transition`定义中： +makeExample('animations/ts/app/hero-list-combined-transitions.component.ts', 'transitions')(format=".") @@ -203,7 +203,7 @@ figure.image-display When we have the same timing for both directions of a transition, as we do in the previous example, we can use the `<=>` shorthand syntax: - 如果我们要对同一个转场的两个方向都使用相同的时间线（就像前面的例子中那样），就可以使用`<=>`这种简写语法： + 如果要对同一个转场的两个方向都使用相同的时间线（就像前面的例子中那样），就可以使用`<=>`这种简写语法： +makeExample('animations/ts/app/hero-list-twoway.component.ts', 'transitions')(format=".") @@ -214,7 +214,7 @@ figure.image-display When the transition finishes, none of these styles will be kept because they're not defined in a `state`. - 有时我们会希望一些样式只在动画期间生效，但在结束后并不保留它们。这时我们可以把这些样式内联在`transition`中进行定义。 + 有时希望一些样式只在动画期间生效，但在结束后并不保留它们。这时可以把这些样式内联在`transition`中进行定义。 在这个例子中，该元素会立刻获得一组样式，然后动态转场到下一个状态。当转场结束时，这些样式并不会被保留，因为它们并没有被定义在`state`中。 +makeExample('animations/ts/app/hero-list-inline-styles.component.ts', 'transitions')(format=".") @@ -277,7 +277,7 @@ figure Using the `void` and `*` states we can define transitions that animate the entering and leaving of elements: - 使用`void`和`*`状态，我们可以定义元素进场与离场时的转场动画： + 使用`void`和`*`状态，可以定义元素进场与离场时的转场动画： * Enter: `void => *` @@ -296,7 +296,7 @@ figure and leaves to the right. 注意，在这个例子中，这些样式在转场定义中被直接应用到了`void`状态，但并没有一个单独的`state(void)`定义。 - 这么做是因为我们希望在进场与离场时使用不一样的转换效果：元素从左侧进场，从右侧离开。 + 这么做是因为希望在进场与离场时使用不一样的转换效果：元素从左侧进场，从右侧离开。 ## Example: Entering and Leaving from Different States @@ -311,7 +311,7 @@ figure different transitions for entering and leaving based on what the state of the hero is: - 通过把英雄的状态用作动画的状态，我们还能把该动画跟以前的转场动画组合成一个复合动画。这让我们能根据该英雄的当前状态为其配置不同的进场与离场动画： + 通过把英雄的状态用作动画的状态，还能把该动画跟以前的转场动画组合成一个复合动画。这让我们能根据该英雄的当前状态为其配置不同的进场与离场动画： * Inactive hero enter: `void => inactive` @@ -331,7 +331,7 @@ figure We now have fine-grained control over each transition: - 现在我们就对每一种转场都有了细粒度的控制： + 现在就对每一种转场都有了细粒度的控制： figure.image-display img(src="/resources/images/devguide/animations/ng_animate_transitions_inactive_active_void.png" alt="This example transitions between active, inactive, and void states" width="400") @@ -349,7 +349,7 @@ figure.image-display borders and many others. The W3C maintains [a list of animatable properties](https://www.w3.org/TR/css3-transitions/#animatable-properties). - 由于Angular的动画支持是基于Web Animations标准的，所以我们也能支持浏览器认为可以*参与动画*的任何属性。这些属性包括位置(position)、大小(size)、变换(transform)、颜色(color)、边框(border)等很多属性。W3C维护着 + 由于Angular的动画支持是基于Web Animations标准的，所以也能支持浏览器认为可以*参与动画*的任何属性。这些属性包括位置(position)、大小(size)、变换(transform)、颜色(color)、边框(border)等很多属性。W3C维护着 [一个“可动”属性列表](https://www.w3.org/TR/css3-transitions/#animatable-properties)。 For positional properties that have a numeric value, we can define a unit by providing @@ -364,7 +364,7 @@ figure.image-display For most dimensinal properties we can also just define a number which is then assumed to be in pixels: - 对大多数尺寸类属性而言，我们还能只定义一个数字，那就表示它使用的是像素(px)数： + 对大多数尺寸类属性而言，还能只定义一个数字，那就表示它使用的是像素(px)数： * `50` is the same as saying `'50px'` @@ -389,7 +389,7 @@ figure is that the value of this property will be computed at runtime and then plugged into the animation. - 如果用Angular动画，我们就可以用一个特殊的`*`属性值来处理这种情况。该属性的值将会在运行期被计算出来，然后插入到这个动画中。 + 如果用Angular动画，就可以用一个特殊的`*`属性值来处理这种情况。该属性的值将会在运行期被计算出来，然后插入到这个动画中。 The "leave" animation in this example takes whatever height the element has before it leaves and animates from that height to zero: @@ -407,7 +407,7 @@ figure The duration, the delay, and the easing function. They are all combined into a single transition *timing string*. - 对每一个动画转场效果，我们有三种时间线属性可以调整：持续时间(duration)、延迟(delay)和缓动(easing)函数。它们被合并到了一个单独的*转场时间线字符串*。 + 对每一个动画转场效果，有三种时间线属性可以调整：持续时间(duration)、延迟(delay)和缓动(easing)函数。它们被合并到了一个单独的*转场时间线字符串*。 ### Duration @@ -416,7 +416,7 @@ figure The duration controls how long the animation takes to run from start to finish. We can define a duration in three ways: - 持续时间控制动画从开始到结束要花多长时间。我们可以用三种方式定义持续时间： + 持续时间控制动画从开始到结束要花多长时间。可以用三种方式定义持续时间： * As a plain number, in milliseconds: `100` @@ -438,7 +438,7 @@ figure transition actually begins. We can define one by adding it in the same string following the duration. It also has the same format options as the duration: - 延迟控制的是在动画已经触发但尚未真正开始转场之前要等待多久。我们可以把它添加到字符串中的持续时间后面，它的选项格式也跟持续时间是一样的： + 延迟控制的是在动画已经触发但尚未真正开始转场之前要等待多久。可以把它添加到字符串中的持续时间后面，它的选项格式也跟持续时间是一样的： * Wait for 100ms and then run for 200ms: `'0.2s 100ms'` @@ -454,7 +454,7 @@ figure can control the easing by adding it as a *third* value in the string after the duration and the delay (or as the *second* value when there is no delay): - [缓动函数](http://easings.net/)用于控制动画在运行期间如何加速和减速。比如：使用`ease-in`函数意味着动画开始时相对缓慢，然后在进行中逐步加速。我们可以通过在这个字符串中的持续时间和延迟后面添加*第三个*值来控制使用哪个缓动函数(如果没有定义延迟就作为*第二个*值)。 + [缓动函数](http://easings.net/)用于控制动画在运行期间如何加速和减速。比如：使用`ease-in`函数意味着动画开始时相对缓慢，然后在进行中逐步加速。可以通过在这个字符串中的持续时间和延迟后面添加*第三个*值来控制使用哪个缓动函数(如果没有定义延迟就作为*第二个*值)。 * Wait for 100ms and then run for 200ms, with easing: `'0.2s 100ms ease-out'` @@ -493,13 +493,13 @@ figure sets of styles to a more intricate animation that goes through one or more intermediate styles in between. - 通过定义动画的*关键帧*，我们可以把两组样式之间的简单转场，升级成一种更复杂的动画，它会在转场期间经历一个或多个中间样式。 + 通过定义动画的*关键帧*，可以把两组样式之间的简单转场，升级成一种更复杂的动画，它会在转场期间经历一个或多个中间样式。 For each keyframe, we can specify an *offset* that defines at which point in the animation that keyframe applies. The offset is a number between zero, which marks the beginning of the animation, and one, which marks the end. - 对于每个关键帧，我们都可以指定一个*偏移量*，用来定义该关键帧将被用在动画期间的哪个时间点。偏移量是一个介于0(表示动画起点)和1(表示动画终点)之间的数组。 + 每个关键帧都可以被指定一个*偏移量*，用来定义该关键帧将被用在动画期间的哪个时间点。偏移量是一个介于0(表示动画起点)和1(表示动画终点)之间的数组。 In this example we add some "bounce" to our enter and leave animations with keyframes: @@ -539,7 +539,7 @@ figure in parallel. For example, we may want to animate two CSS properties but use a different easing function for each one. - 但我们也可能会希望为同时发生的几个动画配置不同的*时间线*。比如，我们可能希望同时对两个CSS属性做动画，但又得为它们定义不同的缓动函数。 + 但我们也可能会希望为同时发生的几个动画配置不同的*时间线*。比如，同时对两个CSS属性做动画，但又得为它们定义不同的缓动函数。 For this we can use animation *groups*. In this example we use groups both on enter and leave so that we can use two different timing configurations. Both diff --git a/public/docs/ts/latest/guide/architecture.jade b/public/docs/ts/latest/guide/architecture.jade index 82bc4aaf39..378ef05ea1 100644 --- a/public/docs/ts/latest/guide/architecture.jade +++ b/public/docs/ts/latest/guide/architecture.jade @@ -91,7 +91,7 @@ figure In general we assemble our application from many **modules**. - 我们的程序通常都是由很多*模块*组装而成的。 + 应用程序通常都是由很多*模块*组装而成的。 A typical module is a cohesive block of code dedicated to a single purpose. A module **exports** something of value in that code, typically one thing such as a class. @@ -106,7 +106,7 @@ figure We highly recommend modular design. TypeScript has great support for ES2015 module syntax and our chapters assume we're taking a modular approach using that syntax. That's why we list *Module* among the basic building blocks. - 我们强烈推荐使用模块化设计。TypeScript对ES2015的模块语法支持很好，我们的文档假设我们利用这些语法来应用模块化方案。这就是为什么我们要把*模块*列为基本构造块之一。 + 我们强烈推荐使用模块化设计。TypeScript对ES2015的模块语法支持很好，文档假设我们会利用这些语法来应用模块化方案。这就是为什么要把*模块*列为基本构造块之一。 Angular itself doesn't require a modular approach nor this particular syntax. Don't use it if you don't want it. Each chapter has plenty to offer after you steer clear of the `import` and `export` statements. @@ -127,7 +127,7 @@ figure 我们遇到的第一个模块，很可能就是用于导出*组件*类的那个。 组件是Angular中的基本构造块之一，我们会编写很多组件。我们将会在下一段继续讨论组件。 - 目前，我们只要知道组件类是从模块中导出一种东西就行了。 + 目前，只要知道组件类是从模块中导出一种东西就行了。 Most applications have an `AppComponent`. By convention, we'll find it in a file named `app.component.ts`. Look inside such a file and we'll see an `export` statement like this one. @@ -144,7 +144,7 @@ figure When we need a reference to the `AppComponent`, we **import** it like this: - 当需要引用`AppComponent`时，我们要像这样**导入**它： + 当需要引用`AppComponent`时，要像这样**导入**它： +makeExample('architecture/ts/app/main.ts', 'import', 'app/main.ts (节选)')(format=".") :marked @@ -175,7 +175,7 @@ figure The `@angular/core` library is the primary Angular library module from which we get most of what we need. - `@angular/core`库是主要的Angular模块库，从这里我们能获得大部分需要的东西。 + `@angular/core`库是主要的Angular模块库，从这里能获得大部分需要的东西。
There are other important Angular library modules too such as `@angular/common`, `@angular/router`, and `@angular/http`. @@ -185,8 +185,8 @@ figure We import what we need from an Angular library module in much the same way. For example, we import the Angular **`Component` *function*** from the *@angular/core* module like this: - 我们从Angular模块库中导入所需内容的方式都差不多。 - 比如，我们从*@angular2/core*中导入Angular **`Component`*函数***的代码是这样的： + 从Angular模块库中导入所需内容的方式都差不多。 + 比如，从*@angular2/core*中导入Angular **`Component`*函数***的代码是这样的： +makeExample('architecture/ts/app/app.component.ts', 'import')(format=".") :marked @@ -216,7 +216,7 @@ figure Learn more about that syntax [here](http://www.2ality.com/2014/09/es6-modules-final.html) and many other places on the web. - 我们导入和导出使用的是ECMAScript 2015 (ES2015)的语法。 + 这里导入和导出使用的是ECMAScript 2015 (ES2015)的语法。 要学习关于此语法的更多知识，参见[这里](http://www.2ality.com/2014/09/es6-modules-final.html)，在网上很多别的地方也能找到相关资料。 The infrastructure *behind* module loading and importing is an important subject. @@ -225,7 +225,7 @@ figure is about all we need to know. “模块加载与导入”背后的基础设施是一个很重要的话题，但它不在Angular简介的范围内。 - 目前的焦点是我们的应用程序，我们只需要知道*import*和*export*就够了。 + 目前的焦点是我们的应用程序，只需要知道*import*和*export*就够了。 :marked The key take-aways are: @@ -260,7 +260,7 @@ figure The shell at the application root with navigation links, that list of heroes, the hero editor ... they're all views controlled by Components. - **组件**控制屏幕中巴掌大的那么一小块地方，这块地方我们称之为*视图*。 + **组件**控制屏幕中巴掌大的那么一小块地方，这块地方被称之为*视图*。 应用的“外壳”包括一些导航链接、英雄列表、英雄编辑器…… 它们都是由组件控制的视图。 We define a Component's application logic - what it does to support the view - inside a class. @@ -300,7 +300,7 @@ figure appropriate `HeroService` when we need it. 你可能会好奇，谁来调用那个构造函数？谁为服务提供参数？ - 目前，你只要信任Angular会在合适的时机调用构造函数，并在我们需要的时候给出一个合适的`HeroService`实例。 + 目前，你只要信任Angular会在合适的时机调用构造函数，并在需要的时候给出一个合适的`HeroService`实例。 .l-main-section @@ -336,7 +336,7 @@ figure 这些都是Angular的[模板语法](template-syntax.html)例子。 我们会逐渐习惯这些语法，甚至会学着爱上它。 - 一会儿我们再解释它。 + 一会儿再解释它。 Before we do, focus attention on the last line. The `` tag is a custom element representing the `HeroDetailComponent`. @@ -349,7 +349,7 @@ figure hero that the user selects from the list presented by the `HeroListComponent`. The `HeroDetailComponent` is a **child** of the `HeroListComponent`. - `HeroDetailComponent`跟我们以前回顾过的`HeroListComponent`是*不同*的组件。 + `HeroDetailComponent`跟以前回顾过的`HeroListComponent`是*不同*的组件。 `HeroDetailComponent`(未展示代码)用于展现一个特定英雄的情况，这个英雄是用户从`HeroListComponent`列表中选择的。 `HeroDetailComponent`是`HeroListComponent`的*子组件*。 @@ -393,7 +393,7 @@ figure We tell Angular that `HeroListComponent` is a component by attaching **metadata** to the class. - 只要把**元数据**附加到这个类，我们就相当于告诉Angular：`HeroListComponent`是个组件。 + 只要把**元数据**附加到这个类，就相当于告诉Angular：`HeroListComponent`是个组件。 The easy way to attach metadata in TypeScript is with a **decorator**. Here's some metadata for `HeroListComponent`: @@ -406,7 +406,7 @@ figure Here we see the `@Component` decorator which (no surprise) identifies the class immediately below it as a Component class. - 这里我们看到`@Component`装饰器(毫无悬念的)把紧随其后的类标记成了组件类。 + 这里看到`@Component`装饰器(毫无悬念的)把紧随其后的类标记成了组件类。 A decorator is a function. Decorators often have a configuration parameter. The `@Component` decorator takes a required configuration object with the @@ -417,7 +417,7 @@ figure Here we see a few of the possible `@Component` configuration options: - 我们来看下`@Component`中的一些配置项： + 来看下`@Component`中的一些配置项： * `selector` - a css selector that tells Angular to create and insert an instance of this component where it finds a `` tag in *parent* HTML. @@ -446,7 +446,7 @@ code-example(language="html"). * `directives` - 一个数组，包含*此*模板需要依赖的组件或指令。 看看模板的最后一行，这表示我们期待Angular把`HeroDetailComponent`的实例放在``标签中。 - 但是，只有当我们在`directives`数组中提及到`HeroDetailComponent`的时候，Angular才会这么做。 + 但是，只有在`directives`数组中提及到`HeroDetailComponent`的时候，Angular才会这么做。 * `providers` - an array of **dependency injection providers** for services that the component requires. This is one way to tell Angular that our component's constructor requires a `HeroService` @@ -482,7 +482,7 @@ figure The architectural take-away is that we must add metadata to our code so that Angular knows what to do. - 这种架构所决定的是：我们必须往代码中添加元数据，以便Angular知道该做什么。 + 这种架构所决定的是：必须往代码中添加元数据，以便Angular知道该做什么。 .l-main-section @@ -562,7 +562,7 @@ figure but it's clear from these examples that data binding plays an important role in communication between a template and its component ... - 虽然我们还不清楚所有细节，但是我们从这些范例中至少弄明白一点：数据绑定在模板与对应组件的交互中扮演了一个很重要的角色。 + 虽然还不清楚所有细节，但是我们从这些范例中至少弄明白一点：数据绑定在模板与对应组件的交互中扮演了一个很重要的角色。
figure @@ -587,12 +587,12 @@ figure Our Angular templates are *dynamic*. When Angular renders them, it transforms the DOM according to the instructions given by a **directive**. - 我们的Angular模板是*动态的*。当Angular渲染它们时，它会根据**指令**提供的操作指南对DOM进行修改。 + Angular模板是*动态的*。当Angular渲染它们时，它会根据**指令**提供的操作指南对DOM进行修改。 A directive is a class with directive metadata. In TypeScript we'd apply the `@Directive` decorator to attach metadata to the class. - 指令是一个带有“指令元数据”的类。在TypeScript中，我们要通过`@Directive`装饰器把元数据附加到类上。 + 指令是一个带有“指令元数据”的类。在TypeScript中，要通过`@Directive`装饰器把元数据附加到类上。
:marked @@ -607,7 +607,7 @@ figure it is so distinctive and central to Angular applications that we chose to separate the component from the directive in our architectural overview. - 虽然**组件从技术角度上就是一个指令**，但是组件非常独特，并在Angular中位于中心地位，以至于我们在架构介绍中，把组件从指令中单独开来。 + 虽然**组件从技术角度上就是一个指令**，但是组件非常独特，并在Angular中位于中心地位，以至于在架构介绍中，我们把组件从指令中单独开来。 :marked There are two *other* kinds of directives as well that we call "structural" and "attribute" directives. @@ -742,7 +742,7 @@ figure They don't fetch data from the server, they don't validate user input, they don't log directly to the console. They delegate such tasks to services. - 我们的组件是服务的主要消费者。它们依赖服务来处理大多数“苦差事”。 + 组件是服务的主要消费者。它们依赖服务来处理大多数“苦差事”。 它们自己不需要从服务器获得数据，不需要验证输入，不需要直接往控制台写日志。 它们把这些任务委托给服务。 @@ -787,7 +787,7 @@ figure For example, the constructor of our `HeroListComponent` needs the `HeroService`: 在TypeScript里，Angular能通过查看构造函数的参数类型，来得知组件需要哪些服务。 - 例如，我们`HeroListComponent`组件的构造函数需要`HeroService`： + 例如，`HeroListComponent`组件的构造函数需要`HeroService`： +makeExample('architecture/ts/app/hero-list.component.ts', 'ctor', 'app/hero-list.component (构造函数)')(format=".") :marked When Angular creates a component, it first asks an **Injector** for @@ -821,21 +821,21 @@ figure In brief, we 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**到注入器。 供应商可以创建并返回服务，通常返回的就是这个“服务类”本身。 We can register providers at any level of the application component tree. We often do so at the root when we bootstrap the application so that the same instance of a service is available everywhere. - 我们可以在应用程序的组件树中的任何级别上注册供应商。 - 当我们需要一个服务的同一个实例在任何地方都是可用时，我们通常在应用引导程序中注册它。 + 可以在应用程序的组件树中的任何级别上注册供应商。 + 当需要一个服务的同一个实例在任何地方都是可用时，我们通常在应用引导程序中注册它。 +makeExample('architecture/ts/app/main.ts', 'bootstrap','app/main.ts (节选)')(format=".") :marked Alternatively, we might register at a component level ... - 或者，我们也可以把它注册在组件层…… + 或者，也可以把它注册在组件层…… +makeExample('architecture/ts/app/hero-list.component.ts', 'providers','app/hero-list.component.ts (节选)')(format=".") :marked @@ -876,7 +876,7 @@ figure * we register *providers* with injectors. - * 我们把*供应商*注册到注入器。 + * 把*供应商*注册到注入器。 .l-main-section @@ -979,13 +979,13 @@ figure >**[Lifecycle Hooks](lifecycle-hooks.html)** - We can tap into key moments in the lifetime of a component, from its creation to its destruction, by implementing the "Lifecycle Hook" interfaces. - >**[生命周期钩子Lifecycle Hooks](lifecycle-hooks.html)** - 通过实现“生命周期钩子”接口，我们可以切入组件生命中的几个关键点：从创建到销毁。 + >**[生命周期钩子Lifecycle Hooks](lifecycle-hooks.html)** - 通过实现“生命周期钩子”接口，可以切入组件生命中的几个关键点：从创建到销毁。 >**[Pipes](pipes.html)** - Services that transform values for display. We can put pipes in our templates to improve the user experience. For example, this `currency` pipe expression, - >**[管道Pipes](pipes.html)** - 这种服务会转换值以供显示。我们可以把管道放在模板中，以增强用户体验。比如这个`currency`管道表达式， + >**[管道Pipes](pipes.html)** - 这种服务会转换值以供显示。可以把管道放在模板中，以增强用户体验。比如这个`currency`管道表达式，
code-example(language="javascript" linenumbers=".").