code-example(language="html").
@@ -612,12 +612,12 @@ figure
:marked
There are two *other* kinds of directives as well that we call "structural" and "attribute" directives.
- 有两种*其它*类型的指令，我们称之为“结构型”指令和“属性（attribute）型”指令。
+ 有两种*其它*类型的指令，我们称之为“结构型”指令和“属性(attribute)型”指令。
They tend to appear within an element tag like attributes,
sometimes by name but more often as the target of an assignment or a binding.
- 它们往往像属性(attribute)一样出现在元素标签中，偶尔会以名字的形式出现（参见[一次性绑定](./template-syntax.html#one-time-initialization)），但多数时候还是作为赋值目标或绑定目标出现。
+ 它们往往像属性(attribute)一样出现在元素标签中，偶尔会以名字的形式出现(参见[一次性绑定](./template-syntax.html#one-time-initialization))，但多数时候还是作为赋值目标或绑定目标出现。
**Structural** directives alter layout by adding, removing, and replacing elements in DOM.
@@ -651,15 +651,15 @@ figure
It modifies the behavior of an existing element (typically an `
`)
by setting its display value property and responding to change events.
- 它修改了现有元素（典型的`
`)的行为：它设置了显示属性值，并对change事件做出相应回应。
Angular ships with a few other directives that either alter the layout structure
(e.g. [ngSwitch](template-syntax.html#ngSwitch))
or modify aspects of DOM elements and components
(e.g. [ngStyle](template-syntax.html#ngStyle) and [ngClass](template-syntax.html#ngClass)).
- Angular内置了一些其它指令，它们或者修改结构布局（如[ngSwitch](template-syntax.html#ngSwitch)），或者修改DOM元素和组件的各个方面
- （如[ngStyle](template-syntax.html#ngStyle)和[ngClass](template-syntax.html#ngClass)）。
+ Angular内置了一些其它指令，它们或者修改结构布局(如[ngSwitch](template-syntax.html#ngSwitch))，或者修改DOM元素和组件的各个方面
+ (如[ngStyle](template-syntax.html#ngStyle)和[ngClass](template-syntax.html#ngClass))。
And of course we can write our own directives.
@@ -750,7 +750,7 @@ figure
and the application logic (which often includes some notion of a "model"). A good component presents
properties and methods for data binding. It delegates everything non-trivial to services.
- 组件的任务就是提供用户体验，仅此而已。它介于视图（由模板渲染）和应用逻辑（通常包括“模型model”的观念）之间。
+ 组件的任务就是提供用户体验，仅此而已。它介于视图(由模板渲染)和应用逻辑(通常包括“模型model”的观念)之间。
设计良好的组件为数据绑定提供属性和方法，把那些其他对它们不重要的事情都委托给服务。
Angular doesn't *enforce* these principles.
@@ -842,7 +842,7 @@ figure
... in which case we get a new instance of the
service with each new instance of that component.
- ... 在这种情况下，那个组件的每一个新实例都会有一个（在该组件注册的）服务的新实例。
+ ... 在这种情况下，那个组件的每一个新实例都会有一个(在该组件注册的)服务的新实例。
We've vastly over-simplified dependency injection for this overview.
We can learn the full story in the [Dependency Injection](dependency-injection.html) chapter.
@@ -940,7 +940,7 @@ figure
Most of them are covered in this Developers Guide (or soon will be):
这里是一个简短的、按字母排序的列表，列出了其它重要的Angular特性和服务。
- 它们大多数已经（或即将）包括在这个《开发指南》中：
+ 它们大多数已经(或即将)包括在这个《开发指南》中：
>**Animations** - A forthcoming animation library makes it easy for developers to animate component behavior
without deep knowledge of animation techniques or css.
diff --git a/public/docs/ts/latest/guide/attribute-directives.jade b/public/docs/ts/latest/guide/attribute-directives.jade
index 4c948b18df..f05914fae4 100644
--- a/public/docs/ts/latest/guide/attribute-directives.jade
+++ b/public/docs/ts/latest/guide/attribute-directives.jade
@@ -76,7 +76,7 @@ p 试用#[+liveExampleLink2("在线例子")]。
Besides, we're not just *setting* the color; we'll be *changing* the color
in response to a user action, a mouse hover.
- 再说，我们不仅要*设置*颜色，还要响应用户的动作（鼠标悬浮），来*更改*这个颜色。
+ 再说，我们不仅要*设置*颜色，还要响应用户的动作(鼠标悬浮)，来*更改*这个颜色。
.l-main-section
a#write-directive
@@ -570,12 +570,12 @@ a#why-input
A property is a *source* if it appears in the template expression to the ***right*** of the equals (=).
在以前的所有绑定中，指令或组件的属性都是绑定***源***。
- 如果属性出现在了模板表达式等号（=）的***右侧***，它就是一个*源*。
+ 如果属性出现在了模板表达式等号(=)的***右侧***，它就是一个*源*。
A property is a *target* when it appears in **square brackets** ([ ]) to the **left** of the equals (=) ...
as it is does when we bind to the `myHighlight` property of the `HighlightDirective`,
- 如果它出现在了**方括号**（[ ]）中，并且出现在等号（=）的**左侧**，它就是一个*目标*……
+ 如果它出现在了**方括号**([ ])中，并且出现在等号(=)的**左侧**，它就是一个*目标*……
就像在我们绑定到`HighlightDirective`的`myHighlight`属性时所做的那样。
+makeExample('attribute-directives/ts/app/app.component.html','pHost')(format=".")
:marked
@@ -609,7 +609,7 @@ a#why-input
Not just the one or two properties we expected them to target. *Every* property.
That could really mess up our directive in ways we didn't anticipate and have no desire to support.
- 出乎意料的是，有些人（可能因为太天真）开始绑定到这个指令中的*每一个*属性。
+ 出乎意料的是，有些人(可能因为太天真)开始绑定到这个指令中的*每一个*属性。
不仅仅是我们期望被作为目标使用的那一两个属性，而是*每一个*。
这可能会扰乱指令的工作方式 —— 我们既不想这样做也不想支持他们这样做。
diff --git a/public/docs/ts/latest/guide/cheatsheet-cn.json b/public/docs/ts/latest/guide/cheatsheet-cn.json
index d611e056ae..5e43fb6ade 100644
--- a/public/docs/ts/latest/guide/cheatsheet-cn.json
+++ b/public/docs/ts/latest/guide/cheatsheet-cn.json
@@ -68,7 +68,7 @@
"bold": [
"(click)"
],
- "description": "
",
@@ -312,14 +312,14 @@
"bold": [
"@HostBinding('[class.valid]')"
],
- "description": "
把宿主元素的属性（比如CSS类：valid）绑定到指令/组件的属性（比如：isValid）。
\n"
+ "description": "
把宿主元素的属性(比如CSS类：valid)绑定到指令/组件的属性(比如：isValid)。
\n"
},
{
"syntax": "@HostListener('click', ['$event']) onClick(e) {...}",
"bold": [
"@HostListener('click', ['$event'])"
],
- "description": "
通过指令/组件的方法（例如onClick）订阅宿主元素的事件（例如click），可选传入一个参数（$event）。
\n"
+ "description": "
通过指令/组件的方法(例如onClick)订阅宿主元素的事件(例如click)，可选传入一个参数($event)。
\n"
},
{
"syntax": "@ContentChild(myPredicate) myChildComponent;",
@@ -483,42 +483,42 @@
"bold": [
"@CanActivate"
],
- "description": "
用函数定义的一个组件装饰器，路由器会先调用它来检测是否应该激活该组件。应该返回布尔值或承诺（Promise）。
\n"
+ "description": "
用函数定义的一个组件装饰器，路由器会先调用它来检测是否应该激活该组件。应该返回布尔值或承诺(Promise)。
\n"
},
{
"syntax": "routerOnActivate(nextInstruction, prevInstruction) { ... }",
"bold": [
"routerOnActivate"
],
- "description": "
导航到一个组件之后，路由器调用该组件的routerOnActivate方法（如已定义）。
\n"
+ "description": "
导航到一个组件之后，路由器调用该组件的routerOnActivate方法(如已定义)。
\n"
},
{
"syntax": "routerCanReuse(nextInstruction, prevInstruction) { ... }",
"bold": [
"routerCanReuse"
],
- "description": "
路由器调用组件的routerCanReuse方法（如已定义）来检测是复用本实例还是销毁它并创建一个新的。应该返回布尔值或承诺（Promise）。
\n"
+ "description": "
路由器调用组件的routerCanReuse方法(如已定义)来检测是复用本实例还是销毁它并创建一个新的。应该返回布尔值或承诺(Promise)。
\n"
},
{
"syntax": "routerOnReuse(nextInstruction, prevInstruction) { ... }",
"bold": [
"routerOnReuse"
],
- "description": "
当路由器发现可以复用一个组件实例时，它调用组件的routerOnReuse方法（如已定义）。
\n"
+ "description": "
当路由器发现可以复用一个组件实例时，它调用组件的routerOnReuse方法(如已定义)。
\n"
},
{
"syntax": "routerCanDeactivate(nextInstruction, prevInstruction) { ... }",
"bold": [
"routerCanDeactivate"
],
- "description": "
路由器会调用如果要完成导航就得移除的每个组件的routerCanDeactivate方法（如已定义）。当且仅当所有的该方法都返回true或者承诺（Promise）被解决时，导航才会继续。
\n"
+ "description": "
路由器会调用如果要完成导航就得移除的每个组件的routerCanDeactivate方法(如已定义)。当且仅当所有的该方法都返回true或者承诺(Promise)被解决时，导航才会继续。
\n"
},
{
"syntax": "routerOnDeactivate(nextInstruction, prevInstruction) { ... }",
"bold": [
"routerOnDeactivate"
],
- "description": "
在每个指令因为路由变更而被移除之前调用。可以返回一个承诺，来阻止移除本指令 —— 直到承诺（Promise）被解决。
\n"
+ "description": "
在每个指令因为路由变更而被移除之前调用。可以返回一个承诺，来阻止移除本指令 —— 直到承诺(Promise)被解决。
\n"
}
],
"index": 10
diff --git a/public/docs/ts/latest/guide/component-styles.jade b/public/docs/ts/latest/guide/component-styles.jade
index b6bc03b762..45e9b322f9 100644
--- a/public/docs/ts/latest/guide/component-styles.jade
+++ b/public/docs/ts/latest/guide/component-styles.jade
@@ -115,7 +115,7 @@ a(id="special-selectors")
Use the `:host` pseudo-class selector to target styles in the element that *hosts* the component (as opposed to
targeting elements *inside* the component's template):
- 使用`:host`伪类选择器，用来选择组件*宿主*元素中的元素（相对于组件模板*内部*的元素）。
+ 使用`:host`伪类选择器，用来选择组件*宿主*元素中的元素(相对于组件模板*内部*的元素)。
+makeExample('component-styles/ts/app/hero-details.component.css', 'host')(format='.')
@@ -146,7 +146,7 @@ a(id="special-selectors")
we want to change how our component looks based on that.
有时候，基于某些来自组件视图*外部*的条件应用样式是很有用的。
- 比如，在文档的``元素上可能有一个用于表示样式主题（Theme）的CSS类，而我们应当基于它来决定组件的样式。
+ 比如，在文档的``元素上可能有一个用于表示样式主题(Theme)的CSS类，而我们应当基于它来决定组件的样式。
Use the `:host-context()` pseudo-class selector. It works just like the function
form of `:host()`. It looks for a CSS class in *any ancestor* of the component host element, all the way
@@ -224,7 +224,7 @@ a(id='loading-styles')
Each string in the #{_array} (usually just one string) defines the CSS.
我们可以给`@Component`#{_decoratorCn}添加一个`styles`数组型属性。
- 这个数组中的每一个字符串（通常也只有一个）定义一份CSS。
+ 这个数组中的每一个字符串(通常也只有一个)定义一份CSS。
+makeExample('component-styles/ts/app/hero-app.component.ts')
@@ -349,8 +349,8 @@ a#view-encapsulation
(and renaming) the CSS code to effectively scope the CSS to the component's view.
See [Appendix 1](#inspect-generated-css) for details.
- * `Emulated`模式（**默认值**）通过预处理（并改名）CSS代码来仿真Shadow DOM的行为，以达到把CSS样式局限在组件视图中的目的。
- 参见[附录1](#inspect-generated-css)了解详情。（译注：只进不出，全局样式能进来，组件样式出不去）
+ * `Emulated`模式(**默认值**)通过预处理(并改名)CSS代码来仿真Shadow DOM的行为，以达到把CSS样式局限在组件视图中的目的。
+ 参见[附录1](#inspect-generated-css)了解详情。(译注：只进不出，全局样式能进来，组件样式出不去)
* `None` means that Angular does no view encapsulation.
Angular adds the CSS to the global styles.
@@ -358,7 +358,7 @@ a#view-encapsulation
This is essentially the same as pasting the component's styles into the HTML.
* `None`意味着Angular不使用视图包装。
Angular会把CSS添加到全局样式中。而不会应用上前面讨论过的那些局限化规则、隔离和保护等规则。
- 从本质上来说，这跟把组件的样式直接放进HTML是一样的。（译注：能进能出。）
+ 从本质上来说，这跟把组件的样式直接放进HTML是一样的。(译注：能进能出。)
Set the components encapsulation mode using the `encapsulation` property in the component metadata:
diff --git a/public/docs/ts/latest/guide/dependency-injection.jade b/public/docs/ts/latest/guide/dependency-injection.jade
index ba4f66b03e..9b6fc90142 100644
--- a/public/docs/ts/latest/guide/dependency-injection.jade
+++ b/public/docs/ts/latest/guide/dependency-injection.jade
@@ -222,7 +222,7 @@ block ctor-syntax
We could write a giant class to do that:
- 我们可以写一个巨型类来做这件事（不好的模式）：
+ 我们可以写一个巨型类来做这件事(不好的模式)：
+makeExample('dependency-injection/ts/app/car/car-factory.ts', null, 'app/car/car-factory.ts')
@@ -375,7 +375,7 @@ block ctor-syntax
我们甚至没有假装这是一个真实的服务。
如果我们真的从一个远端服务器获取数据，这个API必须是异步的，可能得返回
- [ES2015 承诺（Promise）](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)。
+ [ES2015 承诺(Promise)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)。
我们也需要被迫重新处理组件如何消费该服务的方式。通常这个很重要，但是我们目前的故事不需要。
:marked
@@ -495,7 +495,7 @@ block ctor-syntax
has `providers` information for `HeroService`.
注意构造函数参数有类型`HeroService`，并且`HeroListComponent`类有一个`@Component`装饰器
- （往上翻可以确认）。另外，记得父级组件（`HeroesComponent`）有`HeroService`的`providers`信息。
+ (往上翻可以确认)。另外，记得父级组件(`HeroesComponent`)有`HeroService`的`providers`信息。
The constructor parameter type, the `@Component` #{_decorator},
and the parent's `providers` information combine to tell the
@@ -658,7 +658,7 @@ block injectable-not-always-needed-in-ts
fact `InjectableMetadata` #{_decorator}s that
identify a class as a target for instantiation by an injector.
- 如果真的想要这样做，我们*可以*添加它。但是这不是必须的，因为`HerosComponent`已经被`@Component`标识，这个装饰器类（像`@Directive`和`@Pipe`一样，我们一会儿将会学到）
+ 如果真的想要这样做，我们*可以*添加它。但是这不是必须的，因为`HerosComponent`已经被`@Component`标识，这个装饰器类(像`@Directive`和`@Pipe`一样，我们一会儿将会学到)
是一个
InjectableMetadata的子类型。实际上，`InjectableMetadata`装饰器标识着一个类是注入器实例化的目标。
@@ -730,7 +730,7 @@ block real-logger
code-example(format="nocode").
EXCEPTION: No provider for Logger! (HeroListComponent -> HeroService -> Logger)
- （异常：Logger类没有供应商！(HeroListComponent -> HeroService -> Logger)）
+ (异常：Logger类没有供应商！(HeroListComponent -> HeroService -> Logger))
:marked
That's Angular telling us that the dependency injector couldn't find the *provider* for the logger.
@@ -862,7 +862,7 @@ block dart-diff-const-metadata
This logger gets the user from the injected `UserService`,
which happens also to be injected at the application level.
- 也许一个`EvenBetterLogger`（更好的日志）可以在日志消息中显示用户名。
+ 也许一个`EvenBetterLogger`(更好的日志)可以在日志消息中显示用户名。
这个日志服务从一个注入进来的`UserService`中取得用户，`UserService`通常也会在应用级被注入。
+makeExample('dependency-injection/ts/app/providers.component.ts','EvenBetterLogger')(format='.')
@@ -1125,7 +1125,7 @@ block dart-diff-const-metadata-ctor
the address of a web API endpoint) but these configuration objects aren't always instances of a class.
They can be object literals such as this one:
- 应用程序经常为很多很小的因素（比如应用程序的标题，或者一个网络API终点的地址）定义配置对象，但是这些配置对象不总是类的实例。
+ 应用程序经常为很多很小的因素(比如应用程序的标题，或者一个网络API终点的地址)定义配置对象，但是这些配置对象不总是类的实例。
他们可能是对象，比如下面这个：
+makeExample('dependency-injection/ts/app/app.config.ts','config','app/app-config.ts (excerpt)')(format='.')
@@ -1180,7 +1180,7 @@ block what-should-we-use-as-token
to define and use an !{opaquetoken}.
The definition looks like this:
- 解决方案是定义和使用一个!{opaquetoken}（不透明的令牌）。定义方式类似于这样：
+ 解决方案是定义和使用一个!{opaquetoken}(不透明的令牌)。定义方式类似于这样：
+makeExample('dependency-injection/ts/app/app.config.ts','token')(format='.')
@@ -1250,7 +1250,7 @@ block dart-map-alternative
adding a parameter to a constructor.
在本章中，我们学习了Angular依赖注入的基础。
- 我们可以注册很多种类的供应商，还知道了该如何通过添加构造函数的参数来请求一个被注入对象（比如服务）。
+ 我们可以注册很多种类的供应商，还知道了该如何通过添加构造函数的参数来请求一个被注入对象(比如服务)。
Angular dependency injection is more capable than we've described.
We can learn more about its advanced features, beginning with its support for
@@ -1296,7 +1296,7 @@ block dart-map-alternative
to retrieve a service (`ROUS`) that isn't registered with this or any ancestor injector.
`get`方法如果解析不出所请求的服务，它就会抛出一个异常。
- 我们还可以带上第二个参数（如果服务没找到，就把它作为默认值返回）调用`get`，
+ 我们还可以带上第二个参数(如果服务没找到，就把它作为默认值返回)调用`get`，
在该例子中，我们获取了一个服务(`ROUS`)，它没有在这个注入器或它的任何祖先中注册过。
.l-sub-section
:marked
diff --git a/public/docs/ts/latest/guide/displaying-data.jade b/public/docs/ts/latest/guide/displaying-data.jade
index 7720f539bb..994fb7e11c 100644
--- a/public/docs/ts/latest/guide/displaying-data.jade
+++ b/public/docs/ts/latest/guide/displaying-data.jade
@@ -132,7 +132,7 @@ include ../_quickstart_repo
We're ready to see changes in a running app by firing up the npm script that both compiles and serves our applications
while watching for changes.
- 通过运行npm脚本（它能编译并启动一个能监视文件变化的服务器），我们能看到运行中的应用发生的变化。
+ 通过运行npm脚本(它能编译并启动一个能监视文件变化的服务器)，我们能看到运行中的应用发生的变化。
code-example(format="").
npm start
:marked
@@ -241,13 +241,13 @@ figure.image-display
it is an example of a [template input variable](./template-syntax.html#ngForMicrosyntax).
注意看`ngFor`双引号表达式中的`hero`。
- 它是一个[模板输入变量](./template-syntax.html#ngForMicrosyntax)（译注：即ngFor模板中从外界输入的变量）。
+ 它是一个[模板输入变量](./template-syntax.html#ngForMicrosyntax)(译注：即ngFor模板中从外界输入的变量)。
Angular duplicates the `
` for each item in the list, setting the `hero` variable
to the item (the hero) in the current iteration. Angular uses that variable as the
context for the interpolation in the double curly braces.
- Angular为列表中的每一个条目复制一个``元素。在每个迭代中，都会把`hero`变量设置为当前条目（此英雄）。
+ Angular为列表中的每一个条目复制一个``元素。在每个迭代中，都会把`hero`变量设置为当前条目(此英雄)。
Angular把`hero`变量作为双花括号插值表达式的上下文。
.l-sub-section
:marked
diff --git a/public/docs/ts/latest/guide/forms.jade b/public/docs/ts/latest/guide/forms.jade
index bea9a62ea0..5aab2713a8 100644
--- a/public/docs/ts/latest/guide/forms.jade
+++ b/public/docs/ts/latest/guide/forms.jade
@@ -72,7 +72,7 @@ include ../_util-fns
:marked
That's not the only way to create a form but it's the way we'll cover in this chapter.
- 这不是创建表单的唯一方式，但它是我们将在本章中使用的方式。（译注：Angular支持的另一种方式叫做模型驱动表单Model-Driven Forms）
+ 这不是创建表单的唯一方式，但它是我们将在本章中使用的方式。(译注：Angular支持的另一种方式叫做模型驱动表单Model-Driven Forms)
:marked
We can build almost any form we need with an Angular template — login forms, contact forms ... pretty much any business forms.
@@ -169,7 +169,7 @@ figure.image-display
Create a new project folder (`angular2-forms`) and follow the steps in the [QuickStart](../quickstart.html).
- 创建一个新的项目文件夹（`angular2-forms`），并且完成[“快速起步”](../quickstart.html)中的步骤。
+ 创建一个新的项目文件夹(`angular2-forms`)，并且完成[“快速起步”](../quickstart.html)中的步骤。
include ../_quickstart_repo
:marked
@@ -188,7 +188,7 @@ include ../_quickstart_repo
and one optional field (`alterEgo`).
最简单的模型就是一个“属性包”，用来存放应用中一件事物的事实。
- 这里我们使用三个必备字段（`id`、`name`、`power`），和一个可选字段（`alterEgo`，译注：中文含义：第二人格，比如X战警中的Jean/黑凤凰）。
+ 这里我们使用三个必备字段(`id`、`name`、`power`)，和一个可选字段(`alterEgo`，译注：中文含义：第二人格，比如X战警中的Jean/黑凤凰)。
Create a new file in the app folder called `hero.ts` and give it the following class definition:
@@ -208,7 +208,7 @@ include ../_quickstart_repo
The `alterEgo` is optional and the constructor lets us omit it; note the (?) in `alterEgo?`.
- `alterEgo`是可选的，构造函数允许我们省略它，注意`alterEgo?`中的问号（?）。
+ `alterEgo`是可选的，构造函数允许我们省略它，注意`alterEgo?`中的问号(?)。
We can create a new hero like this:
@@ -287,7 +287,7 @@ code-example(format="").
We also like short files with a clear and obvious purpose like this one.
没有什么答案在所有场合都总是“正确”的。当内联模板足够短的时候，我们更喜欢用它。
- 但大多数的表单模板都不短。普遍来讲，TypeScript和JavaScript文件不是写大型HTML的好地方（也不好读）。
+ 但大多数的表单模板都不短。普遍来讲，TypeScript和JavaScript文件不是写大型HTML的好地方(也不好读)。
而且没有几个编辑器能对混写的HTML和代码提供足够的帮助。
我们还是喜欢写成像这个一样清晰明确的短文件。
@@ -331,7 +331,7 @@ code-example(format="").
1. The `directives` array tells Angular that our template depends upon the `HeroFormComponent`
which is itself a Directive (as are all Components).
- 1. `directives`数组告诉Angular，我们的模板依赖于`HeroFormComponent`组件，它本身也是一个指令（所有组件都是指令）。
+ 1. `directives`数组告诉Angular，我们的模板依赖于`HeroFormComponent`组件，它本身也是一个指令(所有组件都是指令)。
.l-main-section
:marked
@@ -612,7 +612,7 @@ figure.image-display
the event handling such as debounce or throttle the key strokes.
很高兴知道这些，但是这样现实吗？实践上我们几乎总是优先使用`[(ngModel)]`形式的双向绑定。
- 只有当我们不得不在事件处理函数中做一些特别的事情（比如合并或限制按键频率）时，才需要拆分出独立的事件处理函数。
+ 只有当我们不得不在事件处理函数中做一些特别的事情(比如合并或限制按键频率)时，才需要拆分出独立的事件处理函数。
Learn more about `NgModel` and other template syntax in the
[Template Syntax](./template-syntax.html) chapter.
@@ -670,7 +670,7 @@ figure.image-display
我们模板中的这个`ngControl`*属性*实际上被映射到了 [NgControlName](../api/common/index/NgControlName-directive.html)指令。
虽然还有另一个叫`NgControl`的*抽象*指令，但和这个属性不是一回事。
- 我们通常会忽略这点技术上的差异。为了更方便（尽管不正确），我们提起`NgControlName`时还是会把它叫做*NgControl*指令。
+ 我们通常会忽略这点技术上的差异。为了更方便(尽管不正确)，我们提起`NgControlName`时还是会把它叫做*NgControl*指令。
While we're under the hood, we might as well note that the `ngModel` in the
two-way binding syntax is now a property of the `NgControlName` directive.
@@ -894,7 +894,7 @@ figure.image-display
这种用户体验取决于开发人员的选择。有些人会希望任何时候都显示这条消息。
如果忽略了`pristine`状态，我们就会只在值有效时隐藏此消息。
- 如果往这个组件中传入一个全新（空白）的英雄，或者一个无效的英雄，我们将立刻看到错误信息 —— 虽然我们还啥都没做。
+ 如果往这个组件中传入一个全新(空白)的英雄，或者一个无效的英雄，我们将立刻看到错误信息 —— 虽然我们还啥都没做。
Some folks find that behavior disconcerting. They only want to see the message when the user makes an invalid change.
Hiding the message while the control is "pristine" achieves that goal.
@@ -951,7 +951,7 @@ figure.image-display
This time we see an error message! Why? We don't want that when we display a new (empty) hero.
输入一个名字，并再次点击*新增英雄*按钮。
- 这次，我们看到了错误信息！为什么？当我们显示一个新（空白）的英雄时，我们不希望如此。
+ 这次，我们看到了错误信息！为什么？当我们显示一个新(空白)的英雄时，我们不希望如此。
Inspecting the element in the browser tools reveals that the *name* input box is no longer pristine.
Replacing the hero *did not restore the pristine state* of the control.
@@ -1092,7 +1092,7 @@ figure.image-display
:marked
## Toggle two form regions (extra credit)
- ## 切换两个表单区域（额外的荣誉）
+ ## 切换两个表单区域(额外的荣誉)
Submitting the form isn't terribly dramatic at the moment.
diff --git a/public/docs/ts/latest/guide/hierarchical-dependency-injection.jade b/public/docs/ts/latest/guide/hierarchical-dependency-injection.jade
index 1e72f7ddf4..681b5c0d55 100644
--- a/public/docs/ts/latest/guide/hierarchical-dependency-injection.jade
+++ b/public/docs/ts/latest/guide/hierarchical-dependency-injection.jade
@@ -14,7 +14,7 @@ block includes
interesting and useful results.
Angular有一个多级依赖注入系统。
- 实际上，应用程序中有一个与组件树平行的注入器树（译注：平行是指结构完全相同且一一对应）。
+ 实际上，应用程序中有一个与组件树平行的注入器树(译注：平行是指结构完全相同且一一对应)。
我们可以在组件树中的任何级别上重新配置注入器，达到一些有趣和有用的效果。
In this chapter we explore these points and write some code.
@@ -58,7 +58,7 @@ p 试试#[+liveExampleLink2("在线例子")].
But it is true that every component ***has an injector*** (even if it shares that injector with another component)
and there may be many different injector instances operating at different levels of the component tree.
- 但是，每个组件都**有一个注入器**是真实的（就算它与其它组件共享注入器，也是*有注入器*），并且确实可能会有大量不同的注入器实例工作在组件树的不同级别。
+ 但是，每个组件都**有一个注入器**是真实的(就算它与其它组件共享注入器，也是*有注入器*)，并且确实可能会有大量不同的注入器实例工作在组件树的不同级别。
It is useful to pretend that every component has its own injector.
@@ -129,9 +129,9 @@ figure.image-display
This child is the parent of another component (C) that defines its own provider for `Car`.
让我们回到“汽车(Car)”类的例子。
- 假设“根注入器”（记为A）配置过`Car`、`Engine`和`Tires`的供应商。
- 然后创建了一个子组件（B），它为`Car`和`Engine`类定义了自己的供应商。
- 这个子组件（B）又有另一个子组件（C），（C）也为`Car`定义了自己的供应商。
+ 假设“根注入器”(记为A)配置过`Car`、`Engine`和`Tires`的供应商。
+ 然后创建了一个子组件(B)，它为`Car`和`Engine`类定义了自己的供应商。
+ 这个子组件(B)又有另一个子组件(C)，(C)也为`Car`定义了自己的供应商。
Behind the scenes each component sets up its own injector with one or more providers defined for that component itself.
@@ -141,8 +141,8 @@ figure.image-display
its injector produces an instance of `Car` resolved by injector (C) with an `Engine` resolved by injector (B) and
`Tires` resolved by the root injector (A).
- 当我们在最底层的组件（C）中试图解析出一个`Car`的实例时，注入器（C）解析出的`Car`类的实例，
- 该`Car`的实例带有一个`Engine`类的实例（由注入器（B）解析出）和一个`Tires`类的实例（由跟注入器（A）解析出）。
+ 当我们在最底层的组件(C)中试图解析出一个`Car`的实例时，注入器(C)解析出的`Car`类的实例，
+ 该`Car`的实例带有一个`Engine`类的实例(由注入器(B)解析出)和一个`Tires`类的实例(由跟注入器(A)解析出)。
figure.image-display
img(src="/resources/images/devguide/dependency-injection/injector-tree.png" alt="injector tree" width="600")
@@ -277,7 +277,7 @@ figure.image-display
scoped to that component instance and its child components.
但很明显，这个场景下我们不希望这样。我们希望每个组件都有它自己的`RestoreService`实例。
- 在组件级别上定义（或重定义）一个供应商，将会为该组件创建一个新的服务实例。
+ 在组件级别上定义(或重定义)一个供应商，将会为该组件创建一个新的服务实例。
我们已经为`HeroEditComponent`制造了一种“私有”`RestoreService`单例，它的作用范围被局限在了该组件的实例及其子组件中。