From 3e9394f62a89b5c0670acb34bbbc27ec8f102485 Mon Sep 17 00:00:00 2001 From: Zhicheng Wang Date: Sat, 16 Jul 2016 17:47:55 +0800 Subject: [PATCH] =?UTF-8?q?=E6=A0=A1=E5=AF=B9=E5=90=88=E5=B9=B6=E7=BB=93?= =?UTF-8?q?=E6=9E=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/docs/ts/latest/guide/architecture.jade | 61 +++++++++---------- public/docs/ts/latest/guide/router.jade | 25 ++++++-- public/docs/ts/latest/guide/style-guide.jade | 2 +- .../ts/latest/testing/first-app-tests.jade | 8 +-- .../latest/testing/jasmine-testing-101.jade | 2 +- .../testing/testing-an-angular-pipe.jade | 2 +- 6 files changed, 56 insertions(+), 44 deletions(-) diff --git a/public/docs/ts/latest/guide/architecture.jade b/public/docs/ts/latest/guide/architecture.jade index a99588eb79..aabbfdf87b 100644 --- a/public/docs/ts/latest/guide/architecture.jade +++ b/public/docs/ts/latest/guide/architecture.jade @@ -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 `` rests comfortably among native HTML elements. We can and _will_ mix our custom components with native HTML in the same layouts. - 注意：``竟如此和谐的出现在那些已知的HTML元素中。 - 在同一个格局中，我们可以也将继续混用自定义组件与原生HTML。 + 注意：``竟如此和谐的出现在那些原生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中寻找一个``标签，然后创建该组件，并插入此标签中。 - 比如，如果应用的HTML包含``，Angular就会插入`HeroListComponent`的一个实例到这个标签中。 + 比如，如果应用的HTML包含``，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认识的逐步深化，我们也将逐步掌握它们。
@@ -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}把元数据附加到类上。
: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 `
  • ` per hero in the `heroes` list. - * [`*ngFor`](displaying-data.html#ngFor)告诉Angular为`heroes`列表中的每个英雄生成一个`
    `标签。 + * [`*ngFor`](displaying-data.html#ngFor)告诉Angular为`heroes`列表中的每个英雄生成一个`
  • `标签。 * [`*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. - ... 在这种情况下，那个组件的每一个新实例都会有一个(在该组件注册的)服务的新实例。 + 把它注册在组件级表示该组件的每一个新实例都会有一个(在该组件注册的)服务的新实例。 @@ -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框架交互的同时，用来“单元测试”它们。 diff --git a/public/docs/ts/latest/guide/router.jade b/public/docs/ts/latest/guide/router.jade index 817fd8dda2..de8a299647 100644 --- a/public/docs/ts/latest/guide/router.jade +++ b/public/docs/ts/latest/guide/router.jade @@ -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. diff --git a/public/docs/ts/latest/guide/style-guide.jade b/public/docs/ts/latest/guide/style-guide.jade index 79a99cba07..9c14bb1707 100644 --- a/public/docs/ts/latest/guide/style-guide.jade +++ b/public/docs/ts/latest/guide/style-guide.jade @@ -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)来创建的所有组件、服务和其它标志等。这样能帮助我们把应用程序弄的干净整洁，易于阅读、维护和测试。 ### Rule of One ### 单一法则 diff --git a/public/docs/ts/latest/testing/first-app-tests.jade b/public/docs/ts/latest/testing/first-app-tests.jade index 12c3b3038e..6fbc03a619 100644 --- a/public/docs/ts/latest/testing/first-app-tests.jade +++ b/public/docs/ts/latest/testing/first-app-tests.jade @@ -36,7 +36,7 @@ include ../_util-fns such as npm, gulp, and lite-server. 这一章单元测试是在其它章节的基础上写的。我们建议你按顺序阅读它们。同时，我们假设你已经对Angular 2的原理、[“快速起步”](../quickstart.html)和 - [英雄指南](../tutorial)中介绍的npm、gulp和live-server等工具都已经有所了解。 + [英雄指南](../tutorial)中介绍的npm、gulp和lite-server等工具都已经有所了解。 .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") diff --git a/public/docs/ts/latest/testing/jasmine-testing-101.jade b/public/docs/ts/latest/testing/jasmine-testing-101.jade index 799e14cbd2..c0d4b2ab59 100644 --- a/public/docs/ts/latest/testing/jasmine-testing-101.jade +++ b/public/docs/ts/latest/testing/jasmine-testing-101.jade @@ -193,7 +193,7 @@ pre.prettyprint.lang-bash Let’s launch with **lite-server** in a second terminal window: - 没问题，让我们在另一个终端窗口中启动**live-server**： + 没问题，让我们在另一个终端窗口中启动**lite-server**： pre.prettyprint.lang-bash code npm start diff --git a/public/docs/ts/latest/testing/testing-an-angular-pipe.jade b/public/docs/ts/latest/testing/testing-an-angular-pipe.jade index 4a741a0abc..fa2acf4796 100644 --- a/public/docs/ts/latest/testing/testing-an-angular-pipe.jade +++ b/public/docs/ts/latest/testing/testing-an-angular-pipe.jade @@ -94,7 +94,7 @@ include ../_util-fns such as npm, gulp, and lite-server. 这一章单元测试是在其它章节的基础上写的。我们建议你按顺序阅读它们。同时，我们假设你已经对Angular 2的原理、[“快速起步”](../quickstart.html)和 - [英雄指南](../tutorial)中介绍的npm、gulp和live-server等工具都已经有所了解。 + [英雄指南](../tutorial)中介绍的npm、gulp和lite-server等工具都已经有所了解。 :marked ## Add another spec file