diff --git a/public/docs/ts/latest/cookbook/component-communication.jade b/public/docs/ts/latest/cookbook/component-communication.jade
index 726b90c205..2d432056a6 100644
--- a/public/docs/ts/latest/cookbook/component-communication.jade
+++ b/public/docs/ts/latest/cookbook/component-communication.jade
@@ -126,7 +126,7 @@ figure.image-display
Detect and act upon changes to input property values with the `ngOnChanges()` method of the `OnChanges` lifecycle hook interface.
- 使用`OnChanges`生命周期钩子接口的`ngOnChanges`方法来监测输入属性值的变化并做出回应。
+ 使用`OnChanges`生命周期钩子接口的`ngOnChanges()`方法来监测输入属性值的变化并做出回应。
.l-sub-section
:marked
diff --git a/public/docs/ts/latest/cookbook/form-validation.jade b/public/docs/ts/latest/cookbook/form-validation.jade
index ad11e0a262..ece87e9a42 100644
--- a/public/docs/ts/latest/cookbook/form-validation.jade
+++ b/public/docs/ts/latest/cookbook/form-validation.jade
@@ -706,7 +706,7 @@ a#committing-changes
The `onSubmit()` method simply replaces the `hero` object with the combined values of the form:
- `onSubmit`方法直接使用表单的值得合集来替换`hero`对象：
+ `onSubmit()`方法直接使用表单的值得合集来替换`hero`对象：
+makeExample('cb-form-validation/ts/src/app/reactive/hero-form-reactive.component.ts','on-submit')(format='.')
.l-sub-section
:marked
@@ -717,7 +717,7 @@ a#committing-changes
:marked
The `addHero()` method discards pending changes and creates a brand new `hero` model object.
- `addHero`方法放弃未处理的变化，并创建一个崭新的`hero`模型对象。
+ `addHero()`方法放弃未处理的变化，并创建一个崭新的`hero`模型对象。
+makeExample('cb-form-validation/ts/src/app/reactive/hero-form-reactive.component.ts','add-hero')(format='.')
:marked
Then it calls `buildForm()` again which replaces the previous `heroForm` control model with a new one.
diff --git a/public/docs/ts/latest/cookbook/i18n.jade b/public/docs/ts/latest/cookbook/i18n.jade
index ede709a368..0e206ae8b8 100644
--- a/public/docs/ts/latest/cookbook/i18n.jade
+++ b/public/docs/ts/latest/cookbook/i18n.jade
@@ -759,7 +759,7 @@ a#create-translation-providers
1. The `getTranslationsWithSystemJs()` method reads the translation and returns the contents as a string.
Notice that it appends `!text` to the filename, telling SystemJS to use the [text plugin](#text-plugin).
- `getTranslationsWithSystemJs`方法读取翻译并以字符串的形式返回其内容。
+ `getTranslationsWithSystemJs()`方法读取翻译并以字符串的形式返回其内容。
注意它在文件名上附加`!text`，告诉SystemJS使用[文本插件](#text-plugin)。
1. The callback composes a providers array with the three translation providers.
@@ -779,7 +779,7 @@ a#bootstrap-the-app
The Angular `bootstrapModule()` method has a second _options_ parameter
that can influence the behavior of the compiler.
- Angular的`bootstrapModule`方法接受**可选的**第二参数，它可以影响编译器的行为。
+ Angular的`bootstrapModule()`方法接受**可选的**第二参数，它可以影响编译器的行为。
You'll create an _options_ object with the translation providers from `getTranslationProviders()`
and pass it to `bootstrapModule`.
diff --git a/public/docs/ts/latest/glossary.jade b/public/docs/ts/latest/glossary.jade
index 602d60a99d..252c8099be 100644
--- a/public/docs/ts/latest/glossary.jade
+++ b/public/docs/ts/latest/glossary.jade
@@ -271,7 +271,7 @@ a#component
the root of filenames (such as `hero-list.component.ts`) are often
spelled in dash-case.
- [指令](#directive)的选择器（例如`my-app`）和文件名（例如`hero-list.component.ts`）通常是用中线命名法来命名。
+ [指令](#directive)的选择器（例如`my-app`）和文件名（例如`hero-list.component.ts`）通常是用中线命名法来命名。
:marked
## Data binding
@@ -301,7 +301,7 @@ a#component
Read about the following forms of binding in the [Template Syntax](./template-syntax.html) page:
- 更多的绑定形式，见[模板语法](!{docsLatest}/guide/template-syntax.html#data-binding)：
+ 更多的绑定形式，见[模板语法](./template-syntax.html#data-binding)：
* [Interpolation](./template-syntax.html#interpolation)
@@ -619,12 +619,12 @@ a#H
Data values flow *into* this property from the data source identified
in the template expression to the right of the equal sign.
- 输入属性是一个指令属性，可以作为[属性绑定 (property binding)](!{docsLatest}/guide/template-syntax.html#property-binding)的目标。
+ 输入属性是一个指令属性，可以作为[属性绑定 (property binding)](./template-syntax.html#property-binding)的目标。
数据值会从模板表达式等号右侧的数据源流入这个属性。
See the [Input and output properties](./template-syntax.html#inputs-outputs) section of the [Template Syntax](./template-syntax.html) page.
- 见[模板语法](!{docsLatest}/guide/template-syntax.html)中的[输入与输出属性](!{docsLatest}/guide/template-syntax.html#inputs-outputs)。
+ 见[模板语法](./template-syntax.html)中的[输入与输出属性](./template-syntax.html#inputs-outputs)。
:marked
## Interpolation
@@ -649,7 +649,7 @@ a#H
Read more about [interpolation](./template-syntax.html#interpolation) in the
[Template Syntax](./template-syntax.html) page.
- 更多信息，见[模板语法](!{docsLatest}/guide/template-syntax.html)中的[插值表达式](!{docsLatest}/guide/template-syntax.html#interpolation)。
+ 更多信息，见[模板语法](./template-syntax.html)中的[插值表达式](./template-syntax.html#interpolation)。
.l-main-section#J
@@ -760,7 +760,7 @@ a#jit
* [Angular modules](#angular-module).
For details and examples, see the [Angular Modules](./ngmodule.html) page.
- [Angular 模块](#angular-module)，见[Angular 模块](!{docsLatest}/guide/ngmodule.html)。
+ [Angular 模块](#angular-module)，见[Angular 模块](./ngmodule.html)。
* ES2015 modules, as described in this section.
@@ -899,7 +899,7 @@ a#N
You can also write your own custom pipes.
Read more in the page on [pipes](./pipes.html).
- 更多信息，见[管道](!{docsLatest}/guide/pipes.html)。
+ 更多信息，见[管道](./pipes.html)。
:marked
## Provider
@@ -973,7 +973,7 @@ a#Q
The Angular component router is a richly featured mechanism for configuring and managing the entire view navigation process, including the creation and destruction
of views.
- Angular 的[组件路由器 (component router)](!{docsLatest}/guide/router.html)是一个特性丰富的机制，可以配置和管理整个导航过程，包括建立和销毁视图。
+ Angular 的组件路由器是一个特性丰富的机制，可以配置和管理整个导航过程，包括建立和销毁视图。
In most cases, components become attached to a router by means
of a `RouterConfig` that defines routes to views.
@@ -992,7 +992,7 @@ a#Q
For more information, see the [Routing & Navigation](./router.html) page.
- 更多信息，见[路由与导航](!{docsLatest}/guide/router.html)。
+ 更多信息，见[路由与导航](./router.html)。
:marked
## Router module
@@ -1007,7 +1007,7 @@ a#Q
For more information, see the [Routing & Navigation](./router.html) page.
- 更多信息，见[路由与导航](!{docsLatest}/guide/router.html)。
+ 更多信息，见[路由与导航](./router.html)。
:marked
## Routing component
@@ -1022,7 +1022,7 @@ a#Q
For more information, see the [Routing & Navigation](./router.html) page.
- 更多信息，见[路由与导航](!{docsLatest}/guide/router.html)。
+ 更多信息，见[路由与导航](./router.html)。
.l-main-section#S
@@ -1116,7 +1116,7 @@ a#structural-directives
Read more in the [Structural Directives](./structural-directives.html) page.
- 更多信息，见[结构型指令](!{docsLatest}/guide/structural-directives.html)。
+ 更多信息，见[结构型指令](./structural-directives.html)。
// #enddocregion n-s-2
@@ -1175,7 +1175,7 @@ a#structural-directives
Read about how to build template-driven forms
in the [Forms](./forms.html) page.
- 更多信息，见[表单](!{docsLatest}/guide/forms.html)。
+ 更多信息，见[表单](./forms.html)。
:marked
## Template expression
@@ -1206,7 +1206,9 @@ a#structural-directives
The process of transforming code written in one form of JavaScript
(such as TypeScript) into another form of JavaScript (such as [ES5](#es5)).
- 把一种形式的 JavaScript（例如 TypeScript）转换成另一种形式的 JavaScript（例如 [ES5](#es5)）的过程。:marked
+ 把一种形式的 JavaScript（例如 TypeScript）转换成另一种形式的 JavaScript（例如 [ES5](#es5)）的过程。
+
+:marked
## TypeScript
.l-sub-section
diff --git a/public/docs/ts/latest/guide/dependency-injection.jade b/public/docs/ts/latest/guide/dependency-injection.jade
index b88e077f0c..62049ae775 100644
--- a/public/docs/ts/latest/guide/dependency-injection.jade
+++ b/public/docs/ts/latest/guide/dependency-injection.jade
@@ -726,7 +726,7 @@ a#service-needs-service
You call that property within the `getHeroes()` method when anyone asks for heroes.
现在，这个构造函数要求注入一个`Logger`类的实例，并把它存到名为`logger`的私有属性中。
- 当别人请求英雄数据时，在`getHeroes`方法中调用这个属性的方法。
+ 当别人请求英雄数据时，在`getHeroes()`方法中调用这个属性的方法。
a#injectable
:marked
@@ -1415,7 +1415,7 @@ a#injection-token
You can call `get()` with a second parameter, which is the value to return if the service
is not found. Angular can't find the service if it's not registered with this or any ancestor injector.
- `get`方法如果不能解析所请求的服务，会抛出异常。
+ `get()`方法如果不能解析所请求的服务，会抛出异常。
调用`get`时，还可以使用第二个参数，一旦获取的服务 (`ROUS`) 没有在当前或任何祖先注入器中注册过，
就把它作为返回值。
.l-sub-section
diff --git a/public/docs/ts/latest/guide/hierarchical-dependency-injection.jade b/public/docs/ts/latest/guide/hierarchical-dependency-injection.jade
index 679bc00d58..fd64f5c5c9 100644
--- a/public/docs/ts/latest/guide/hierarchical-dependency-injection.jade
+++ b/public/docs/ts/latest/guide/hierarchical-dependency-injection.jade
@@ -107,7 +107,7 @@ figure.image-display
All requests bubble up to the root NgModule injector that you configured with the `bootstrapModule` method.
如果我们只在顶级（通常是根模块`AppModule`），这三个注入器看起来将是“平面”的。
- 所有的申请都会冒泡到根NgModule进行处理，也就是我们在`!{_bootstrapModule}`方法中配置的那个。
+ 所有的申请都会冒泡到根NgModule进行处理，也就是我们在`bootstrapModule`方法中配置的那个。
.l-main-section
:marked
diff --git a/public/docs/ts/latest/guide/index.jade b/public/docs/ts/latest/guide/index.jade
index 654b8660df..524a203f28 100644
--- a/public/docs/ts/latest/guide/index.jade
+++ b/public/docs/ts/latest/guide/index.jade
@@ -49,7 +49,7 @@ table(width="100%")
A first taste of Angular with zero installation.
Run "Hello World" in an online code editor and start playing with live code.
- 零配置第一次尝试 Angular 在在线代码编辑器中运行 “Hello World”，并利用在线代码开始体验。
+ 零配置第一次尝试 Angular 在在线代码编辑器中运行 “Hello World”，并利用在线代码开始体验。
tr(style=top)
td
diff --git a/public/docs/ts/latest/guide/lifecycle-hooks.jade b/public/docs/ts/latest/guide/lifecycle-hooks.jade
index 6cef2ef399..843d2ec08e 100644
--- a/public/docs/ts/latest/guide/lifecycle-hooks.jade
+++ b/public/docs/ts/latest/guide/lifecycle-hooks.jade
@@ -376,8 +376,9 @@ table(width="100%")
Implements an `ngDoCheck()` method with custom change detection.
See how often Angular calls this hook and watch it post changes to a log.
- 实现了一个`ngDoCheck`方法，通过它可以自定义变更检测逻辑。
+ 实现了一个`ngDoCheck()`方法，通过它可以自定义变更检测逻辑。
这里将会看到：Angular会用什么频度调用这个钩子，监视它的变化，并把这些变化输出成一条日志。
+
tr(style='vertical-align:top')
td AfterView
td
@@ -548,11 +549,11 @@ figure.image-display
*Reset*按钮清除了这个`heroes`列表。
Angular从DOM中移除了所有英雄的div，并且同时销毁了附加在这些div上的侦探指令。
- 侦探的`ngOnDestroy`方法汇报了它自己的临终时刻。
+ 侦探的`ngOnDestroy()`方法汇报了它自己的临终时刻。
The `ngOnInit()` and `ngOnDestroy()` methods have more vital roles to play in real applications.
- 在真实的应用程序中，`ngOnInit`和`ngOnDestroy`方法扮演着更重要的角色。
+ 在真实的应用程序中，`ngOnInit()`和`ngOnDestroy()`方法扮演着更重要的角色。
a#oninit
:marked
@@ -612,14 +613,14 @@ a#oninit
Angular calls `ngOnChanges()` before `ngOnInit()` and many times after that.
It only calls `ngOnInit()` once.
- 我们访问这些属性的第一次机会，实际上是`ngOnChanges`方法，Angular会在`ngOnInit`之前调用它。
- 但是在那之后，Angular还会调用`ngOnChanges`很多次。而`ngOnInit`只会被调用一次。
+ 我们访问这些属性的第一次机会，实际上是`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.
- 你可以信任Angular会在创建组件后立刻调用`ngOnInit`方法。
+ 你可以信任Angular会在创建组件后立刻调用`ngOnInit()`方法。
这里是放置复杂初始化逻辑的好地方。
a#ondestroy
@@ -651,7 +652,7 @@ a#onchanges
Angular calls its `ngOnChanges()` method whenever it detects changes to ***input properties*** of the component (or directive).
在这个例子中，我们监听了`OnChanges`钩子。
- 一旦检测到该组件(或指令)的***输入属性***发生了变化，Angular就会调用它的`ngOnChanges`方法。
+ 一旦检测到该组件(或指令)的***输入属性***发生了变化，Angular就会调用它的`ngOnChanges()`方法。
This example monitors the `OnChanges` hook.
@@ -663,7 +664,7 @@ a#onchanges
[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)对象，
+ `ngOnChanges()`方法获取了一个对象，它把每个发生变化的属性名都映射到了一个[SimpleChange](../api/core/index/SimpleChange-class.html)对象，
该对象中有属性的当前值和前一个值。我们在这些发生了变化的属性上进行迭代，并记录它们。
The example component, `OnChangesComponent`, has two input properties: `hero` and `power`.
@@ -801,14 +802,14 @@ a#wait-a-tick
The `doSomething()` method updates the screen when the hero name exceeds 10 characters.
- 当英雄的名字超过10个字符时，`doSomething`方法就会更新屏幕。
+ 当英雄的名字超过10个字符时，`doSomething()`方法就会更新屏幕。
+makeExample('lifecycle-hooks/ts/src/app/after-view.component.ts', 'do-something', 'AfterViewComponent (doSomething)')(format=".")
:marked
Why does the `doSomething()` method wait a tick before updating `comment`?
- 为什么在更新`comment`属性之前，`doSomething`方法要等上一拍(tick)？
+ 为什么在更新`comment`属性之前，`doSomething()`方法要等上一拍(tick)？
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.
@@ -949,7 +950,7 @@ a#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`属性。
+ 该组件的`doSomething()`方法立即更新了组件被绑定的`comment`属性。
它[不用等](#wait-a-tick)下一回合。
Recall that Angular calls both *AfterContent* hooks before calling either of the *AfterView* hooks.
diff --git a/public/docs/ts/latest/guide/pipes.jade b/public/docs/ts/latest/guide/pipes.jade
index 764d461bee..85c67c9ae3 100644
--- a/public/docs/ts/latest/guide/pipes.jade
+++ b/public/docs/ts/latest/guide/pipes.jade
@@ -599,7 +599,7 @@ h3#async-pipe The impure #[i AsyncPipe]
我们确实得小心点。
这个管道只有当所请求的URL发生变化时才会向服务器发起请求。它会缓存服务器的响应。
- 代码如下，它使用[Angular http](server-communication.html)客户端来接收数据
+ 代码如下，它使用[Angular http](server-communication.html)客户端来接收数据
+makeExample('src/app/fetch-json.pipe.ts')
:marked
diff --git a/public/docs/ts/latest/guide/router.jade b/public/docs/ts/latest/guide/router.jade
index 25925d6cba..c67f8bf01c 100644
--- a/public/docs/ts/latest/guide/router.jade
+++ b/public/docs/ts/latest/guide/router.jade
@@ -2764,10 +2764,6 @@ a#add-secondary-route
You are in effect saying, _when the user clicks this link, display the component associated with the `compose` route in the `popup` outlet_.
- 要使用`Router`进行相对导航，可以使用`ActivatedRoute`来告诉路由器我们正在*RouterState*中的什么地方，*RouterState*是激活路由组成的树。
- 要做到这一点，我们可以为`router.navigate`方法中*链接参数数组*后的对象型参数指定**relativeTo**属性。
- 只要把这个`relativeTo`属性设置为我们的`ActivatedRoute`，路由器就会把我们的导航信息和当前URL合并在一起。
-
.l-sub-section
:marked
This `outlets` object within an outer object was completely unnecessary
@@ -3369,7 +3365,7 @@ a#CanDeactivate
wanted to use this guard for this component and needed to get
the component's properties or confirm whether the router should allow navigation away from it.
- 另外，我们也可以为`CrisisDetailComponent`创建一个特定的`CanDeactivate`守卫。在需要访问外部信息时，`canDeactivate`方法为提供了组件、`ActivatedRoute`和`RouterStateSnapshot`的当前实例。如果只想为这个组件使用该守卫，并且需要使用该组件属性、或者需要路由器确认是否允许从该组件导航出去时，这个守卫就非常有用。
+ 另外，我们也可以为`CrisisDetailComponent`创建一个特定的`CanDeactivate`守卫。在需要访问外部信息时，`canDeactivate()`方法为提供了组件、`ActivatedRoute`和`RouterStateSnapshot`的当前实例。如果只想为这个组件使用该守卫，并且需要使用该组件属性、或者需要路由器确认是否允许从该组件导航出去时，这个守卫就非常有用。
+makeExcerpt('src/app/can-deactivate-guard.service.1.ts (component-specific)', '')
diff --git a/public/docs/ts/latest/guide/security.jade b/public/docs/ts/latest/guide/security.jade
index 4233bd066a..ac4d5c6432 100644
--- a/public/docs/ts/latest/guide/security.jade
+++ b/public/docs/ts/latest/guide/security.jade
@@ -442,7 +442,10 @@ code-example(language="typescript").
参见Dave Smith在AngularConnect 2016关于XSRF的演讲。
-h3#xssi Cross-site script inclusion (XSSI)h3#xssi 跨站脚本包含(XSSI)
+h3#xssi Cross-site script inclusion (XSSI)
+
+h3#xssi 跨站脚本包含(XSSI)
+
:marked
Cross-site script inclusion, also known as JSON vulnerability, can allow an attacker's website to
read data from a JSON API. The attack works on older browsers by overriding native JavaScript
diff --git a/public/docs/ts/latest/guide/server-communication.jade b/public/docs/ts/latest/guide/server-communication.jade
index 2fa630b07b..f27e4f6642 100644
--- a/public/docs/ts/latest/guide/server-communication.jade
+++ b/public/docs/ts/latest/guide/server-communication.jade
@@ -432,7 +432,7 @@ a#HeroService
In fact, the `http.get` method returns an **Observable** of HTTP Responses (`Observable`) from the RxJS library
and `map()` is one of the RxJS *operators*.
- 事实上，`http.get`方法返回了一个 HTTP Response 类型的**可观察对象** (`Observable`)，这个对象来自 RxJS 库，而`map`是 RxJS 的*操作符*之一。
+ 事实上，`http.get`方法返回了一个 HTTP Response 类型的**可观察对象** (`Observable`)，这个对象来自 RxJS 库，而`map()`是 RxJS 的*操作符*之一。
a#rxjs-library
.l-main-section
@@ -474,7 +474,7 @@ a#rxjs-library
The `getHeroes()` method needs the `map()` and `catch()` operators so it imports them like this.
每个代码文件都需要把它需要的操作符从RxJS库中导入，并添加进来。
- `getHeroes`方法需要一个`map`和一个`catch`操作符，那就像这样导入它：
+ `getHeroes()`方法需要一个`map()`和一个`catch()`操作符，那就像这样导入它：
+makeExample('server-communication/ts/src/app/toh/hero.service.ts', 'rxjs-imports', 'src/app/app.component.ts (import rxjs)')(format=".")
@@ -605,7 +605,7 @@ block error-handling
The `handleError` method transforms the error into a developer-friendly message,
logs it to the console, and returns the message in a new, failed Observable via `Observable.throw`.
- `catch`操作符将错误对象传递给`http`的`handleError`方法。
+ `catch()`操作符将错误对象传递给`http`的`handleError()`方法。
服务处理器 (`handleError`) 把响应对象记录到控制台中，
把错误转换成对用户友好的消息，并且通过`Observable.throw`来把这个消息放进一个新的、用于表示“失败”的可观察对象。
@@ -710,7 +710,7 @@ a#headers
In the `return` statement, `options` is the *third* argument of the `post()` method, as shown above.
- 在`return`声明中，`options`是传给`post`方法的*第三个*参数，就像前面见过的那样。
+ 在`return`声明中，`options`是传给`post()`方法的*第三个*参数，就像前面见过的那样。
a#json-results
:marked
@@ -799,7 +799,7 @@ h2#promises 倒退为承诺 (Promise)
The only obvious difference is that you call `then()` on the returned Promise instead of `subscribe`.
Both methods take the same functional arguments.
- 唯一一个比较明显的不同点是我们调用这个返回的承诺的`then`方法，而不再是`subscribe`。
+ 唯一一个比较明显的不同点是我们调用这个返回的承诺的`then()`方法，而不再是`subscribe`。
我们给了这两个方法完全相同的调用参数。
.l-sub-section
:marked
@@ -809,14 +809,14 @@ h2#promises 倒退为承诺 (Promise)
The Promise-based `then()` returns another Promise. You can keep chaining more `then()` and `catch()` calls, getting a new promise each time.
- 基于承诺的`then`返回了另一个承诺。我们可以链式调用多个`then`和`catch`方法，每次都返回一个新的承诺。
+ 基于承诺的`then()`返回了另一个承诺。我们可以链式调用多个`then()`和`catch()`方法，每次都返回一个新的承诺。
The `subscribe()` method returns a `Subscription`. A `Subscription` is not another `Observable`.
It's the end of the line for Observables. You can't call `map()` on it or call `subscribe()` again.
The `Subscription` object has a different purpose, signified by its primary method, `unsubscribe`.
- 但`subscribe`方法返回一个`Subscription`对象。但`Subscription`不是另一个`Observable`。
- 它是可观察对象的末端。我们不能在它上面调用`map`函数或再次调用`subscribe`函数。
+ 但`subscribe()`方法返回一个`Subscription`对象。但`Subscription`不是另一个`Observable`。
+ 它是可观察对象的末端。我们不能在它上面调用`map()`函数或再次调用`subscribe()`函数。
`Subscription`对象的设计目的是不同的，这从它的主方法`unsubscribe`就能看出来。
To understand the implications and consequences of subscriptions, watch [Ben Lesh's talk on Observables](https://www.youtube.com/watch?v=3LKMwkuK0ZE) or his video course on [egghead.io](https://egghead.io/lessons/rxjs-rxjs-observables-vs-promises).
@@ -1112,7 +1112,7 @@ block wikipedia-jsonp+
The `search()` method adds each new search box value to that stream via the subject's `next()` method.
组件创建`searchTermStream`为`string`类型的`Subject`。
- `search`方法通过`subject`的`next`方法，将每个新搜索框的值添加到数据流中。
+ `search()`方法通过`subject`的`next()`方法，将每个新搜索框的值添加到数据流中。
+makeExample('server-communication/ts/src/app/wiki/wiki-smart.component.ts', 'subject')(format='.')
@@ -1316,7 +1316,7 @@ block redirect-to-web-api
The `forRoot()` method name is a strong reminder that you should only call the `InMemoryWebApiModule` _once_,
while setting the metadata for the root `AppModule`. Don't call it again.
- `forRoot`方法的名字告诉我们，应该只在设置根模块`AppModule`时调用`InMemoryWebApiModule`*一次*。不要再次调用它。
+ `forRoot()`方法的名字告诉我们，应该只在设置根模块`AppModule`时调用`InMemoryWebApiModule`*一次*。不要再次调用它。
:marked
Here is the final, revised version of src/app/app.module.ts, demonstrating these steps.
diff --git a/public/docs/ts/latest/guide/template-syntax.jade b/public/docs/ts/latest/guide/template-syntax.jade
index febf140535..ac3750d04c 100644
--- a/public/docs/ts/latest/guide/template-syntax.jade
+++ b/public/docs/ts/latest/guide/template-syntax.jade
@@ -154,6 +154,7 @@ a#html
我们首先看看数据绑定的第一种形式 —— 插值表达式，它展示了模板的 HTML 可以有多丰富。
a(href="#toc") back to top
+a(href="#toc") 回到顶部
.l-hr
a#interpolation
@@ -220,6 +221,7 @@ a#interpolation
讲解属性绑定之前，先深入了解一下模板表达式和模板语句。
a(href="#toc") back to top
+a(href="#toc") 回到顶部
.l-hr
a#template-expressions
@@ -325,6 +327,7 @@ a#expression-context
members of the expression context.
a(href="#toc") back to top
+a(href="#toc") 回到顶部
a#no-side-effectsa#expression-guidelines
:marked
@@ -429,7 +432,6 @@ a#no-side-effectsa#expression-guidelines
如果幂等的表达式返回一个对象（包括`Date`或`Array`），连续调用它两次，也应该返回同一个对象的*引用*。
a(href="#toc") back to top
-
a(href="#toc") 回到顶部
.l-hr
@@ -554,6 +556,7 @@ a#template-statements
除插值表达式外，还有各种各样的数据绑定语法，是学习它们是时候了。
a(href="#toc") back to top
+a(href="#toc") 回到顶部
.l-hr
a#binding-syntax
@@ -925,7 +928,6 @@ table(width="100%")
放开眼界，我们来看看每种绑定类型的具体情况。
a(href="#toc") back to top
-
a(href="#toc") 回到顶部
.l-hr
@@ -1643,6 +1645,7 @@ a#custom-event
+makeExample('template-syntax/ts/src/app/app.component.html', 'event-binding-propagation')(format=".")
a(href="#toc") back to top
+a(href="#toc") 回到顶部
.l-hr
a#two-way
@@ -1741,6 +1744,7 @@ a#two-way
幸运的是，Angular 以 [_NgModel_](#ngModel) 指令为桥梁，允许在表单元素上使用双向数据绑定。
a(href="#toc") back to top
+a(href="#toc") 回到顶部
.l-hr
a#directives
@@ -1870,6 +1874,7 @@ a#ngClass
你既可以在初始化时调用`setCurrentClassess()`，也可以在所依赖的属性变化时调用。
a(href="#toc") back to top
+a(href="#toc") 回到顶部
.l-hr
a#ngStyle
@@ -1916,6 +1921,7 @@ a#ngStyle
你既可以在初始化时调用`setCurrentStyles()`，也可以在所依赖的属性变化时调用。
a(href="#toc") back to top
+a(href="#toc") 回到顶部
.l-hr
a#ngModel
@@ -2007,6 +2013,7 @@ figure.image-display
p
a(href="#toc") back to top
+ a(href="#toc") 回到顶部
.l-hr
a#structural-directives
@@ -2291,6 +2298,7 @@ figure.image-display
p
a(href="#toc") back to top
+ a(href="#toc") 回到顶部
.l-hr
a#ngSwitch
@@ -2336,6 +2344,7 @@ figure.image-display
+makeExample('template-syntax/ts/src/app/app.component.html', 'NgSwitch-div')(format=".")
a(href="#toc") back to top
+a(href="#toc") 回到顶部
.l-hr
a#template-reference-variable
@@ -2405,6 +2414,7 @@ a#ref-var
+makeExample('template-syntax/ts/src/app/app.component.html', 'ref-fax')(format=".")
a(href="#toc") back to top
+a(href="#toc") 回到顶部
.l-hr
a#inputs-outputs
@@ -2604,6 +2614,7 @@ h3#aliasing-io
+makeExample('template-syntax/ts/src/app/click.directive.ts', 'output-myClick2')(format=".")
a(href="#toc") back to top
+a(href="#toc") 回到顶部
.l-hr
a#expression-operators
@@ -2674,6 +2685,7 @@ code-example(language="json").
"rate": 325 }
a(href="#toc") back to top
+a(href="#toc") 回到顶部
.l-hr
a#safe-navigation-operator
@@ -2785,6 +2797,7 @@ code-example(language="html").
在像`a?.b?.c?.d`这样的长属性路径中，它工作得很完美。
a(href="#toc") back to top
+a(href="#toc") 回到顶部
.l-hr
:marked
diff --git a/public/docs/ts/latest/guide/testing.jade b/public/docs/ts/latest/guide/testing.jade
index 2c86bb609f..79d113ab26 100644
--- a/public/docs/ts/latest/guide/testing.jade
+++ b/public/docs/ts/latest/guide/testing.jade
@@ -591,8 +591,10 @@ a#component-fixture
The `title` property value is interpolated into the DOM within `` tags.
Use the fixture's `DebugElement` to `query` for the `` element by CSS selector.
+
`title`属性被插值到DOM的``标签中。
用CSS选择器从fixture的`DebugElement`中`query```元素。
+
The **`query`** method takes a predicate function and searches the fixture's entire DOM tree for the
_first_ element that satisfies the predicate.
The result is a _different_ `DebugElement`, one associated with the matching DOM element.
@@ -601,7 +603,9 @@ a#component-fixture
.l-sub-section
:marked
The `queryAll` method returns an array of _all_ `DebugElements` that satisfy the predicate.
+
`queryAll`方法返回一列数组，包含所有`DebugElement`中满足predicate的元素。
+
A _predicate_ is a function that returns a boolean.
A query predicate receives a `DebugElement` and returns `true` if the element meets the selection criteria.
**predicate**是返回布尔值的函数。
@@ -1000,9 +1004,11 @@ a#welcome-spec-setup
The second parameter to the Jasmine `it` (e.g., `'expected name'`) is an optional addendum.
If the expectation fails, Jasmine displays this addendum after the expectation failure message.
In a spec with multiple expectations, it can help clarify what went wrong and which expectation failed .
- Jasmine的`it`方法的第二个参数（比如`'expected name'`）是可选附加参数。
+
+ Jasmine的`it`方法的第二个参数（比如`'expected name'`）是可选附加参数。
如果这个期待失败了，Jasmine在期待失败信息后面显示这个附加参数。
在拥有多个期待的spec中，它可以帮助澄清发生了什么错误，哪个期待失败了。
+
:marked
The remaining tests confirm the logic of the component when the service returns different values.
The second test validates the effect of changing the user name.
@@ -1144,6 +1150,7 @@ a#when-stable
### _whenStable_
## **whenStable**
+
The test must wait for the `getQuote` promise to resolve in the next turn of the JavaScript engine.
测试程序必须等待`getQuote`在JavaScript引擎的下一回合中被解析。
@@ -1153,9 +1160,13 @@ a#when-stable
probes only the component API surface.
本测试对`twainService.getQuote`返回的承诺没有直接的访问，因为它被埋没在`TwainComponent.ngOnInit`里，
- 所以对于只测试组件API表面的测试来说，它是无法被访问的。Fortunately, the `getQuote` promise is accessible to the _async test zone_ ,
+ 所以对于只测试组件API表面的测试来说，它是无法被访问的。
+
+ Fortunately, the `getQuote` promise is accessible to the _async test zone_ ,
which intercepts all promises issued within the _async_ method call _no matter where they occur_.
+
幸运的是，**异步测试区域**可以访问`getQuote`承诺，因为它拦截所有调用**异步**方法所发出的承诺，不管它们在哪儿。
+
The `ComponentFixture.whenStable` method returns its own promise, which resolves when the `getQuote` promise finishes.
In fact, the _whenStable_ promise resolves when _all pending asynchronous activities within this test_ complete — the definition of "stable."
@@ -1728,22 +1739,28 @@ a#routed-component-w-param
`HeroDetailComponent` subscribes to `ActivatedRoute.params` changes in its `ngOnInit` method.
`HeroDetailComponent`在它的`ngOnInit`方法中监听`ActivatedRoute.params`的变化。
+
+makeExample('testing/ts/src/app/hero/hero-detail.component.ts', 'ng-on-init', 'src/app/hero/hero-detail.component.ts (ngOnInit)')(format='.')
.l-sub-section
:marked
The expression after `route.params` chains an _Observable_ operator that _plucks_ the `id` from the `params`
and then chains a `forEach` operator to subscribe to `id`-changing events.
The `id` changes every time the user navigates to a different hero.
+
`route.params`之后的表达式链接了**可观察**操作符，它从`params`中提取`id`，然后链接`forEach`操作符来订阅`id`变化事件。
每次`id`变化时，用户被导航到不同的英雄。
+
The `forEach` passes the new `id` value to the component's `getHero` method (not shown)
which fetches a hero and sets the component's `hero` property.
If the`id` parameter is missing, the `pluck` operator fails and the `catch` treats failure as a request to edit a new hero.
+
`forEach`将新的`id`值传递到组件的`getHero`方法（这里没有列出来），它获取英雄并将它赋值到组件的`hero`属性。
如果`id`参数无效，`pluck`操作符就会失败，`catch`将失败当作创建新英雄来处理。
+
The [Router](router.html#route-parameters) guide covers `ActivatedRoute.params` in more detail.
[路由器](router.html#route-parameters)章更详尽的讲述了`ActivatedRoute.params`。
+
:marked
A test can explore how the `HeroDetailComponent` responds to different `id` parameter values
by manipulating the `ActivatedRoute` injected into the component's constructor.
@@ -1767,10 +1784,12 @@ a#stub-observable
This is a cross-application, re-usable _test helper class_.
Consider placing such helpers in a `testing` folder sibling to the `app` folder.
This sample keeps `ActivatedRouteStub` in `testing/router-stubs.ts`:
+
`hero-detail.component.spec.ts`依赖`ActivatedRouteStub`来为每个测试程序设置`ActivatedRoute.params`值。
它是跨应用、可复用的**测试辅助类**。
我们建议将这样的辅助类放到`app`目录下的名为`testing`的目录。
本例把`ActivatedRouteStub`放到`testing/router-stubs.ts`：
+
+makeExample('testing/ts/src/testing/router-stubs.ts', 'activated-route-stub', 'testing/router-stubs.ts (ActivatedRouteStub)')(format='.')
:marked
Notable features of this stub are:
@@ -1922,6 +1941,7 @@ figure.image-display
A `createComponent` method creates a `page` objectand fills in the blanks once the `hero` arrives.
`createComponent`方法创建`page`，在`hero`到来时，自动填补空白。
+
+makeExample('testing/ts/src/app/hero/hero-detail.component.spec.ts', 'create-component', 'src/app/hero/hero-detail.component.spec.ts (createComponent)')(format='.')
:marked
@@ -2126,6 +2146,7 @@ a#override-component-method
Focus on the `overrideComponent` method.
注意这个`overrideComponent`方法。
+
+makeExample('testing/ts/src/app/hero/hero-detail.component.spec.ts', 'override-component-method', 'src/app/hero/hero-detail.component.spec.ts (overrideComponent)')(format='.')
:marked
It takes two arguments: the component type to override (`HeroDetailComponent`) and an override metadata object.
@@ -2197,8 +2218,10 @@ a#more-overrides
The `TestBed.overrideComponent` method can be called multiple times for the same or different components.
The `TestBed` offers similar `overrideDirective`, `overrideModule`, and `overridePipe` methods
for digging into and replacing parts of these other classes.
+
`TestBed.overrideComponent`方法可以在相同或不同的组件中被反复调用。
`TestBed`还提供了类似的`overrideDirective`、`overrideModule`和`overridePipe`方法，用来深入并重载这些其它类的部件。
+
Explore the options and combinations on your own.
自己探索这些选项和组合。
@@ -3087,6 +3110,7 @@ table
(`null` in this example):
`TestBed.get`方法接受一个可选的第二参数，它是在Angular找不到所需提供商时返回的对象。（在本例中为`null`）：
+
+makeExample('testing/ts/src/app/bag/bag.spec.ts', 'testbed-get')(format=".")
:marked
After calling `get`, the `TestBed` configuration is frozen for the duration of the current spec.
@@ -3513,9 +3537,13 @@ a#query-predicate
:marked
Many custom application directives inject the `Renderer` and call one of its `set...` methods.
- 很多制定应用程序指令注入`Renderer`并调用它其中一个方法`set...`。The test environment substitutes the `DebugDomRender` for the runtime `Renderer`.
+ 很多制定应用程序指令注入`Renderer`并调用它其中一个方法`set...`。
+
+ The test environment substitutes the `DebugDomRender` for the runtime `Renderer`.
The `DebugDomRender` updates additional dictionary properties of the `DebugElement`
- when something calls a `set...` method.运行时的`Renderer`在测试环境中的替代品为`DebugDomRender`。
+ when something calls a `set...` method.
+
+ 运行时的`Renderer`在测试环境中的替代品为`DebugDomRender`。
在调用`set...`方法时，`DebugDomRender`更新`DebugElement`额外词典属性。
These dictionary properties are primarily of interest to authors of Angular DOM inspection tools
diff --git a/public/docs/ts/latest/quickstart.jade b/public/docs/ts/latest/quickstart.jade
index 14b10d0bb2..e33db9fc88 100644
--- a/public/docs/ts/latest/quickstart.jade
+++ b/public/docs/ts/latest/quickstart.jade
@@ -24,7 +24,7 @@ block qs-src-online-and-local
Every component begins with an `@Component` [decorator](glossary.html#decorator '"decorator" explained')
function that takes a _metadata_ object. The metadata object describes how the HTML template and component class work together.
- 每个组件都以`@Component`[装饰器](glossary.html#!{_decorator} '"!{_decorator}" explained')函数开始，它接受一个_元数据_对象参数。该元素对象描述了 HTML 模板和组件类是如何一起工作的。
+ 每个组件都以`@Component`[装饰器](glossary.html#!{_decorator} '"!{_decorator}" explained')函数开始，它接受一个_元数据_对象参数。该元素对象描述了 HTML 模板和组件类是如何一起工作的。
The `selector` property tells Angular to display the component inside a custom `` tag in the `index.html`.
diff --git a/public/docs/ts/latest/tutorial/toh-pt5.jade b/public/docs/ts/latest/tutorial/toh-pt5.jade
index 9e6b6ffc2f..77af071498 100644
--- a/public/docs/ts/latest/tutorial/toh-pt5.jade
+++ b/public/docs/ts/latest/tutorial/toh-pt5.jade
@@ -203,9 +203,10 @@ code-example(language="sh" class="code-shell").
* Create the file src/app/app.component.ts.
创建一个名叫src/app/app.component.ts的新文件。
+
* Define an exported `AppComponent` class.
- 定义一个导出的 `AppComponent`类。
+ 定义一个导出的 `AppComponent`类。
* Add an `@Component` decorator above the class with a `my-app` selector.
@@ -642,7 +643,7 @@ a#configure-routes
In this dashboard you specify four heroes (2nd, 3rd, 4th, and 5th) with the `Array.slice` method.
- 在仪表盘中我们用`Array.slice`方法提取了四个英雄（第2、3、4、5个）。
+ 在仪表盘中我们用`Array.slice`方法提取了四个英雄（第2、3、4、5个）。
Refresh the browser to see four hero names in the new dashboard.
@@ -1305,7 +1306,7 @@ figure.image-display
在`!{_appDir}`目录下添加hero-detail.component.css文件，
并且在`styleUrls`数组中引用它 —— 就像之前在`DashboardComponent`中做过的那样。
- 同时删除`hero``@Input`装饰器属性和它的导入语句。
+ 同时删除`hero``@Input`装饰器属性和它的导入语句。
Here's the content for the component CSS files.
diff --git a/public/docs/ts/latest/tutorial/toh-pt6.jade b/public/docs/ts/latest/tutorial/toh-pt6.jade
index ac46f29715..edf9a97155 100644
--- a/public/docs/ts/latest/tutorial/toh-pt6.jade
+++ b/public/docs/ts/latest/tutorial/toh-pt6.jade
@@ -730,6 +730,8 @@ a#ngoninit
Even with a 300ms pause between requests, you could have multiple HTTP requests in flight
and they may not return in the order sent.
+ 借助[switchMap操作符](http://www.learnrxjs.io/operators/transformation/switchmap.html)
+ (正式名称是`flatMapLatest`)
每次符合条件的按键事件都会触发一次对`http`方法的调用。即使在发送每个请求前都有 300 毫秒的延迟，
我们仍然可能同时拥有多个在途的 HTTP 请求，并且它们返回的顺序未必就是发送时的顺序。
@@ -737,8 +739,8 @@ a#ngoninit
only the observable from the most recent `http` method call.
Results from prior calls are canceled and discarded.
- `switchMap`保留了原始的请求顺序，并且只返回最近一次 `http` 调用返回的可观察对象。
- 这是因为以前的调用都被取消或丢弃了。
+ `switchMap()`保留了原始的请求顺序，并且只返回最近一次 `http` 调用返回的可观察对象。
+ 这是因为以前的调用都被取消或丢弃了。
If the search text is empty, the `http()` method call is also short circuited
and an observable containing an empty array is returned.
@@ -752,6 +754,7 @@ a#ngoninit
注意，_取消_`HeroSearchService`的可观察对象并不会实际中止 (abort) 一个未完成的 HTTP 请求，
除非服务支持这个特性，这个问题我们以后再讨论。
目前我们的做法只是丢弃不希望的结果。
+
:marked
* `catch` intercepts a failed observable.
The simple example prints the error to the console; a real life app would do better.