合并了官方的最新更新

This commit is contained in:
Zhicheng Wang 2016-08-06 20:04:41 +08:00
parent d034bc33c8
commit 251d4ffe6c
8 changed files with 27 additions and 15 deletions

View File

@ -11,7 +11,7 @@ a(id="top")
:marked :marked
**See the Angular 2 syntax in this <live-example name="cb-a1-a2-quick-reference"></live-example>**. **See the Angular 2 syntax in this <live-example name="cb-a1-a2-quick-reference"></live-example>**.
**可到[在线范例](/resources/live-examples/cb-a1-a2-quick-reference/ts/plnkr.html)中查看Angular 2语法**。 **可到<live-example name="cb-a1-a2-quick-reference"></live-example>中查看Angular 2语法**。
## Contents ## Contents

View File

@ -116,7 +116,7 @@ include ../_util-fns
**See the <live-example name="cb-dependency-injection"></live-example>** **See the <live-example name="cb-dependency-injection"></live-example>**
of the code supporting this cookbook. of the code supporting this cookbook.
要获取本“烹饪宝典”的代码,**参见[在线例子](/resources/live-examples/cb-dependency-injection/ts/plnkr.html)**。 要获取本“烹饪宝典”的代码,**参见<live-example name="cb-dependency-injection"></live-example>**。
.l-main-section .l-main-section
@ -927,7 +927,7 @@ a(id='usefactory')
Look at the <live-example name="cb-dependency-injection"></live-example> Look at the <live-example name="cb-dependency-injection"></live-example>
for the full source code. for the full source code.
该函数从`HeroService`获取英雄参赛者,从中取`2`个作为亚军,并把他们的名字拼接起来。请到[在线例子](/resources/live-examples/cb-dependency-injection/ts/plnkr.html)查看全部原代码。 该函数从`HeroService`获取英雄参赛者,从中取`2`个作为亚军,并把他们的名字拼接起来。请到<live-example name="cb-dependency-injection"></live-example>查看全部原代码。
a(id="tokens") a(id="tokens")
.l-main-section .l-main-section
@ -1200,7 +1200,7 @@ a(id='alex')
the <live-example name="cb-dependency-injection"></live-example> the <live-example name="cb-dependency-injection"></live-example>
confirms that the `alex` parameter is set. confirms that the `alex` parameter is set.
安全起见,我们添加了[@Optional](#optional)装饰器,但是[在线例子](/resources/live-examples/cb-dependency-injection/ts/plnkr.html)显示`alex`参数确实被设置了。 安全起见,我们添加了[@Optional](#optional)装饰器,但是<live-example name="cb-dependency-injection"></live-example>显示`alex`参数确实被设置了。
<a id="base-parent"></a> <a id="base-parent"></a>
@ -1257,7 +1257,7 @@ a(id='alex')
confirms that the `alex` parameter is null. confirms that the `alex` parameter is null.
*We cannot inject a parent by its base class.* *We cannot inject a parent by its base class.*
可惜这样不行。[在线例子](/resources/live-examples/cb-dependency-injection/ts/plnkr.html)显示`alex`参数是null。 可惜这样不行。<live-example name="cb-dependency-injection"></live-example>显示`alex`参数是null。
*不能通过基类注入父组件*。 *不能通过基类注入父组件*。
<a id="class-interface-parent"></a> <a id="class-interface-parent"></a>

View File

@ -385,7 +385,7 @@ include _util-fns
Angular makes similar requests internally during many of its operations Angular makes similar requests internally during many of its operations
as when it creates a [`Component`](#component) for display. as when it creates a [`Component`](#component) for display.
Angular在创建[组件(Component)](#AppComponent)以供显示的过程中,会在内部执行很多类似的依赖注入请求。 Angular在创建[组件(Component)](#component)以供显示的过程中,会在内部执行很多类似的依赖注入请求。
The `Injector` maintains an internal map of tokens to dependency values. The `Injector` maintains an internal map of tokens to dependency values.
If the `Injector` can't find a value for a given token, it creates If the `Injector` can't find a value for a given token, it creates

View File

@ -79,7 +79,7 @@ include ../_util-fns
:marked :marked
The examples referenced in this chapter are available as a <live-example></live-example>. The examples referenced in this chapter are available as a <live-example></live-example>.
本章中引用的这个例子可以到[在线例子](/resources/live-examples/animations/ts/plnkr.html)去体验。 本章中引用的这个例子可以到<live-example></live-example>去体验。
a(id="example-transitioning-between-states") a(id="example-transitioning-between-states")
.l-main-section .l-main-section

View File

@ -212,7 +212,8 @@ block angular-library-modules
`!{_at_angular}/http`</span> and `!{_at_angular}/router`. `!{_at_angular}/http`</span> and `!{_at_angular}/router`.
We import what we need from an Angular !{_library_module}. We import what we need from an Angular !{_library_module}.
还有另一些重要的Angular模块库比如`@angular/common`、`@angular/router` 和 `@angular/http`。我们从一个Angular的!{_library_module}导入我们需要的模块。 还有另一些重要的Angular模块库比如`@angular/common`<span if-docs="ts">、和 `@angular/http`</span>和`@angular/router`。
我们从一个Angular的!{_library_module}导入我们需要的模块。
block angular-imports block angular-imports
:marked :marked

View File

@ -190,7 +190,7 @@ block example-links
Look for a link to a running version of that sample near the top of each page, Look for a link to a running version of that sample near the top of each page,
such as this <live-example></live-example> from the [Architecture](architecture.html) chapter. such as this <live-example></live-example> from the [Architecture](architecture.html) chapter.
在每页靠近顶部的地方都可以看到一个链接,指向这个范例的可执行版本,比如[架构](architecture.html)一章中的[在线例子](/resources/live-examples/architecture/ts/plnkr.html) 在每页靠近顶部的地方都可以看到一个链接,指向这个范例的可执行版本,比如[架构](architecture.html)一章中的<live-example></live-example>
The link launches a browser-based code editor where we can inspect, modify, save, and download the code. The link launches a browser-based code editor where we can inspect, modify, save, and download the code.

View File

@ -339,6 +339,9 @@ code-example(format="", language="html").
:marked :marked
### Router State ### Router State
### 路由器状态
After the end of each successful navigation lifecycle, the router builds a tree of `ActivatedRoute`s, After the end of each successful navigation lifecycle, the router builds a tree of `ActivatedRoute`s,
which make up the current state of the router. We can access the current `RouterState` from anywhere in our which make up the current state of the router. We can access the current `RouterState` from anywhere in our
application using the `Router` service and the `routerState` property. application using the `Router` service and the `routerState` property.
@ -527,7 +530,13 @@ table
We discuss code and design decisions pertinent to routing and application design. We discuss code and design decisions pertinent to routing and application design.
We gloss over everything in between. We gloss over everything in between.
虽然我们会渐进式的前进到最终的范例应用,但本章并不是一个教程。
我们讨论路由和应用设计有关的代码和设计决策,并在这期间,处理遇到的所有问题。
The full source is available in the [live example](/resources/live-examples/router/ts/plnkr.html). The full source is available in the [live example](/resources/live-examples/router/ts/plnkr.html).
完整代码可以在[在线例子](/resources/live-examples/router/ts/plnkr.html)中找到。
:marked :marked
Our client is the Hero Employment Agency. Our client is the Hero Employment Agency.
Heroes need work and The Agency finds Crises for them to solve. Heroes need work and The Agency finds Crises for them to solve.
@ -545,6 +554,8 @@ table
1. A *Heroes* area where we maintain the list of heroes employed by The Agency. 1. A *Heroes* area where we maintain the list of heroes employed by The Agency.
1. 一个*英雄*区,用来维护该中心雇佣英雄的列表。
Run the [live example](/resources/live-examples/router/ts/plnkr.html). Run the [live example](/resources/live-examples/router/ts/plnkr.html).
It opens in the *Crisis Center*. We'll come back to that. It opens in the *Crisis Center*. We'll come back to that.
@ -2746,7 +2757,7 @@ code-example(format="." language="bash").
row because it demonstrates the final state of the application which includes the steps we're *about* to cover. row because it demonstrates the final state of the application which includes the steps we're *about* to cover.
At the moment we're describing the state of affairs *prior* to those steps. At the moment we're describing the state of affairs *prior* to those steps.
[在线例子](/resources/live-examples/router/ts/plnkr.html)*会*高亮显示选中的行,因为它显示的是应用中的最终状态,包括一些我们*即将*涉及的步骤。接下来,我们就来讲讲这些中间步骤。 <live-example></live-example>*会*高亮显示选中的行,因为它显示的是应用中的最终状态,包括一些*即将*涉及的步骤。接下来,我们就来讲讲这些中间步骤。
:marked :marked
The `HeroListComponent` isn't expecting any parameters at all and wouldn't know what to do with them. The `HeroListComponent` isn't expecting any parameters at all and wouldn't know what to do with them.
@ -2904,7 +2915,7 @@ figure.image-display
Please visit the <live-example></live-example> and Please visit the <live-example></live-example> and
where you can download the final source code. where you can download the final source code.
本章中涉及到了很多背景知识,而且本应用程序也太大了,所以没法在这里显示。请访问[在线例子](/resources/live-examples/router/ts/plnkr.html),在那里你可以下载最终的源码。 本章中涉及到了很多背景知识,而且本应用程序也太大了,所以没法在这里显示。请访问<live-example></live-example>,在那里你可以下载最终的源码。
.l-main-section .l-main-section

View File

@ -440,7 +440,7 @@ block hero-detail-comp-updates
:marked :marked
In order to differentiate between add and edit we are adding a check to see if an id is passed in the URL. If the id is absent we bind `HeroDetailComponent` to an empty `Hero` object. In either case, any edits made through the UI will be bound back to the same `hero` property. In order to differentiate between add and edit we are adding a check to see if an id is passed in the URL. If the id is absent we bind `HeroDetailComponent` to an empty `Hero` object. In either case, any edits made through the UI will be bound back to the same `hero` property.
为了区分添加和编辑操作,我们增加了一步检查,看看url中是否传入了id。如果没有id我们就把`HeroDetailComponent`绑定到一个空的`Hero`对象。 为了区分添加和编辑操作,我们增加了一步检查,看看URL中是否传入了id。如果没有id我们就把`HeroDetailComponent`绑定到一个空的`Hero`对象。
无论是哪种情况通过UI进行的任何编辑操作都会被绑定回同一个`hero`属性。 无论是哪种情况通过UI进行的任何编辑操作都会被绑定回同一个`hero`属性。
:marked :marked
@ -672,7 +672,7 @@ block observables-section-intro
As the user types a name into a search box, we'll make repeated HTTP requests for heroes filtered by that name. As the user types a name into a search box, we'll make repeated HTTP requests for heroes filtered by that name.
我们要为《英雄指南》添加一个*英雄搜索*特性。 我们要为《英雄指南》添加一个*英雄搜索*特性。
当用户在搜索框中输入一个名字时,我们将不断发起http请求,以获得按名字过滤的英雄。 当用户在搜索框中输入一个名字时,我们将不断发起HTTP请求,以获得按名字过滤的英雄。
We start by creating `HeroSearchService` that sends search queries to our server's web api. We start by creating `HeroSearchService` that sends search queries to our server's web api.
@ -724,7 +724,7 @@ block observables-section-intro
The `async` pipe subscribes to the `!{_Observable}` and produces the !{_array} of heroes to `*ngFor`. The `async` pipe subscribes to the `!{_Observable}` and produces the !{_array} of heroes to `*ngFor`.
但是,接下来我们看到`heroes`属性现在是英雄列表的`Observable`对象,而不再只是英雄数组。 但是,接下来我们看到`heroes`属性现在是英雄列表的`Observable`对象,而不再只是英雄数组。
`*ngFor`不能用可观察对象做任何事,除非我们在它后面跟一个`async` pipe (`AsyncPipe`)。 `*ngFor`不能用可观察对象做任何事,除非我们在它后面跟一个`async` pipe (`AsyncPipe`)。
这个`async`管道会订阅到这个可观察对象,并且为`*ngFor`生成一个英雄数组。 这个`async`管道会订阅到这个可观察对象,并且为`*ngFor`生成一个英雄数组。
Time to create the `HeroSearchComponent` class and metadata. Time to create the `HeroSearchComponent` class and metadata.