`。侦探的`ngOnInit`记录下了这个事件。
- The *Reset* button clears the `heroes` list.
- Angular removes all hero divs from the DOM and destroys their spy directives at the same time.
+ The *Reset* button clears the `heroes` list.
+ Angular removes all hero `
` elements from the DOM and destroys their spy directives at the same time.
The spy's `ngOnDestroy` method reports its last moments.
*Reset*按钮清除了这个`heroes`列表。
Angular从DOM中移除了所有英雄的div，并且同时销毁了附加在这些div上的侦探指令。
侦探的`ngOnDestroy`方法汇报了它自己的临终时刻。
- The `ngOnInit` and `ngOnDestroy` methods have more vital roles to play in real applications.
- Let's see why we need them.
+ The `ngOnInit` and `ngOnDestroy` methods have more vital roles to play in real applications.
- 在真实的应用程序中，`ngOnInit`和`ngOnDestroy`方法扮演着更重要的角色。
- 来看看我们为什么需要它们。
+ 在真实的应用程序中，`ngOnInit`和`ngOnDestroy`方法扮演着更重要的角色。
### OnInit
- We turn to `ngOnInit` for two main reasons:
+ Use `ngOnInit` for two main reasons:
- 我们会因为两个主要理由而求助于`ngOnInit`：
- 1. To perform complex initializations shortly after construction
+ 使用`ngOnInit`有两个原因：
+
+ 1. to perform complex initializations shortly after construction
1. 在构造函数之后马上执行复杂的初始化逻辑
- 1. To set up the component after Angular sets the input properties
+ 1. to set up the component after Angular sets the input properties
1. 在Angular设置完输入属性之后，对该组件进行准备。
- An `ngOnInit` often fetches data for the component as shown in the
- [Tutorial](../tutorial/toh-pt4.html#oninit) and [HTTP](server-communication.html#oninit) chapters.
+ Experienced developers agree that components should be cheap and safe to construct.
- `ngOnInit`通常用来为组件获取数据，就像在[教程](../tutorial/toh-pt4.html#oninit)和[HTTP](server-communication.html#oninit)中所展示的那样。
+ 有经验的开发者认同组件的构建应该很便宜和安全。
- We don't fetch data in a component constructor. Why?
- Because experienced developers agree that components should be cheap and safe to construct.
- We shouldn't worry that a new component will try to contact a remote server when
- created under test or before we decide to display it.
+.l-sub-section
+ :marked
+ Misko Hevery, Angular team lead,
+ [explains why](http://misko.hevery.com/code-reviewers-guide/flaw-constructor-does-real-work/)
+ you should avoid complex constructor logic.
+
+ Misko Hevery，Angular项目的头，在[这里解释](http://misko.hevery.com/code-reviewers-guide/flaw-constructor-does-real-work/)了你为什么应该避免复杂的构造函数逻辑。
+
+:marked
+
+ Don't fetch data in a component constructor.
+ You shouldn't worry that a new component will try to contact a remote server when
+ created under test or before you decide to display it.
Constructors should do no more than set the initial local variables to simple values.
- 我们没有在组件的构造函数中获取数据。为什么呢？
- 因为有经验的开发者都同意，组件应该能被“便宜”而且安全的被构造出来。
+ 不要在组件的构造函数中获取数据？
在测试环境下新建组件时或在我们决定显示它之前，我们不应该担心它会尝试联系远程服务器。
构造函数中除了使用简单的值对局部变量进行初始化之外，什么都不应该做。
+
+ An `ngOnInit` is a good place for a component to fetch its initial data. The
+ [Tutorial](../tutorial/toh-pt4.html#oninit) and [HTTP](server-communication.html#oninit) chapter
+ show how.
- When a component must start working _soon_ after creation,
- we can count on Angular to call the `ngOnInit` method to jumpstart it.
- That's where the heavy initialization logic belongs.
-
- 如果组件必须在创建之后_很快_就开始工作，我们可以等Angular调用`ngOnInit`方法来启动它。
- 该方法中才是放重量级初始化逻辑的地方。
+ `ngOnInit`是组件获取初始数据的好地方。[指南](../tutorial/toh-pt4.html#oninit)和[HTTP](server-communication.html#oninit)章讲解了如何这样做。
Remember also that a directive's data-bound input properties are not set until _after construction_.
- That's a problem if we need to initialize the directive based on those properties.
- They'll have been set when our `ngOninit` runs.
+ That's a problem if you need to initialize the directive based on those properties.
+ They'll have been set when `ngOninit` runs.
另外还要记住，在指令的_构造函数完成之前_，那些被绑定的输入属性还都没有值。
如果我们需要基于这些属性的值来初始化这个指令，这种情况就会出问题。
而当`ngOnInit`执行的时候，这些属性都已经被正确的赋值过了。
.l-sub-section
:marked
- Our first opportunity to access those properties is the `ngOnChanges` method which
- Angular calls before `ngOnInit`. But Angular calls `ngOnChanges` many times after that.
+ The `ngOnChanges` method is your first opportunity to access those properties.
+ Angular calls `ngOnChanges` before `ngOnInit` ... and many times after that.
It only calls `ngOnInit` once.
我们访问这些属性的第一次机会，实际上是`ngOnChanges`方法，Angular会在`ngOnInit`之前调用它。
但是在那之后，Angular还会调用`ngOnChanges`很多次。而`ngOnInit`只会被调用一次。
:marked
+ You can count on Angular to call the `ngOnInit` method _soon_ after creating the component.
+ That's where the heavy initialization logic belongs.
+
### OnDestroy
Put cleanup logic in `ngOnDestroy`, the logic that *must* run before Angular destroys the directive.
一些清理逻辑*必须*在Angular销毁指令之前运行，把它们放在`ngOnDestroy`中。
- This is the time to notify another part of the application that this component is going away.
+ This is the time to notify another part of the application that the component is going away.
这是在该组件消失之前，可用来通知应用程序中其它部分的最后一个时间点。
This is the place to free resources that won't be garbage collected automatically.
Unsubscribe from observables and DOM events. Stop interval timers.
Unregister all callbacks that this directive registered with global or application services.
- We risk memory leaks if we neglect to do so.
+ You risk memory leaks if you neglect to do so.
这里是用来释放那些不会被垃圾收集器自动回收的各类资源的地方。
取消那些对可观察对象和DOM事件的订阅。停止定时器。注销该指令曾注册到全局服务或应用级服务中的各种回调函数。
- 如果我们不这么做，就会有导致内存泄露的风险。
+ 如果不这么做，就会有导致内存泄露的风险。
.l-main-section
:marked
## OnChanges
- We monitor the `OnChanges` hook in this example.
Angular calls its `ngOnChanges` method whenever it detects changes to ***input properties*** of the component (or directive).
在这个例子中，我们监听了`OnChanges`钩子。
一旦检测到该组件(或指令)的***输入属性***发生了变化，Angular就会调用它的`ngOnChanges`方法。
- Here is our implementation of the hook.
+ This example monitors the `OnChanges` hook.
+
+ 本例监控`OnChanges`钩子。
- 这里是我们对此钩子的实现。
+makeExample('lifecycle-hooks/ts/app/on-changes.component.ts', 'ng-on-changes', 'OnChangesComponent (ngOnChanges)')(format=".")
:marked
The `ngOnChanges` method takes an object that maps each changed property name to a
- [SimpleChange](../api/core/index/SimpleChange-class.html) object with the current and previous property values.
- We iterate over the changed properties and log them.
+ [SimpleChange](../api/core/index/SimpleChange-class.html) object holding the current and previous property values.
+ This hook iterates over the changed properties and logs them.
`ngOnChanges`方法获取了一个对象，它把每个发生变化的属性名都映射到了一个[SimpleChange](../api/core/index/SimpleChange-class.html)对象，
该对象中有属性的当前值和前一个值。我们在这些发生了变化的属性上进行迭代，并记录它们。
- The input properties for our example `OnChangesComponent` are `hero` and `power`.
+ The example component, `OnChangesComponent`, has two input properties: `hero` and `power`.
+
+ 这个例子中的`OnChangesComponent`组件有两个输入属性：`hero`和`power`。
- 我们这个例子中的`OnChangesComponent`组件的输入属性是`hero`和`power`。
+makeExample('lifecycle-hooks/ts/app/on-changes.component.ts', 'inputs')(format=".")
:marked
- The parent binds to them like this:
+ The host `OnChangesParentComponent` binds to them like this:
+
+ 宿主`OnChangesParentComponent`绑定了它们，就像这样：
- 父组件中绑定了它们，就像这样：
+makeExample('lifecycle-hooks/ts/app/on-changes-parent.component.html', 'on-changes')
:marked
- Here's the sample in action as we make changes.
+ Here's the sample in action as the user makes changes.
- 下面是此例子中的当我们做出更改时的操作演示：
+ 下面是此例子中的当用户做出更改时的操作演示：
figure.image-display
img(src='/resources/images/devguide/lifecycle-hooks/on-changes-anim.gif' alt="OnChanges")
:marked
- We see log entries as the string value of the *power* property changes. But the `ngOnChanges` did not catch changes to `hero.name`
- That's surprising at first.
+ The log entries appear as the string value of the *power* property changes.
+ But the `ngOnChanges` does not catch changes to `hero.name`
+ That's surprising at first.
- 当*power*属性的字符串值变化时，我们看到了相应的日志。但是`ngOnChanges`并没有捕捉到`hero.name`的变化。
+ 当*power*属性的字符串值变化时，相应的日志就出现了。
+ 但是`ngOnChanges`并没有捕捉到`hero.name`的变化。
这是第一个意外。
Angular only calls the hook when the value of the input property changes.
@@ -699,50 +655,48 @@ figure.image-display
.l-main-section
:marked
## DoCheck
- We can use the `DoCheck` hook to detect and act upon changes that Angular doesn't catch on its own.
+ Use the `DoCheck` hook to detect and act upon changes that Angular doesn't catch on its own.
+
+ 使用`DoCheck`钩子来检测那些Angular自身无法捕获的变更并采取行动。
- 我们可以使用`DoCheck`钩子来检测那些Angular自身无法捕获的变更并采取行动。
.l-sub-section
:marked
- With this method we can detect a change that Angular overlooked.
- What we do with that information to refresh the display is a separate matter.
+ Use this method to detect a change that Angular overlooked.
+
+ 用这个方法来检测那些被Angular忽略的更改。
+
- 用这个方法我们可以检测到那些被Angular忽略的更改。
- 至于如何用此信息来刷新显示就是另一个问题了。
:marked
- The *DoCheck* sample extends the *OnChanges* sample with this implementation of `DoCheck`:
+ The *DoCheck* sample extends the *OnChanges* sample with the following `ngDoCheck` hook:
*DoCheck*范例通过下面的`DoCheck`实现扩展了*OnChanges*范例：
+
+makeExample('lifecycle-hooks/ts/app/do-check.component.ts', 'ng-do-check', 'DoCheckComponent (ngDoCheck)')(format=".")
:marked
- We manually check everything that we care about, capturing and comparing against previous values.
- We write a special message to the log when there are no substantive changes
- to the hero or the power so we can keep an eye on the method's performance characteristics.
+ This code inspects certain _values-of-interest_, capturing and comparing their current state against previous values.
+ It writes a special message to the log when there are no substantive changes to the `hero` or the `power`
+ so you can see how often `DoCheck` is called. The results are illuminating:
- 我们手动检测了自己关心的一切，捕获当前值并与以前的值进行比较。
- 当英雄或它的超能力发生了非实质性改变时，我们就往日志中写一条特殊的消息，以便看到该方法的工作特征。
+ 该代码检测一些**相关的值**，捕获当前值并与以前的值进行比较。
+ 当英雄或它的超能力发生了非实质性改变时，我们就往日志中写一条特殊的消息。
+ 这样你可以看到`DoCheck`被调用的频率。结果非常显眼：
- The results are illuminating:
-
- 其结果就像下面展示的这样：
figure.image-display
img(src='/resources/images/devguide/lifecycle-hooks/do-check-anim.gif' alt="DoCheck")
:marked
- We now are able to detect when the hero's `name` has changed. But we must be careful.
-
- 我们现在可以监测到英雄的`name`什么时候发生了变化。但我们必须小心。
-
- The `ngDoCheck` hook is called with enormous frequency —
+ While the `ngDoCheck` hook can detect when the hero's `name` has changed, it has a frightful cost.
+ This hook is called with enormous frequency —
after _every_ change detection cycle no matter where the change occurred.
- It's called over twenty times in this example before the user can do anything.
+ It's called over twenty times in this example before the user can do anything.
- `ngDoCheck`钩子被非常频繁的调用 —— 在_每次_变更检测周期之后，发生了变化的每个地方都会调它。
+ 虽然`ngDoCheck`钩子可以可以监测到英雄的`name`什么时候发生了变化。但我们必须小心。
+ 这个`ngDoCheck`钩子被非常频繁的调用 —— 在_每次_变更检测周期之后，发生了变化的每个地方都会调它。
在这个例子中，用户还没有做任何操作之前，它就被调用了超过二十次。
Most of these initial checks are triggered by Angular's first rendering of *unrelated data elsewhere on the page*.
Mere mousing into another input box triggers a call.
Relatively few calls reveal actual changes to pertinent data.
- Clearly our implementation must be very lightweight or the user experience may suffer.
+ Clearly our implementation must be very lightweight or the user experience will suffer.
大部分检查的第一次调用都是在Angular首次渲染该页面中*其它不相关数据*时触发的。
仅仅把鼠标移到其它输入框中就会触发一次调用。
@@ -775,13 +729,13 @@ figure.image-display
+makeExample('lifecycle-hooks/ts/app/after-view.component.ts', 'template', 'AfterViewComponent (template)')(format=".")
:marked
The following hooks take action based on changing values *within the child view*
- which we can only reach by querying for the child view via the property decorated with
+ which can only be reached by querying for the child view via the property decorated with
[@ViewChild](../api/core/index/ViewChild-var.html).
下列钩子基于*子视图中*的每一次数据变更采取行动，我们只能通过带[@ViewChild](../api/core/index/ViewChild-var.html)装饰器的属性来访问子视图。
+makeExample('lifecycle-hooks/ts/app/after-view.component.ts', 'hooks', 'AfterViewComponent (class excerpts)')(format=".")
-.a(id="wait-a-tick")
+#wait-a-tick
:marked
### Abide by the unidirectional data flow rule
### 遵循单向数据流规则
@@ -795,21 +749,21 @@ figure.image-display
为什么在更新`comment`属性之前，`doSomething`方法要等上一拍(tick)？
- Because we must adhere to Angular's unidirectional data flow rule which says that
- we may not update the view *after* it has been composed.
- Both hooks fire after the component's view has been composed.
+ Angular's unidirectional data flow rule forbids updates to the view *after* it has been composed.
+ Both of these hooks fire _after_ the component's view has been composed.
- 因为我们必须遵守Angular的“单向数据流”规则，这条规则是说我们不能在一个视图已经被组合好*之后*再更新视图。
+ Angular的“单向数据流”规则禁止在一个视图已经被组合好*之后*再更新视图。
而这两个钩子都是在组件的视图已经被组合好之后触发的。
- Angular throws an error if we update component's data-bound `comment` property immediately (try it!).
+ Angular throws an error if the hook updates the component's data-bound `comment` property immediately (try it!).
如果我们立即更新组件中被绑定的`comment`属性，Angular就会抛出一个错误(试试!)。
block tick-methods
:marked
- The `LoggerService.tick` methods, which are implemented by a call to `setTimeout`, postpone the update one turn of the of the browser's JavaScript cycle ... and that's long enough.
+ The `LoggerService.tick_then()` postpones the log update
+ for one turn of the browser's JavaScript cycle ... and that's just long enough.
- `LoggerService.tick`方法，是通过调用`setTimeout`的方式实现的 —— 如果想推迟到浏览器的下一轮JavaScript周期中执行，这样就够了。
+ `LoggerService.tick_then()`方法延迟更新日志一个回合（浏览器JavaScript周期回合），这样就够了。
:marked
Here's *AfterView* in action
@@ -846,19 +800,16 @@ figure.image-display
Angular 1的开发者大概知道一项叫做*transclusion*的技术，对，这就是它的马甲。
:marked
- We'll illustrate with a variation on the [previous](#afterview) example
- whose behavior and output is almost the same.
-
- 在[前一个](#afterview)例子中，我们解说过此功能的一个变体，它的行为和输出与这个例子完全相同。
-
- This time, instead of including the child view within the template, we'll import it from
+ Consider this variation on the [previous _AfterView_](#afterview) example.
+ This time, instead of including the child view within the template, it imports the content from
the `AfterContentComponent`'s parent. Here's the parent's template.
+ 对比[前一个](#afterview)例子考虑这个变化。
这次，我们不再通过模板来把子视图包含进来，而是改从`AfterContentComponent`的父组件中导入它。下面是父组件的模板。
+makeExample('lifecycle-hooks/ts/app/after-content.component.ts', 'parent-template', 'AfterContentParentComponent (template excerpt)')(format=".")
:marked
Notice that the `
` tag is tucked between the `` tags.
- We never put content between a component's element tags *unless we intend to project that content
+ Never put content between a component's element tags *unless you intend to project that content
into the component*.
注意，``标签被包含在``标签中。
@@ -870,7 +821,7 @@ figure.image-display
+makeExample('lifecycle-hooks/ts/app/after-content.component.ts', 'template', 'AfterContentComponent (template)')(format=".")
:marked
The `` tag is a *placeholder* for the external content.
- They tell Angular where to insert that content.
+ It tells Angular where to insert that content.
In this case, the projected content is the `` from the parent.
``标签是外来内容的*占位符*。
@@ -888,8 +839,8 @@ figure.image-display
:marked
### AfterContent hooks
### AfterContent钩子
- *AfterContent* hooks are similar to the *AfterView* hooks. The key difference is the kind of child component
- that we're looking for.
+ *AfterContent* hooks are similar to the *AfterView* hooks.
+ The key difference is in the child component
*AfterContent*钩子和*AfterView*相似。关键的不同点是子组件的类型不同。
@@ -904,7 +855,7 @@ figure.image-display
* *AfterContent*钩子所关心的是`ContentChildren`，这些子组件被Angular投影进该组件中。
The following *AfterContent* hooks take action based on changing values in a *content child*
- which we can only reach by querying for it via the property decorated with
+ which can only be reached by querying for it via the property decorated with
[@ContentChild](../api/core/index/ContentChild-var.html).
下列*AfterContent*钩子基于*子级内容*中值的变化而采取相应的行动，这里我们只能通过带有[@ContentChild](../api/core/index/ContentChild-var.html)装饰器的属性来查询到“子级内容”。
@@ -912,19 +863,19 @@ figure.image-display
+makeExample('lifecycle-hooks/ts/app/after-content.component.ts', 'hooks', 'AfterContentComponent (class excerpts)')(format=".")
:marked
- ### No unidirectional flow worries
- ### 这里不用担心单向数据流规则
-
- This component's `doSomething` method update's the component's data-bound `comment` property immediately.
- There's no [need to wait](#wait-a-tick).
-
- 该组件的`doSomething`方法立即更新了组件被绑定的`comment`属性。
- 它[不用等](#wait-a-tick)下一拍。
-
- Recall that Angular calls both *AfterContent* hooks before calling either of the *AfterView* hooks.
- Angular completes composition of the projected content *before* finishing the composition of this component's view.
- We still have a window of opportunity to modify that view.
+ ### No unidirectional flow worries with _AfterContent..._
+ ### 使用**AfterContent**时，无需担心单向数据流规则
- 回忆一下，Angular在每次调用*AfterView*钩子之前也会同时调用*AfterContent*。
- Angular在完成当前组件的视图合成之前，就已经完成了被投影内容的合成。
- 所以我们仍然有机会去修改那个视图。
+ This component's `doSomething` method update's the component's data-bound `comment` property immediately.
+ There's no [need to wait](#wait-a-tick).
+
+ 该组件的`doSomething`方法立即更新了组件被绑定的`comment`属性。
+ 它[不用等](#wait-a-tick)下一拍。
+
+ Recall that Angular calls both *AfterContent* hooks before calling either of the *AfterView* hooks.
+ Angular completes composition of the projected content *before* finishing the composition of this component's view.
+ There is a small window between the `AfterContent...` and `AfterView...` hooks to modify the host view.
+
+ 回忆一下，Angular在每次调用*AfterView*钩子之前也会同时调用*AfterContent*。
+ Angular在完成当前组件的视图合成之前，就已经完成了被投影内容的合成。
+ 所以我们仍然有机会去修改那个视图。
diff --git a/public/docs/ts/latest/guide/npm-packages.jade b/public/docs/ts/latest/guide/npm-packages.jade
index f9d7435ce4..b1a7171a15 100644
--- a/public/docs/ts/latest/guide/npm-packages.jade
+++ b/public/docs/ts/latest/guide/npm-packages.jade
@@ -220,7 +220,7 @@ a(id="other")
### Other helper libraries
### 其它辅助库
- ***angular2-in-memory-web-api*** - An Angular-supported library that simulates a remote server's web api
+ ***angular-in-memory-web-api*** - An Angular-supported library that simulates a remote server's web api
without requiring an actual server or real http calls.
Good for demos, samples, and early stage development (before we even have a server).
Read about it in the [Http Client](server-communication.html#appendix-tour-of-heroes-in-memory-server) page.
diff --git a/public/docs/ts/latest/guide/pipes.jade b/public/docs/ts/latest/guide/pipes.jade
index 0a94ec2b74..9efeb32acf 100644
--- a/public/docs/ts/latest/guide/pipes.jade
+++ b/public/docs/ts/latest/guide/pipes.jade
@@ -55,7 +55,7 @@ block includes
:marked
Inside the interpolation expression we flow the component's `birthday` value through the
- [pipe operator](./template-syntax.html#pipe) ( | ) to the [Date pipe](../api/common/index/DatePipe-class.html)
+ [pipe operator](./template-syntax.html#pipe) ( | ) to the [Date pipe](../api/common/index/DatePipe-pipe.html)
function on the right. All pipes work this way.
在这个插值表达式中，我们让组件的`birthday`值通过[管道操作符](./template-syntax.html#pipe)( | )流动到
diff --git a/public/docs/ts/latest/guide/server-communication.jade b/public/docs/ts/latest/guide/server-communication.jade
index 1bc181cc37..e3e27a0ace 100644
--- a/public/docs/ts/latest/guide/server-communication.jade
+++ b/public/docs/ts/latest/guide/server-communication.jade
@@ -1147,7 +1147,7 @@ a#in-mem-web-api
.l-sub-section
:marked
The in-memory web api is not part of the Angular core.
- It's an optional service in its own `angular2-in-memory-web-api` library
+ It's an optional service in its own `angular-in-memory-web-api` library
that we installed with npm (see `package.json`) and
registered for module loading by SystemJS (see `systemjs.config.js`)
diff --git a/public/docs/ts/latest/guide/testing.jade b/public/docs/ts/latest/guide/testing.jade
index 2ea6c0ee6a..4729a47a61 100644
--- a/public/docs/ts/latest/guide/testing.jade
+++ b/public/docs/ts/latest/guide/testing.jade
@@ -1285,24 +1285,23 @@ a(href="#top").to-top 回到顶部
### 同步测试
The first two tests are synchronous.
- Neither test can prove that a value from the service will be displayed.
+ Thanks to the spy, they verify that `getQuote` is called _after_
+ the first change detection cycle during which Angular calls `ngOnInit`.
- 前两个测试是同步的。它们都不能证明服务返回的值将会被显示。
+ 前两个测试是同步的。
+ 在Spy的帮助下，它们验证了在Angular调用`ngOnInit`期间发生的第一次变化检测后，`getQuote`被调用了。
- Thanks to the spy, the second test verifies that `getQuote` is called.
- But the quote itself has not arrived, despite the fact that the spy returns a resolved promise.
-
- 在Spy的帮助下，第二个测试验证了`getQuote`被调用了。
- 虽然Spy返回了解析了的承诺，但是确没有收到名言。
+ Neither test can prove that a value from the service is be displayed.
+ The quote itself has not arrived, despite the fact that the spy returns a resolved promise.
- This test must wait at least one full turn of the JavaScript engine, a least one "tick", before the
- value becomes available. By that time, the test runner has moved on to the next test in the suite.
+ 两者都不能证明被显示的值是从服务的。
+ 虽然spy返回了解析的承诺，名言本身还没有到来。
+
+ This test must wait at least one full turn of the JavaScript engine before the
+ value becomes available. The test must become _asynchronous_.
- 这个测试必须等待JavaScript引擎一整个回合，至少一个"tick"后，返回值才会有效。这个时候，测试运行器已经移到了测试套件下个测试。
-
- The test must become an "async test" ... like the third test
-
- 测试必须变成“异步测试”...就像第三个测试那样。
+ 这个测试必须等待JavaScript引擎一整个回合，返回值才会有效。该测试必须要变成**异步的**。
+
#async
:marked
@@ -1316,13 +1315,10 @@ a(href="#top").to-top 回到顶部
+makeExample('testing/ts/app/shared/twain.component.spec.ts', 'async-test', 'app/shared/twain.component.spec.ts (async test)')(format='.')
:marked
- The `async` function is one of the Angular testing utilities.
+ The `async` function is one of the Angular testing utilities.
+ It simplifies coding of asynchronous tests by arranging for the tester's code to run in a special _async test zone_.
- `async`函数是**Angular TestBed**的一部分。
-
- It simplifyies coding of asynchronous tests by arranging for the tester's code to run in a special _async test zone_.
-
- 通过将测试代码放到特殊的**异步测试区域**来运行，`async`函数简化了异步测试的代码。
+ `async`函数是**Angular TestBed**的一部分。通过将测试代码放到特殊的**异步测试区域**来运行，`async`函数简化了异步测试的代码。
The `async` function _takes_ a parameterless function and _returns_ a parameterless function
which becomes the argument to the Jasmine `it` call.
@@ -1338,11 +1334,15 @@ a(href="#top").to-top 回到顶部
没有任何地方显示异步特征。
比如，它不返回承诺，并且没有`done`方法可调用，因为它是标准的Jasmine异步测试。
- Some functions called within a test (such as `fixture.whenStable`) continue to reveal their asynchronous behavior.
- Consider also the [_fakeAsync_](#fake-async) alternative which affords a more linear coding experience.
+ Some functions called within a test (such as `fixture.whenStable`) continue to reveal their asynchronous behavior.
在测试（比如`fixture.whenStable`）里面调用函数时，会继续体现它们的异步行为。
- 考虑使用[_fakeAsync_](#fake-async)，以获得更加直观的代码经验。
+
+.l-sub-section
+ :marked
+ The `fakeAsync` alternative, [covered below](#fake-async), removes this artifact and affords a more linear coding experience.
+
+ `fakeAsync`可选方法，[正如下面解释的](#fake-async)，移除了这个需要，提供了更加直观的代码经验。
#when-stable
:marked
@@ -1350,17 +1350,9 @@ a(href="#top").to-top 回到顶部
## **whenStable**
- The test must wait for the `getQuote` promise to resolve.
+ The test must wait for the `getQuote` promise to resolve in the next turn of the JavaScript engine.
- 测试必须等待`getQuote`承诺的解析。
-
- The `getQuote` promise promise resolves in the next turn of the JavaScript engine, thanks to the spy.
- But a different test implementation of `getQuote` could take longer.
- An integration test might call the _real_ `getQuote`, resulting in an XHR request
- that took many seconds to respond.
-
- 在spy的帮助下，`getQuote`承诺在JavaScript引擎的下一回合中被解析。但是不同的`getQuote`测试的实施可能需要更长时间。
- 集成的测试有可能调用**真实**的`getQuote`，导致XHR请求，需要好几秒来响应。
+ 测试必须等待`getQuote`在JavaScript引擎的下一回合中被解析。
This test has no direct access to the promise returned by the call to `testService.getQuote`
which is private and inaccessible inside `TwainComponent`.
@@ -1373,16 +1365,15 @@ a(href="#top").to-top 回到顶部
幸运的是，**异步测试区域**可以访问`getQuote`承诺，因为它拦截所有调用**异步**方法所发出的承诺。
The `ComponentFixture.whenStable` method returns its own promise which resolves when the `getQuote` promise completes.
- In fact, the _whenStable_ promise resolves when _all pending asynchronous activities_ complete ... the definition of "stable".
+ In fact, the _whenStable_ promise resolves when _all pending asynchronous activities within this test_ complete ... the definition of "stable".
`ComponentFixture.whenStable`方法返回它自己的承诺，它在`getQuote`承诺完成时被解析。实际上，当**所有待处理异步行为**完成时即为“stable”，在“stable”后**whenStable**承诺被解析。
- Then the testing continues.
- The test kicks off another round of change detection (`fixture.detectChanges`) which tells Angular to update the DOM with the quote.
+ Then the test resumes and kicks off another round of change detection (`fixture.detectChanges`)
+ which tells Angular to update the DOM with the quote.
The `getQuote` helper method extracts the display element text and the expectation confirms that the text matches the test quote.
- 然后测试继续运行。
- 测试开始另一轮的变化检测（`fixture.detectChanges`）,通知Angular使用名言来更新DOM。
+ 然后测试继续运行，并开始另一轮的变化检测（`fixture.detectChanges`）,通知Angular使用名言来更新DOM。
`getQuote`辅助方法提取出显示元素文本，然后expect语句确认这个文本与预备的名言相符。
#fakeAsync
@@ -1404,25 +1395,27 @@ a(href="#top").to-top 回到顶部
注意，在`it`的参数中，`async`被`faceAsync`替换。
`fakeAsync`是另一种Angular测试工具。
- Like [async](#async-fn-in-it), it _takes_ a parameterless function and _returns_ a parameterless function
- which becomes the argument to the Jasmine `it` call.
+ Like [async](#async), it _takes_ a parameterless function and _returns_ a function
+ that becomes the argument to the Jasmine `it` call.
- 和[async](#async-fn-in-it)一样，它也**接受**无参数函数并**返回**无参数函数，变成Jasmine的`it`函数的参数。
+ 和[async](#async)一样，它也**接受**无参数函数并**返回**一个函数，变成Jasmine的`it`函数的参数。
The `fakeAsync` function enables a linear coding style by running the test body in a special _fakeAsync test zone_.
`fakeAsync`函数通过在特殊的**fakeAsync测试区域**运行测试，让测试代码更加简单直观。
The principle advantage of `fakeAsync` over `async` is that the test appears to be synchronous.
- There are no promises at all.
- No `then(...)` chains to disrupt the visible flow of control.
+ There is no `then(...)` to disrupt the visible flow of control.
+ The promise-returning `fixture.whenStable` is gone, replaced by `tick()`.
对于`async`来说，`fakeAsync`最重要的好处时测试看起来像同步的。里面没有任何承诺。
没有`then(...)`链来打断控制流。
+
+.l-sub-section
+ :marked
+ There _are_ limitations. For example, you cannot make an XHR call from within a `fakeAsync`.
- There are limitations. For example, you cannot make an XHR call from within a `fakeAsync`.
-
- 但是`fakeAsync`有局限性。比如，你不能从`fakeAsync`发起XHR请求。
+ 但是`fakeAsync`有局限性。比如，你不能从`fakeAsync`发起XHR请求。
#tick
#tick-first-look
@@ -1430,11 +1423,7 @@ a(href="#top").to-top 回到顶部
## The _tick_ function
## **tick**函数
-
- Compare the third and fourth tests. Notice that `fixture.whenStable` is gone, replaced by `tick()`.
-
- 比较一下第三和第四个测试。注意`fixture.whenStable`没有了，被`tick()`替换。
-
+
The `tick` function is one of the Angular testing utilities and a companion to `fakeAsync`.
It can only be called within a `fakeAsync` body.
@@ -1552,11 +1541,11 @@ a(href="#top").to-top 回到顶部
## **beforeEach**里的**async**函数
- Notice the `async` call in the `beforeEach`.
+ Notice the `async` call in the `beforeEach`, made necessary by the asynchronous `TestBed.compileComponents` method.
The `async` function arranges for the tester's code to run in a special _async test zone_
that hides the mechanics of asynchronous execution, just as it does when passed to an [_it_ test)(#async).
- 注意`beforeEach`里面对`async`的调用。
+ 注意`beforeEach`里面对`async`的调用，因为异步方法`TestBed.compileComponents`而变得必要。
`async`函数将测试代码安排到特殊的**异步测试区域**来运行，该区域隐藏了异步执行的细节，就像它被传递给[_it_ 测试)(#async)一样。
#compile-components
@@ -1574,13 +1563,14 @@ a(href="#top").to-top 回到顶部
Tests later in this chapter have more declared components and some of them import application
modules that declare yet more components.
Some or all of these components could have external templates and css files.
- `TestBed.compileComponents` compiles them all asynchonously at one time.
+ `TestBed.compileComponents` compiles them all asynchronously at one time.
本章后面的测试有更多声明组件，它们中间的一些导入应用模块，这些模块有更多的声明组件。
一部分或者全部组件可能有外部模板和CSS文件。
`TestBed.compileComponents`一次性异步编译所有组件。
The `compileComponents` method returns a promise so you can perform additional tasks _after_ it finishes.
+ The promise isn't needed here.
`compileComponents`方法返回承诺，可以用来在它完成时候，执行更多额外任务。
@@ -1588,21 +1578,21 @@ a(href="#top").to-top 回到顶部
### _compileComponents_ 关闭配置
- After `compileComponents` runs, the current `TestBed` instance is closed to further configuration.
+ Calling `compileComponents` closes the current `TestBed` instance is further configuration.
You cannot call any more `TestBed` configuration methods, not `configureTestModule`
nor any of the `override...` methods. The `TestBed` throws an error if you try.
- `compileComponents`运行之后，当前的`TestBed`实例就不能再次被配置了。
+ 调用`compileComponents`关闭当前的`TestBed`实例，使它不能再被配置。
你不能再调用任何`TestBed`配置方法、`configureTestModule`或者任何`override...`方法，否则`TestBed`将会抛出错误。
.alert.is-important
:marked
Do not configure the `TestBed` after calling `compileComponents`.
Make `compileComponents` the last step
- before calling `TestBed.createInstance` to instantiate the _component-under-test_.
+ before calling `TestBed.createComponent` to instantiate the _component-under-test_.
不要再调用`compileComponents`之后再配置`TestBed`。
- 在调用`TestBed.createInstance`来初始化被测试的组件之前，把`compileComponents`的调用放到最后一步。
+ 在调用`TestBed.createComponent`来初始化被测试的组件之前，把`compileComponents`的调用放到最后一步。
:marked
The `DashboardHeroComponent` spec follows the asynchonous `beforeEach` with a
_synchronous_ `beforeEach` that completes the setup steps and runs tests ... as described in the next section.
diff --git a/public/docs/ts/latest/tutorial/toh-pt5.jade b/public/docs/ts/latest/tutorial/toh-pt5.jade
index 2bc441ede9..2caa199f1a 100644
--- a/public/docs/ts/latest/tutorial/toh-pt5.jade
+++ b/public/docs/ts/latest/tutorial/toh-pt5.jade
@@ -40,7 +40,7 @@ block includes
figure.image-display
img(src='/resources/images/devguide/toh/nav-diagram.png' alt="查看导航")
:marked
- We'll add Angular’s *Component Router* to our app to satisfy these requirements.
+ We'll add Angular’s *Router* to our app to satisfy these requirements.
我们将把Angular*路由器*加入应用中，以满足这些需求。(译注：硬件领域中的路由器是用来帮你找到另一台网络设备的，而这里的路由器用于帮你找到一个组件)
@@ -309,7 +309,7 @@ block app-comp-v1
与其自动显示英雄列表，我们更希望在用户点击按钮之后才显示它。
换句话说，我们希望“导航”到英雄列表。
- We'll need the Angular *Component Router*.
+ We'll need the Angular *Router*.
我们需要Angular的*路由器*。
@@ -625,20 +625,12 @@ block redirect-vs-use-as-default
把元数据中的`template`属性替换为`templateUrl`属性，它将指向一个新的模板文件。
+ Set the `moduleId` property to `module.id` for module-relative loading of the `templateUrl`.
+
+ 设置`moduleId`属性到`module.id`，相对模块加载`templateUrl`。
+
+makeExcerpt('app/dashboard.component.ts', 'templateUrl')
-.l-sub-section
- block templateUrl-path-resolution
- :marked
- We specify the path _all the way back to the application root_ —
- `app/` in this case —
- because Angular doesn't support relative paths _by default_.
- We _can_ switch to [component-relative paths](../cookbook/component-relative-paths.html) if we prefer.
-
- 我们指定的所有路径_都是相对于该应用的根目录 - 这里是`app/`。
- 因为Angular_默认_不支持使用相对于当前模块的路径。
- 只要喜欢，我们也_可以_切换成[相对于组件的路径](../cookbook/component-relative-paths.html)模式。
-
:marked
Create that file with this content:
@@ -888,7 +880,7 @@ block route-params
- var _ActivatedRoute = _docsFor == 'dart' ? 'RouteParams' : 'ActivatedRoute'
:marked
- Let's have the `!{_ActivatedRoute}` service and the `HeroService` injected
+ Let's have the `!{_ActivatedRoute}` service, the `HeroService` and the `Location` service injected
into the constructor, saving their values in private fields:
然后注入`!{_ActivatedRoute}`和`HeroService`服务到构造函数中，将它们的值保存到私有变量中：
@@ -958,7 +950,8 @@ block extract-id
但当我们完工时，我们该导航到那里呢？
The user could click one of the two links in the `AppComponent`. Or click the browser's back button.
- We'll add a third option, a `goBack` method that navigates backward one step in the browser's history stack.
+ We'll add a third option, a `goBack` method that navigates backward one step in the browser's history stack
+ using the `Location` service we injected previously.
现在用户可以点击`AppComponent`中的两个链接，或点击浏览器的“后退”按钮。
我们来添加第三个选项：一个`goBack`方法，来根据浏览器的历史堆栈，后退一步。
@@ -1199,19 +1192,17 @@ figure.image-display
1. 把样式内容*剪切并粘贴*到新的heroes.component.css文件。
1. *Set* the component metadata's `templateUrl` and `styleUrls` properties to refer to both files.
+ 1. *Set* the `moduleId` property to `module.id` so that 'templateUrl` and `styleUrls` are relative to the component.
1. *设置*组件元数据的`templateUrl`和`styleUrls`属性，来分别引用这两个文件。
.l-sub-section
:marked
The `styleUrls` property is !{_an} !{_array} of style file names (with paths).
- We could list multiple style files from different locations if we needed them.
- As with `templateUrl`, we must specify the path _all the way
- back to the application root_.
+ We could list multiple style files from different locations if we needed them.
`styleUrls`属性是一个由样式文件的文件名(包括路径)组成的数组。
- 我们还可以列出来自多个不同位置的样式文件。
- 和`templateUrl`一样，必须指定_相对于此应用根目录_的路径。
+ 我们还可以列出来自多个不同位置的样式文件。
block heroes-component-cleanup
//- Only relevant for Dart.
@@ -1473,7 +1464,7 @@ block file-tree-end
在本章中，我们往前走了很远：
- - We added the Angular *Component Router* to navigate among different components.
+ - We added the Angular *Router* to navigate among different components.
- 我们添加了Angular*路由器*在各个不同组件之间导航。
diff --git a/public/resources/images/devguide/lifecycle-hooks/hooks-in-sequence.png b/public/resources/images/devguide/lifecycle-hooks/hooks-in-sequence.png
new file mode 100644
index 0000000000..128d8673af
Binary files /dev/null and b/public/resources/images/devguide/lifecycle-hooks/hooks-in-sequence.png differ