diff --git a/public/docs/ts/latest/guide/architecture.jade b/public/docs/ts/latest/guide/architecture.jade
index e2114124e9..8871061048 100644
--- a/public/docs/ts/latest/guide/architecture.jade
+++ b/public/docs/ts/latest/guide/architecture.jade
@@ -420,13 +420,13 @@ figure
Here is the `@Component` decorator, which identifies the class
immediately below it as a component class.
- 这里看到`@Component`!{_decoratorCn}，它把紧随其后的类标记成了组件类。
+ 这里看到`@Component`装饰器，它把紧随其后的类标记成了组件类。
:marked
The `@Component` decorator takes a required configuration object with the
information Angular needs to create and present the component and its view.
- `@Component`!{_decoratorCn}能接受一个配置对象， Angular 会基于这些信息创建和展示组件及其视图。
+ `@Component`装饰器能接受一个配置对象， Angular 会基于这些信息创建和展示组件及其视图。
Here are a few of the most useful `@Component` configuration options:
@@ -468,8 +468,8 @@ figure
Apply other metadata decorators in a similar fashion to guide Angular behavior.
`@Injectable`, `@Input`, and `@Output` are a few of the more popular decorators.
- 其它元数据!{_decoratorCn}用类似的方式来指导 Angular 的行为。
- 例如`@Injectable`、`@Input`和`@Output`等是一些最常用的!{_decoratorCn}。
+ 其它元数据装饰器用类似的方式来指导 Angular 的行为。
+ 例如`@Injectable`、`@Input`和`@Output`等是一些最常用的装饰器。
:marked
The architectural takeaway is that you must add metadata to your code
@@ -586,7 +586,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`装饰器实际上就是一个`@Directive`装饰器，只是扩展了一些面向模板的特性。
.l-sub-section
diff --git a/public/docs/ts/latest/guide/dependency-injection.jade b/public/docs/ts/latest/guide/dependency-injection.jade
index f7a151c7f0..f79a829c28 100644
--- a/public/docs/ts/latest/guide/dependency-injection.jade
+++ b/public/docs/ts/latest/guide/dependency-injection.jade
@@ -934,7 +934,7 @@ code-example(format="nocode").
:marked
### The *Provider* class and _provide_ object literal
- ### *Provider*类!{_andProvideFnCn}
+ ### *Provider*类和一个提供商的字面量
:marked
You wrote the `providers` array like this:
@@ -962,7 +962,7 @@ code-example(format="nocode").
which you can think of as a *recipe* for creating the dependency value.
There are many ways to create dependency values just as there are many ways to write a recipe.
- 第二个是!{_secondParamCn}。
+ 第二个是一个提供商定义对象。
可以把它看做是指导如何创建依赖值的*配方*。
有很多方式创建依赖值…… 也有很多方式可以写配方。
@@ -1302,7 +1302,8 @@ a#injection-token
to define and use an InjectionToken.
The definition of such a token looks like this:
- 解决方案是定义和使用 !{opaquetoken}（不透明的令牌）。定义方式类似于这样：
+ 解决方案是为非类依赖定义和使用InjectionToken作为提供商令牌。
+ 定义方式是这样的：
+makeExample('dependency-injection/ts/src/app/app.config.ts','token')(format='.')
:marked
@@ -1328,7 +1329,7 @@ a#injection-token
Although the `AppConfig` interface plays no role in dependency injection,
it supports typing of the configuration object within the class.
- 虽然`Config`!{configType}接口在依赖注入过程中没有任何作用，但它为该类中的配置对象提供了强类型信息。
+ 虽然`AppConfig`接口在依赖注入过程中没有任何作用，但它为该类中的配置对象提供了强类型信息。
:marked
Aternatively, you can provide and inject the configuration object in an ngModule like `AppModule`.
diff --git a/public/docs/ts/latest/guide/displaying-data.jade b/public/docs/ts/latest/guide/displaying-data.jade
index a0fddc0d1d..e73524bf4e 100644
--- a/public/docs/ts/latest/guide/displaying-data.jade
+++ b/public/docs/ts/latest/guide/displaying-data.jade
@@ -248,7 +248,8 @@ figure.image-display
repeat items for any [iterable](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols) object.
本例中，`ngFor`用于显示一个“数组”，
- 但`ngFor`可以为任何[可迭代的 (iterable) ](!{_iterableUrl})对象重复渲染条目。
+ 但`ngFor`可以为任何[可迭代的 (iterable) ](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols)对象重复渲染条目。
+
:marked
Now the heroes appear in an unordered list.
@@ -281,7 +282,7 @@ figure.image-display
Create a new file in the `app` folder called `hero.ts` with the following code:
- 在`!{_appDir}`目录下创建一个名叫的新文件，内容如下：
+ 在`app`目录下创建一个名叫的新文件，内容如下：
+makeExcerpt('src/app/hero.ts')
diff --git a/public/docs/ts/latest/guide/server-communication.jade b/public/docs/ts/latest/guide/server-communication.jade
index 21dc0d6d9f..79d84e3397 100644
--- a/public/docs/ts/latest/guide/server-communication.jade
+++ b/public/docs/ts/latest/guide/server-communication.jade
@@ -196,8 +196,8 @@ block demos-list
The Angular Http client communicates with the server using a familiar HTTP request/response protocol.
The `Http` client is one of a family of services in the Angular HTTP library.
- 我们通过 !{_Angular_Http}客户端，使用熟悉的 HTTP 请求/回应协议与服务器通讯。
- `!{_Http}`客户端是!{_Angular_http_libraryCn}所提供的一系列服务之一。
+ 我们通过 Http 客户端，使用熟悉的 HTTP 请求/回应协议与服务器通讯。
+ `Http`客户端是Angular的HTTP库所提供的一系列服务之一。
.l-sub-section
:marked
@@ -205,7 +205,7 @@ block demos-list
the Angular HTTP library
because the `systemjs.config.js` file maps to that module name.
- 当我们从`@angular/http`模块中导入服务时，SystemJS 知道该如何从 !{_Angular_http_libraryCn}中加载它们，
+ 当我们从`@angular/http`模块中导入服务时，SystemJS 知道该如何从Angular的HTTP库中加载它们，
这是因为`systemjs.config.js`文件已经注册过这个模块名。
:marked
@@ -261,7 +261,7 @@ block http-providers
我们的第一个演示是《英雄指南(TOH)》[教程](../tutorial)的一个迷你版。
这个版本从服务器获取一些英雄，把它们显示在列表中，还允许我们添加新的英雄并将其保存到服务器。
- 借助 !{_Angular_Http}客户端，我们通过`XMLHttpRequest (XHR)`与服务器通讯。
+ 借助 Angular 的 `Http` 客户端，我们通过`XMLHttpRequest (XHR)`与服务器通讯。
It works like this:
@@ -317,7 +317,7 @@ a#HeroListComponent
The component doesn't know or care how it gets the data.
It delegates to the `HeroService`.
- 这个组件**不会直接和 !{_Angular_Http}客户端打交道**！
+ 这个组件**不会直接和 Angular 的 `Http` 客户端打交道**！
它既不知道也不关心我们如何获取数据，这些都被委托给了`HeroService`去做。
This is a golden rule: **always delegate data access to a supporting service class**.
@@ -347,7 +347,7 @@ block getheroes-and-create
The service's `getHeroes()` and `create()` methods return an `Observable` of hero data that the Angular Http client fetched from the server.
服务的`getHeroes()`和`addHero()`方法返回一个英雄数据的可观察对象 (`Observable`)，
- 这些数据是由 !{_Angular_Http}从服务器上获取的。
+ 这些数据是由 Angular 的 `Http` 客户端从服务器上获取的。
Think of an `Observable` as a stream of events published by some source.
To listen for events in this stream, ***subscribe*** to the `Observable`.
@@ -381,7 +381,7 @@ a#HeroService
:marked
You can revise that `HeroService` to get the heroes from the server using the Angular Http client service:
- 在本章中，我们会修改`HeroService`，改用 !{_Angular_Http}客户端服务来从服务器上获取英雄列表：
+ 在本章中，我们会修改`HeroService`，改用 Angular 的 `Http` 客户端来从服务器上获取英雄列表：
+makeExample('server-communication/ts/src/app/toh/hero.service.ts', 'v1', 'src/app/toh/hero.service.ts (revised)')
@@ -389,14 +389,14 @@ a#HeroService
Notice that the Angular Http client service is
[injected](dependency-injection.html) into the `HeroService` constructor.
- 注意，这个 !{_Angular_Http}客户端服务[被注入](dependency-injection.html)到了`HeroService`的构造函数中。
+ 注意，这个 Angular `Http` 客户端服务[被注入](dependency-injection.html)到了`HeroService`的构造函数中。
+makeExample('server-communication/ts/src/app/toh/hero.service.ts', 'ctor')
:marked
Look closely at how to call `http.get`:
- 仔细看看我们是如何调用`!{_priv}http.get`的
+ 仔细看看我们是如何调用`http.get`的
+makeExample('server-communication/ts/src/app/toh/hero.service.ts', 'http-get', 'src/app/toh/hero.service.ts (getHeroes)')(format=".")
:marked
@@ -487,7 +487,7 @@ a#extract-data
Remember that the `getHeroes()` method used an `extractData()` helper method to map the `http.get` response object to heroes:
- 记住，`getHeroes()`借助一个`!{_priv}extractData`辅助方法来把`!{_priv}http.get`的响应对象映射成了英雄列表：
+ 记住，`getHeroes()`借助一个`extractData`辅助方法来把`http.get`的响应对象映射成了英雄列表：
+makeExample('server-communication/ts/src/app/toh/hero.service.ts', 'extract-data', 'src/app/toh/hero.service.ts (excerpt)')(format=".")
@@ -721,7 +721,7 @@ a#json-results
As with `getHeroes()`, use the `extractData()` helper to [extract the data](#extract-data)
from the response.
- 像`getHeroes()`中一样，我们可以使用`!{_priv}extractData()`辅助函数从响应中[提取出数据](#extract-data)。
+ 像`getHeroes()`中一样，我们可以使用`extractData()`辅助函数从响应中[提取出数据](#extract-data)。
block hero-list-comp-add-hero
:marked
@@ -832,7 +832,7 @@ h2#cors 跨域请求：Wikipedia 范例
You just learned how to make `XMLHttpRequests` using the Angular Http service.
This is the most common approach to server communication, but it doesn't work in all scenarios.
- 我们刚刚学习了用 !{_Angular_Http}服务发起`XMLHttpRequests`。
+ 我们刚刚学习了用 Angular `Http` 服务发起`XMLHttpRequests`。
这是与服务器通讯时最常用的方法。
但它不适合所有场景。
diff --git a/public/docs/ts/latest/guide/setup.jade b/public/docs/ts/latest/guide/setup.jade
index 4f5814deb3..937fafbe48 100644
--- a/public/docs/ts/latest/guide/setup.jade
+++ b/public/docs/ts/latest/guide/setup.jade
@@ -18,13 +18,13 @@ a#develop-locally
Setting up a new project on your machine is quick and easy with the **QuickStart seed**,
maintained [on github](https://github.com/angular/quickstart "Install the github QuickStart repo").
- 利用 [github 上](!{_qsRepo} "安装 github 《快速起步》库")的**《快速起步》种子**在你的电脑上搭建一个新项目是很快很容易的。
+ 利用 [github 上](https://github.com/angular/quickstart "安装 github 《快速起步》库")的**《快速起步》种子**在你的电脑上搭建一个新项目是很快很容易的。
:marked
Make sure you have [node and npm installed](#install-prerequisites "What if you don't have node and npm?").
Then ...
- 确定你已经安装了 [!{_prereq_cn}](#install-prerequisites "如果你没有 !{_prereq_cn}？")，然后：
+ 确定你已经安装了 [node和npm](#install-prerequisites "如果你没有node和npm？")，然后：
1. Create a project folder (you can call it `quickstart` and rename it later).
@@ -36,11 +36,11 @@ a#develop-locally
1. Install [npm](#install-prerequisites "What if you don't have node and npm?") packages.
- 安装 [!{_npm}](#install-prerequisites "如果你没有 !{_prereq} ？") 包。
+ 安装 [npm](#install-prerequisites "如果你没有 node和npm ？") 包。
1. Run `npm start` to launch the sample application.
- 运行`!{_npm} !{_start}`来启动例子应用。
+ 运行`npm start`来启动例子应用。
a#clone
:marked
@@ -71,7 +71,7 @@ a#download
Download the QuickStart seed
and unzip it into your project folder. Then perform the remaining steps with these terminal commands.
- 下载《快速起步》种子
+ 下载《快速起步》种子
并解压到你的项目目录中。然后执行下面的命令完成剩余步骤。
code-example(language="sh" class="code-shell").
diff --git a/public/docs/ts/latest/tutorial/toh-pt5.jade b/public/docs/ts/latest/tutorial/toh-pt5.jade
index 42f284bf72..d087cc93cf 100644
--- a/public/docs/ts/latest/tutorial/toh-pt5.jade
+++ b/public/docs/ts/latest/tutorial/toh-pt5.jade
@@ -635,7 +635,7 @@ a#configure-routes
* Inject the `HeroService` in the constructor and hold it in a private `heroService` field.
- 在构造函数中注入`HeroService`，并且把它保存在一个私有的`!{_priv}heroService`字段中。
+ 在构造函数中注入`HeroService`，并且把它保存在一个私有的`heroService`字段中。
* Call the service to get heroes inside the Angular `ngOnInit()` lifecycle hook.
@@ -797,7 +797,7 @@ code-example(format="nocode").
Inject the `ActivatedRoute`, `HeroService`, and `Location` services
into the constructor, saving their values in private fields:
- 然后注入`!{_ActivatedRoute}`和`HeroService`服务到构造函数中，将它们的值保存到私有变量中：
+ 然后注入`ActivatedRoute`和`HeroService`服务到构造函数中，将它们的值保存到私有变量中：
+makeExample('toh-5/ts/src/app/hero-detail.component.ts', 'ctor', 'src/app/hero-detail.component.ts (constructor)')
@@ -899,8 +899,8 @@ code-example(format="nocode").
Read more on the [CanDeactivate](../api/router/index/CanDeactivate-interface.html) page.
回退太多步会跑出我们的应用。
- 在演示程序中，这算不上问题。但在真实的应用中，我们需要对此进行防范。
- 也许你该用[!{_CanDeactivateGuard}](../api/!{_CanDeactivateGuardUri}.html).。
+ 在真实的应用中，我们需要使用CanDeactivate守卫对此进行防范。
+ 要了解更多，参见[CanDeactivate](../api/router/index/CanDeactivate-interface.html)。
:marked
You'll wire this method with an event binding to a *Back* button that you'll add to the component template.
@@ -1304,7 +1304,7 @@ figure.image-display
Also, in `hero-detail.component.ts`, remove the `hero` property `@Input` decorator
and its import.
- 在`!{_appDir}`目录下添加hero-detail.component.css文件，
+ 在`app`目录下添加hero-detail.component.css文件，
并且在`styleUrls`数组中引用它 —— 就像之前在`DashboardComponent`中做过的那样。
同时删除`hero``@Input`装饰器属性和它的导入语句。
@@ -1332,7 +1332,7 @@ figure.image-display
Add an app.component.css file to the `app` folder with the following content.
- 在`!{_appDir}`目录下添加一个app.component.css文件，内容如下：
+ 在`app`目录下添加一个app.component.css文件，内容如下：
+makeExample('toh-5/ts/src/app/app.component.css', '', 'src/app/app.component.css (navigation styles)')
@@ -1389,7 +1389,7 @@ figure.image-display
Also edit index.html to refer to this stylesheet.
如果在根目录下没有一个名叫`styles.css`的文件，就添加它。
- 确保它包含[这里给出的主样式](!{styles_css})。
+ 确保它包含[这里给出的主样式](https://raw.githubusercontent.com/angular/angular.io/master/public/docs/_examples/_boilerplate/src/styles.css)。
并编辑`index.html`来引用这个样式表。
+makeExample('toh-5/ts/src/index.html', 'css', 'src/index.html (link ref)')
diff --git a/public/docs/ts/latest/tutorial/toh-pt6.jade b/public/docs/ts/latest/tutorial/toh-pt6.jade
index edf9a97155..1cfdb3f33b 100644
--- a/public/docs/ts/latest/tutorial/toh-pt6.jade
+++ b/public/docs/ts/latest/tutorial/toh-pt6.jade
@@ -97,7 +97,7 @@ h1 提供 HTTP 服务
:marked
Notice that you also supply `HttpModule` as part of the *imports* array in root NgModule `AppModule`.
- 注意，现在`!{_HttpModule}`已经是根模块`AppModule`的`imports`数组的一部分了。
+ 注意，现在`HttpModule`已经是根模块`AppModule`的`imports`数组的一部分了。
.l-main-section
:marked
@@ -397,7 +397,7 @@ h1 提供 HTTP 服务
calling `JSON.stringify`. The body content type
(`application/json`) is identified in the request header.
- 我们通过一个编码在 URL 中的英雄 id 来告诉服务器应该更新哪个英雄。put 的 body 是该英雄的 JSON 字符串，它是通过调用`!{_JSON_stringify}`得到的。
+ 我们通过一个编码在 URL 中的英雄 id 来告诉服务器应该更新哪个英雄。put 的 body 是该英雄的 JSON 字符串，它是通过调用`JSON.stringify`得到的。
并且在请求头中标记出的 body 的内容类型（`application/json`）。
Refresh the browser, change a hero name, save your change,