校对合并结果

This commit is contained in:
Zhicheng Wang 2016-07-16 17:47:55 +08:00
parent 82c7f49784
commit 3e9394f62a
6 changed files with 56 additions and 44 deletions

View File

@ -351,7 +351,7 @@ figure
A template looks like regular HTML much of the time ... and then it gets a bit strange. Here is a
template for our `HeroListComponent`:
多数情况下模板看起来很像标准HTML……当然也有一小点儿奇怪的地方。下面是`HeroList`组件的一个模板。
多数情况下模板看起来很像标准HTML……当然也有一小点儿奇怪的地方。下面是`HeroListComponent`组件的一个模板。
+makeExample('app/hero-list.component.html')
@ -391,8 +391,8 @@ figure
Notice how `<hero-detail>` rests comfortably among native HTML elements.
We can and _will_ mix our custom components with native HTML in the same layouts.
注意:`<hero-detail>`竟如此和谐的出现在那些已知的HTML元素中。
在同一个格局中,我们可以也将继续混用自定义组件与原生HTML。
注意:`<hero-detail>`竟如此和谐的出现在那些原生HTML元素中。
在同一个格局中,我们可以(并将继续)混用自定义组件与原生HTML。
In this manner we'll compose complex component trees to build out our richly featured application.
@ -430,7 +430,7 @@ figure
In !{_Lang}, we attach metadata by using !{_a} **!{_decorator}**.
Here's some metadata for `HeroListComponent`:
在!{_Lang}中,我们用**装饰器(!{_a} **!{_decorator}**)**来附加元数据。
在!{_Lang}中,我们用**装饰器(!{_decorator})**来附加元数据。
下面就是`HeroListComponent`的一些元数据。
+makeExcerpt('app/hero-list.component.ts', 'metadata')
@ -439,7 +439,7 @@ figure
Here we see the `@Component` !{_decorator} which (no surprise) identifies the class
immediately below it as a component class.
这里看到`@Component`!{_decorator}(毫无悬念的)把紧随其后的类标记成了组件类。
这里看到`@Component`!{_decoratorCn}(毫无悬念的)把紧随其后的类标记成了组件类。
block ts-decorator
:marked
@ -447,8 +447,8 @@ block ts-decorator
The `@Component` decorator takes a required configuration object with the
information Angular needs to create and present the component and its view.
装饰器就是函数,它们通常还带有配置参数。
`@Component`装饰器能接受一个配置对象Angular会基于这些信息创建和展示组件及其视图。
!{_decoratorCn}就是函数,它们通常还带有配置参数。
`@Component`!{_decoratorCn}能接受一个配置对象Angular会基于这些信息创建和展示组件及其视图。
Here are a few of the possible `@Component` configuration options:
@ -461,7 +461,7 @@ block ts-decorator
Angular inserts an instance of the `HeroListComponent` view between those tags.
- `selector` - 一个css选择器它告诉Angular在*父级*HTML中寻找一个`<hero-list>`标签,然后创建该组件,并插入此标签中。
比如如果应用的HTML包含`<hero-list></hero-list>`Angular就会插入`HeroListComponent`的一个实例到这个标签中。
比如如果应用的HTML包含`<hero-list></hero-list>`Angular就会把`HeroListComponent`的一个实例插入到这个标签中。
- `templateUrl`: address of this component's template, which we showed [above](#templates).
@ -501,8 +501,8 @@ figure
`@Injectable`, `@Input`, and `@Output` are a few of the more popular !{_decorator}s
we'll master as our Angular knowledge grows.
我们也会沿用类似的风格,用其它元数据装饰器来指导Angular的行为。
比如`@Injectable`、`@Input`、`@Output`和`@RouterConfig`等是一些最常用的装饰器
我们也会沿用类似的风格,用其它元数据!{_decoratorCn}来指导Angular的行为。
比如`@Injectable`、`@Input`和`@Output`等是一些最常用的!{_decoratorCn}
随着对Angular认识的逐步深化我们也将逐步掌握它们。
<br clear="all">
@ -584,7 +584,7 @@ figure
Angular processes *all* data bindings once per JavaScript event cycle,
from the root of the application component tree down to the leaves.
Angular在每个JavaScript事件周期中一次性处理*所有的*数据绑定,它会从组件树的根部开始,用深度优先的方式处理
Angular在每个JavaScript事件周期中一次性处理*所有的*数据绑定,它会从组件树的根部开始,自顶向下处理各个叶节点
figure
img(src="/resources/images/devguide/architecture/component-databinding.png" alt="数据绑定" style="float:left; width:300px; margin-left:-40px;margin-right:10px" )
@ -622,14 +622,14 @@ figure
A directive is a class with directive metadata. In !{_Lang} we apply the `@Directive` !{_decorator}
to attach metadata to the class.
指令是一个带有“指令元数据”的类。在!{_Lang}中,要通过`@Directive`装饰器把元数据附加到类上。
指令是一个带有“指令元数据”的类。在!{_Lang}中,要通过`@Directive`!{_decoratorCn}把元数据附加到类上。
<br clear="all">
:marked
We already met one form of directive: the component. A component is a *directive-with-a-template*;
a `@Component` !{_decorator} is actually a `@Directive` !{_decorator} extended with template-oriented features.
我们已经遇到过指令的形式之一:组件。组件是一个*带模板的指令*,而且`@Component`装饰器实际上就是一个`@Directive`装饰器,只是扩展了一些面向模板的属性。
我们已经遇到过指令的形式之一:组件。组件是一个*带模板的指令*,而且`@Component`!{_decoratorCn}实际上就是一个`@Directive`!{_decoratorCn},只是扩展了一些面向模板的属性。
.l-sub-section
:marked
@ -655,13 +655,13 @@ figure
Our [example](#templates) template uses two built-in structural directives:
我们在[范例](#templates)模板中会看到两个内建的结构型指令。
我们在[范例](#templates)模板中用到了两个内建的结构型指令。
+makeExcerpt('app/hero-list.component.1.html', 'structural')
:marked
* [`*ngFor`](displaying-data.html#ngFor) tells Angular to stamp out one `<li>` per hero in the `heroes` list.
* [`*ngFor`](displaying-data.html#ngFor)告诉Angular为`heroes`列表中的每个英雄生成一个`<div>`标签。
* [`*ngFor`](displaying-data.html#ngFor)告诉Angular为`heroes`列表中的每个英雄生成一个`<li>`标签。
* [`*ngIf`](displaying-data.html#ngIf) includes the `HeroDetail` component only if a selected hero exists.
@ -746,8 +746,8 @@ figure
There is nothing specifically _Angular_ about services. Angular itself has no definition of a service.
There is no service base class, and no place to register a service.
服务没有什么特别属于Angular的特性。Angular本身对于服务也没有什么定义。
它甚至都没有服务基类,也没有地方注册一个服务。
服务没有什么特别属于*Angular*的特性。Angular本身对于服务也没有什么定义。
它甚至都没有定义服务基类Base Class,也没有地方注册一个服务。
Yet services are fundamental to any Angular application. Our components are big consumers of services.
@ -763,7 +763,7 @@ figure
Here's a `HeroService` that fetches heroes and returns them in a resolved !{_PromiseLinked}.
The `HeroService` depends on the `Logger` service and another `BackendService` that handles the server communication grunt work.
下面是`HeroService`类,用于获取英雄数据,并通过一个已解析的[承诺Promise](http://exploringjs.com/es6/ch_promises.html)返回它们。
下面是`HeroService`类,用于获取英雄数据,并通过一个已解析的[承诺Promise](http://exploringjs.com/es6/ch_promises.html)返回它们。
`HeroService`还依赖于`Logger`服务和另一个用来处理服务器通讯工作的`BackendService`服务。
+makeExcerpt('app/hero.service.ts', 'class')
@ -777,16 +777,15 @@ figure
they don't validate user input, and they don't log directly to the console.
They delegate such tasks to services.
组件是服务的主要消费者。它们依赖服务来处理大多数“苦差事”。
它们自己不需要从服务器获得数据,不需要验证输入,不需要直接往控制台写日志。
它们把这些任务委托给服务。
我们更倾向于让组件保持精简。组件不需要从服务器获得数据、不需要验证输入,也不需要直接往控制台写日志。
它们把这些任务委托给了服务。
A component's job is to enable the user experience and nothing more. It mediates between the view (rendered by the template)
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 nontrivial to services.
组件的任务就是提供用户体验,仅此而已。它介于视图(由模板渲染)和应用逻辑(通常包括“模型model”的观念)之间。
组件的任务就是提供用户体验,仅此而已。它介于视图(由模板渲染)和应用逻辑(通常包括_模型model_的观念)之间。
设计良好的组件为数据绑定提供属性和方法,把那些其他对它们不重要的事情都委托给服务。
Angular doesn't *enforce* these principles.
@ -822,7 +821,7 @@ figure
For example, the constructor of our `HeroListComponent` needs a `HeroService`:
Angular能通过查看构造函数的参数类型来得知组件需要哪些服务。
例如,`HeroListComponent`组件的构造函数需要`HeroService`
例如,`HeroListComponent`组件的构造函数需要一个`HeroService`
+makeExcerpt('app/hero-list.component.ts (constructor)', 'ctor')
@ -830,7 +829,7 @@ figure
When Angular creates a component, it first asks an **injector** for
the services that the component requires.
当Angular创建组件时会首先为组件所需的服务找一个**注入器Injector**。
当Angular创建组件时会首先为组件所需的服务找一个**注入器Injector**。
An `injector` maintains a container of service instances that it has previously created.
If a requested service instance is not in the container, the injector makes one and adds it to the container
@ -881,7 +880,7 @@ figure
Registering at a component level means 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.-->
@ -899,7 +898,7 @@ figure
* the `injector` is the main mechanism.
* 注入器`Injector`是本机制的核心。
* 注入器`Injector`是本机制的核心。
* an injector maintains a *container* of service instances that it created.
@ -976,7 +975,7 @@ figure
> [**Animations**](animations.html): The animation library makes it easy for developers to animate component behavior
without deep knowledge of animation techniques or CSS.
> [**动画**](animations.html) 即将到来的动画库。它能让开发人员更轻易的给组件添加动画行为,而不需要对动画技术或css有深入的了解。
> [**动画**](animations.html) 即将到来的动画库。它能让开发人员更轻易的给组件添加动画行为,而不需要对动画技术或CSS有深入的了解。
> **Bootstrap**: A method to configure and launch the root application component.
@ -992,12 +991,12 @@ figure
> **Component router**: With the component Router service, users can navigate a multi-screen application
in a familiar web browsing style using URLs.
> **组件路由**通过组件路由服务可以让用户使用浏览器中熟悉的URL形式在多屏应用之间导航。
> **组件路由**:通过组件路由服务可以让用户使用浏览器中熟悉的URL形式在多屏应用之间导航。
> **Events**: The DOM raises events. So can components and services. Angular offers mechanisms for
publishing and subscribing to events including an implementation of the [RxJS Observable](https://github.com/zenparsing/es-observable) proposal.
> **事件**DOM能触发事件组件和服务也能。Angular提供的事件发布与订阅机制还包括[RxJS可观察Observable](https://github.com/zenparsing/es-observable)方案的一个实
> **事件**DOM能触发事件组件和服务也能。Angular提供的事件发布与订阅机制还包括[RxJS可观察Observable](https://github.com/zenparsing/es-observable)方案的一个实
> [**Forms**](forms.html): Support complex data entry scenarios with HTML-based validation and dirty checking.
@ -1030,11 +1029,11 @@ code-example().
> [**Router**](router.html): Navigate from page to page within the client
application and never leave the browser.
> [**路由**](router.html):在应用程序客户端导航,并且不离开浏览器。
> [**路由**](router.html):在应用程序客户端导航,并且不离开浏览器。
> [**Testing**](testing.html): Angular provides a
[testing library](https://pub.dartlang.org/packages/angular2_testing)
to run unit tests on our application parts as they interact with the Angular framework.
> [**测试**](testing.html)Angular提供了一个[测试库](https://pub.dartlang.org/packages/angular2_testing)
在程序各个部分与Angular框架交互同时用来“单元测试”它们。
在程序各个部分与Angular框架交互同时,用来“单元测试”它们。

View File

@ -231,8 +231,8 @@ include ../_util-fns
我们将把这份配置数组传给`provideRouter()`函数,它返回一个经过配置的*Router*[服务提供商](dependency-injection.html#!#injector-providers)(以及别的东西)。
Finally, we export this provider in the `appRouterProviders` array
so we can simplify registration of router dependencies later in `main.ts`.
Finally, we export this provider in the `APP_ROUTER_PROVIDERS` array
so we can simplify registration of router APP_ROUTER_PROVIDERS later in `main.ts`.
We don't have any other providers to register right now. But we will.
最后,我们通过`appRouterProviders`数组导出这个提供商,以便我们以后将来在`main.ts`中简单的注册路由器依赖。
@ -1908,28 +1908,41 @@ code-example(format="").
In this app, the router should select the route to the `CrisisListComponent` when the *entire URL* matches `''`,
so we set the `pathMatch` value to `'full'`.
由于我们希望只有在路径明确的匹配到`''`时才重定向,所以我们往路由中添加了一个额外的配置项:`terminal: true`
主要是为了重定向,`terminal`属性是用来控制路由器是否应该继续匹配URL和我们定义的路由。译者注`terminal`设置为`true`时,该路由的优先级别就低于其他路由,只有在所有其他路由都不匹配的时候才最后匹配这个路由。主要是为了标示专用于重定向的路由而设计的。)
“重定向redirect路由”需要一个`pathMatch`属性来告诉路由器如何把URL和路由中的路径进行匹配
本应用中,路由器应该只有在*完整的URL*匹配`''`时才选择指向`CrisisListComponent`的路由,因此,我们把`pathMatch`的值设置为`'full'`。
.l-sub-section
:marked
Technically, `pathMatch = 'full'` results in a route hit when the *remaining*, unmatched segments of the URL match `''`.
In our example, the redirect is at the top level of the route configuration tree so the *remaining* URL and the *entire* URL
are the same thing.
从技术的角度看,`pathMatch = 'full'`导致路由器尝试用URL中*剩下的*、未匹配过的片段去匹配`''`。
在这个例子中,重定向发生在路由配置树的顶级,所以*剩下的*URL和*完整的*URL是完全一样的。
The other possible `pathMatch` value is `'prefix'` which tells the router
to match the redirect route when the *remaining* URL ***begins*** with the redirect route's _prefix_ path.
`pathMatch`的另一个可能的值是`'prefix'`,这会告诉路由器去匹配*剩下的*URL是否以这个“重定向路由”的*前缀*路径***开头***。
That's not what we want to do here. If the `pathMatch` value were `'prefix'`,
_every_ URL would match `''`.
We could never navigate to `/crisis-center/1` because the redirect route would match first and
send us to the `CrisisListComponent`.
显然,在这里我们并不想这样。如果`pathMatch`的值是`'prefix'`_每个_URL都会匹配`''`。
因为这个“重定向路由”会首先匹配上并把我们引向`CrisisListComponent`,所以我们就永远无法导航到`/crisis-center/1`了。
We should redirect to the `CrisisListComponent` _only_ when the _entire (remaining)_ url is `''`.
_只有_当_完整的剩余的_URL是`''`时,我们才应该重定向到`CrisisListComponent`。
Learn more in Victor Savkin's blog
[post on redirects](http://victorsavkin.com/post/146722301646/angular-router-empty-paths-componentless-routes).
要学习更多请参见Victor Savkin的博客中
[关于重定向的帖子](http://victorsavkin.com/post/146722301646/angular-router-empty-paths-componentless-routes).
We'll discuss redirects in more detail in a future update to this chapter.

View File

@ -119,7 +119,7 @@ a(id='toc')
We apply the [Single Responsibility Principle](https://wikipedia.org/wiki/Single_responsibility_principle) to all Components, Services, and other symbols we create. This helps make our app cleaner, easier to read and maintain, and more testable.
我们遵循[单一职责原则](https:\/\/en.wikipedia.org/wiki/Single_responsibility_principle)来创建的所有组件、服务和其它标志等。这样能帮助我们把应用程序弄的干净整洁,易于阅读、维护和测试。
我们遵循[单一职责原则](https://en.wikipedia.org/wiki/Single_responsibility_principle)来创建的所有组件、服务和其它标志等。这样能帮助我们把应用程序弄的干净整洁,易于阅读、维护和测试。
### <a id="01-01"></a>Rule of One
### <a id="01-01"></a>单一法则

View File

@ -36,7 +36,7 @@ include ../_util-fns
such as <code>npm</code>, <code>gulp</code>, and <code>lite-server</code>.
这一章单元测试是在其它章节的基础上写的。我们建议你按顺序阅读它们。同时我们假设你已经对Angular 2的原理、[“快速起步”](../quickstart.html)和
[英雄指南](../tutorial)中介绍的<code>npm</code>、<code>gulp</code>和<code>live-server</code>等工具都已经有所了解。
[英雄指南](../tutorial)中介绍的<code>npm</code>、<code>gulp</code>和<code>lite-server</code>等工具都已经有所了解。
.l-main-section
:marked
@ -85,7 +85,7 @@ pre.prettyprint.lang-bash
:marked
First create a configuration file for serving up our test harness through `lite-server`.
首先为提供测试环境的`lite-server`创建一个配置文件。
首先为用来提供测试环境的`lite-server`创建一个配置文件。
+makeExample('testing/ts/liteserver-test-config.json', '', 'liteserver-test-config.json')
@ -105,7 +105,7 @@ code-example(format="").
:marked
The `npm test` command will launch `lite-server` and open a browser to the `unit-tests.html` page we just wrote. It will also take care of recompiling your source code and reloading your browser after any change.
该指令将启动`live-server`,并在浏览器中打开我们刚写的`unit-tests.html`页面。
这条`npm test`命令将启动`lite-server`,并在浏览器中打开我们刚写的`unit-tests.html`页面。它还会在做出任何更改之后重新编译源代码,并刷新浏览器。
.l-main-section
:marked
@ -251,7 +251,7 @@ code-example(format="").
Look over at the browser (lite-server will have reloaded it). The browser displays
看看浏览器(live-server应该已经刷新了它)。其中显示的是:
看看浏览器(lite-server应该已经刷新了它)。其中显示的是:
figure.image-display
img(src='/resources/images/devguide/first-app-tests/Jasmine-not-running-tests.png' style="width:400px;" alt="Jasmine not running any tests")

View File

@ -193,7 +193,7 @@ pre.prettyprint.lang-bash
Lets launch with **lite-server** in a second terminal window:
没问题,让我们在另一个终端窗口中启动**live-server**
没问题,让我们在另一个终端窗口中启动**lite-server**
pre.prettyprint.lang-bash
code npm start

View File

@ -94,7 +94,7 @@ include ../_util-fns
such as <code>npm</code>, <code>gulp</code>, and <code>lite-server</code>.
这一章单元测试是在其它章节的基础上写的。我们建议你按顺序阅读它们。同时我们假设你已经对Angular 2的原理、[“快速起步”](../quickstart.html)和
[英雄指南](../tutorial)中介绍的<code>npm</code>、<code>gulp</code>和<code>live-server</code>等工具都已经有所了解。
[英雄指南](../tutorial)中介绍的<code>npm</code>、<code>gulp</code>和<code>lite-server</code>等工具都已经有所了解。
:marked
## Add another spec file