校对合并结果
This commit is contained in:
parent
82c7f49784
commit
3e9394f62a
|
@ -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
|
A template looks like regular HTML much of the time ... and then it gets a bit strange. Here is a
|
||||||
template for our `HeroListComponent`:
|
template for our `HeroListComponent`:
|
||||||
|
|
||||||
多数情况下,模板看起来很像标准HTML……当然也有一小点儿奇怪的地方。下面是`HeroList`组件的一个模板。
|
多数情况下,模板看起来很像标准HTML……当然也有一小点儿奇怪的地方。下面是`HeroListComponent`组件的一个模板。
|
||||||
|
|
||||||
+makeExample('app/hero-list.component.html')
|
+makeExample('app/hero-list.component.html')
|
||||||
|
|
||||||
|
@ -391,8 +391,8 @@ figure
|
||||||
Notice how `<hero-detail>` rests comfortably among native HTML elements.
|
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.
|
We can and _will_ mix our custom components with native HTML in the same layouts.
|
||||||
|
|
||||||
注意:`<hero-detail>`竟如此和谐的出现在那些已知的HTML元素中。
|
注意:`<hero-detail>`竟如此和谐的出现在那些原生HTML元素中。
|
||||||
在同一个格局中,我们可以也将继续混用自定义组件与原生HTML。
|
在同一个格局中,我们可以(并将继续)混用自定义组件与原生HTML。
|
||||||
|
|
||||||
In this manner we'll compose complex component trees to build out our richly featured application.
|
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}**.
|
In !{_Lang}, we attach metadata by using !{_a} **!{_decorator}**.
|
||||||
Here's some metadata for `HeroListComponent`:
|
Here's some metadata for `HeroListComponent`:
|
||||||
|
|
||||||
在!{_Lang}中,我们用**装饰器(!{_a} **!{_decorator}**)**来附加元数据。
|
在!{_Lang}中,我们用**装饰器(!{_decorator})**来附加元数据。
|
||||||
下面就是`HeroListComponent`的一些元数据。
|
下面就是`HeroListComponent`的一些元数据。
|
||||||
|
|
||||||
+makeExcerpt('app/hero-list.component.ts', 'metadata')
|
+makeExcerpt('app/hero-list.component.ts', 'metadata')
|
||||||
|
@ -439,7 +439,7 @@ figure
|
||||||
Here we see the `@Component` !{_decorator} which (no surprise) identifies the class
|
Here we see the `@Component` !{_decorator} which (no surprise) identifies the class
|
||||||
immediately below it as a component class.
|
immediately below it as a component class.
|
||||||
|
|
||||||
这里看到`@Component`!{_decorator}(毫无悬念的)把紧随其后的类标记成了组件类。
|
这里看到`@Component`!{_decoratorCn}(毫无悬念的)把紧随其后的类标记成了组件类。
|
||||||
|
|
||||||
block ts-decorator
|
block ts-decorator
|
||||||
:marked
|
:marked
|
||||||
|
@ -447,8 +447,8 @@ block ts-decorator
|
||||||
The `@Component` decorator takes a required configuration object with the
|
The `@Component` decorator takes a required configuration object with the
|
||||||
information Angular needs to create and present the component and its view.
|
information Angular needs to create and present the component and its view.
|
||||||
|
|
||||||
装饰器就是函数,它们通常还带有配置参数。
|
!{_decoratorCn}就是函数,它们通常还带有配置参数。
|
||||||
`@Component`装饰器能接受一个配置对象,Angular会基于这些信息创建和展示组件及其视图。
|
`@Component`!{_decoratorCn}能接受一个配置对象,Angular会基于这些信息创建和展示组件及其视图。
|
||||||
|
|
||||||
Here are a few of the possible `@Component` configuration options:
|
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.
|
Angular inserts an instance of the `HeroListComponent` view between those tags.
|
||||||
|
|
||||||
- `selector` - 一个css选择器,它告诉Angular在*父级*HTML中寻找一个`<hero-list>`标签,然后创建该组件,并插入此标签中。
|
- `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).
|
- `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
|
`@Injectable`, `@Input`, and `@Output` are a few of the more popular !{_decorator}s
|
||||||
we'll master as our Angular knowledge grows.
|
we'll master as our Angular knowledge grows.
|
||||||
|
|
||||||
我们也会沿用类似的风格,用其它元数据装饰器来指导Angular的行为。
|
我们也会沿用类似的风格,用其它元数据!{_decoratorCn}来指导Angular的行为。
|
||||||
比如`@Injectable`、`@Input`、`@Output`和`@RouterConfig`等是一些最常用的装饰器。
|
比如`@Injectable`、`@Input`和`@Output`等是一些最常用的!{_decoratorCn}。
|
||||||
随着对Angular认识的逐步深化,我们也将逐步掌握它们。
|
随着对Angular认识的逐步深化,我们也将逐步掌握它们。
|
||||||
|
|
||||||
<br clear="all">
|
<br clear="all">
|
||||||
|
@ -584,7 +584,7 @@ figure
|
||||||
Angular processes *all* data bindings once per JavaScript event cycle,
|
Angular processes *all* data bindings once per JavaScript event cycle,
|
||||||
from the root of the application component tree down to the leaves.
|
from the root of the application component tree down to the leaves.
|
||||||
|
|
||||||
Angular在每个JavaScript事件周期中一次性处理*所有的*数据绑定,它会从组件树的根部开始,用深度优先的方式处理。
|
Angular在每个JavaScript事件周期中一次性处理*所有的*数据绑定,它会从组件树的根部开始,自顶向下处理各个叶节点。
|
||||||
|
|
||||||
figure
|
figure
|
||||||
img(src="/resources/images/devguide/architecture/component-databinding.png" alt="数据绑定" style="float:left; width:300px; margin-left:-40px;margin-right:10px" )
|
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}
|
A directive is a class with directive metadata. In !{_Lang} we apply the `@Directive` !{_decorator}
|
||||||
to attach metadata to the class.
|
to attach metadata to the class.
|
||||||
|
|
||||||
指令是一个带有“指令元数据”的类。在!{_Lang}中,要通过`@Directive`装饰器把元数据附加到类上。
|
指令是一个带有“指令元数据”的类。在!{_Lang}中,要通过`@Directive`!{_decoratorCn}把元数据附加到类上。
|
||||||
|
|
||||||
<br clear="all">
|
<br clear="all">
|
||||||
:marked
|
:marked
|
||||||
We already met one form of directive: the component. A component is a *directive-with-a-template*;
|
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.
|
a `@Component` !{_decorator} is actually a `@Directive` !{_decorator} extended with template-oriented features.
|
||||||
|
|
||||||
我们已经遇到过指令的形式之一:组件。组件是一个*带模板的指令*,而且`@Component`装饰器实际上就是一个`@Directive`装饰器,只是扩展了一些面向模板的属性。
|
我们已经遇到过指令的形式之一:组件。组件是一个*带模板的指令*,而且`@Component`!{_decoratorCn}实际上就是一个`@Directive`!{_decoratorCn},只是扩展了一些面向模板的属性。
|
||||||
|
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
|
@ -655,13 +655,13 @@ figure
|
||||||
|
|
||||||
Our [example](#templates) template uses two built-in structural directives:
|
Our [example](#templates) template uses two built-in structural directives:
|
||||||
|
|
||||||
我们在[范例](#templates)模板中会看到两个内建的结构型指令。
|
我们在[范例](#templates)模板中用到了两个内建的结构型指令。
|
||||||
|
|
||||||
+makeExcerpt('app/hero-list.component.1.html', 'structural')
|
+makeExcerpt('app/hero-list.component.1.html', 'structural')
|
||||||
:marked
|
:marked
|
||||||
* [`*ngFor`](displaying-data.html#ngFor) tells Angular to stamp out one `<li>` per hero in the `heroes` list.
|
* [`*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.
|
* [`*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 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.
|
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.
|
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}.
|
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.
|
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`服务。
|
`HeroService`还依赖于`Logger`服务和另一个用来处理服务器通讯工作的`BackendService`服务。
|
||||||
|
|
||||||
+makeExcerpt('app/hero.service.ts', 'class')
|
+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 don't validate user input, and they don't log directly to the console.
|
||||||
They delegate such tasks to services.
|
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)
|
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_).
|
and the application logic (which often includes some notion of a _model_).
|
||||||
A good component presents properties and methods for data binding.
|
A good component presents properties and methods for data binding.
|
||||||
It delegates everything nontrivial to services.
|
It delegates everything nontrivial to services.
|
||||||
|
|
||||||
组件的任务就是提供用户体验,仅此而已。它介于视图(由模板渲染)和应用逻辑(通常包括“模型model”的观念)之间。
|
组件的任务就是提供用户体验,仅此而已。它介于视图(由模板渲染)和应用逻辑(通常包括_模型(model)_的观念)之间。
|
||||||
设计良好的组件为数据绑定提供属性和方法,把那些其他对它们不重要的事情都委托给服务。
|
设计良好的组件为数据绑定提供属性和方法,把那些其他对它们不重要的事情都委托给服务。
|
||||||
|
|
||||||
Angular doesn't *enforce* these principles.
|
Angular doesn't *enforce* these principles.
|
||||||
|
@ -822,7 +821,7 @@ figure
|
||||||
For example, the constructor of our `HeroListComponent` needs a `HeroService`:
|
For example, the constructor of our `HeroListComponent` needs a `HeroService`:
|
||||||
|
|
||||||
Angular能通过查看构造函数的参数类型,来得知组件需要哪些服务。
|
Angular能通过查看构造函数的参数类型,来得知组件需要哪些服务。
|
||||||
例如,`HeroListComponent`组件的构造函数需要`HeroService`:
|
例如,`HeroListComponent`组件的构造函数需要一个`HeroService`:
|
||||||
|
|
||||||
+makeExcerpt('app/hero-list.component.ts (constructor)', 'ctor')
|
+makeExcerpt('app/hero-list.component.ts (constructor)', 'ctor')
|
||||||
|
|
||||||
|
@ -830,7 +829,7 @@ figure
|
||||||
When Angular creates a component, it first asks an **injector** for
|
When Angular creates a component, it first asks an **injector** for
|
||||||
the services that the component requires.
|
the services that the component requires.
|
||||||
|
|
||||||
当Angular创建组件时,会首先为组件所需的服务找一个**注入器Injector**。
|
当Angular创建组件时,会首先为组件所需的服务找一个**注入器(Injector)**。
|
||||||
|
|
||||||
An `injector` maintains a container of service instances that it has previously created.
|
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
|
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
|
Registering at a component level means we get a new instance of the
|
||||||
service with each new instance of that component.
|
service with each new instance of that component.
|
||||||
|
|
||||||
... 在这种情况下,那个组件的每一个新实例都会有一个(在该组件注册的)服务的新实例。
|
把它注册在组件级表示该组件的每一个新实例都会有一个(在该组件注册的)服务的新实例。
|
||||||
|
|
||||||
<!--We've vastly over-simplified dependency injection for this overview.
|
<!--We've vastly over-simplified dependency injection for this overview.
|
||||||
We can learn the full story in the [Dependency Injection](dependency-injection.html) chapter.-->
|
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.
|
* the `injector` is the main mechanism.
|
||||||
|
|
||||||
* 注入器`Injector`是本机制的核心。
|
* 注入器(`Injector`)是本机制的核心。
|
||||||
|
|
||||||
* an injector maintains a *container* of service instances that it created.
|
* 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
|
> [**Animations**](animations.html): The animation library makes it easy for developers to animate component behavior
|
||||||
without deep knowledge of animation techniques or CSS.
|
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.
|
> **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
|
> **Component router**: With the component Router service, users can navigate a multi-screen application
|
||||||
in a familiar web browsing style using URLs.
|
in a familiar web browsing style using URLs.
|
||||||
|
|
||||||
> **组件路由**:通过组件路由服务,可以让用户使用浏览器中熟悉的URL形式,在多屏应用之间导航。
|
> **组件路由器**:通过组件路由器服务,可以让用户使用浏览器中熟悉的URL形式,在多屏应用之间导航。
|
||||||
|
|
||||||
> **Events**: The DOM raises events. So can components and services. Angular offers mechanisms for
|
> **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.
|
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.
|
> [**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
|
> [**Router**](router.html): Navigate from page to page within the client
|
||||||
application and never leave the browser.
|
application and never leave the browser.
|
||||||
|
|
||||||
> [**路由**](router.html):在应用程序客户端导航,并且不离开浏览器。
|
> [**路由器**](router.html):在应用程序客户端导航,并且不离开浏览器。
|
||||||
|
|
||||||
> [**Testing**](testing.html): Angular provides a
|
> [**Testing**](testing.html): Angular provides a
|
||||||
[testing library](https://pub.dartlang.org/packages/angular2_testing)
|
[testing library](https://pub.dartlang.org/packages/angular2_testing)
|
||||||
to run unit tests on our application parts as they interact with the Angular framework.
|
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),
|
> [**测试**](testing.html):Angular提供了一个[测试库](https://pub.dartlang.org/packages/angular2_testing),
|
||||||
在程序各个部分与Angular框架交互同时,用来“单元测试”它们。
|
在程序各个部分与Angular框架交互的同时,用来“单元测试”它们。
|
||||||
|
|
|
@ -231,8 +231,8 @@ include ../_util-fns
|
||||||
|
|
||||||
我们将把这份配置数组传给`provideRouter()`函数,它返回一个经过配置的*Router*[服务提供商](dependency-injection.html#!#injector-providers)(以及别的东西)。
|
我们将把这份配置数组传给`provideRouter()`函数,它返回一个经过配置的*Router*[服务提供商](dependency-injection.html#!#injector-providers)(以及别的东西)。
|
||||||
|
|
||||||
Finally, we export this provider in the `appRouterProviders` array
|
Finally, we export this provider in the `APP_ROUTER_PROVIDERS` array
|
||||||
so we can simplify registration of router dependencies later in `main.ts`.
|
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.
|
We don't have any other providers to register right now. But we will.
|
||||||
|
|
||||||
最后,我们通过`appRouterProviders`数组导出这个提供商,以便我们以后将来在`main.ts`中简单的注册路由器依赖。
|
最后,我们通过`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 `''`,
|
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'`.
|
so we set the `pathMatch` value to `'full'`.
|
||||||
|
|
||||||
由于我们希望只有在路径明确的匹配到`''`时才重定向,所以我们往路由中添加了一个额外的配置项:`terminal: true`。
|
“重定向(redirect)路由”需要一个`pathMatch`属性来告诉路由器如何把URL和路由中的路径进行匹配。
|
||||||
主要是为了重定向,`terminal`属性是用来控制路由器是否应该继续匹配URL和我们定义的路由。(译者注:`terminal`设置为`true`时,该路由的优先级别就低于其他路由,只有在所有其他路由都不匹配的时候才最后匹配这个路由。主要是为了标示专用于重定向的路由而设计的。)
|
本应用中,路由器应该只有在*完整的URL*匹配`''`时才选择指向`CrisisListComponent`的路由,因此,我们把`pathMatch`的值设置为`'full'`。
|
||||||
|
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
Technically, `pathMatch = 'full'` results in a route hit when the *remaining*, unmatched segments of the URL match `''`.
|
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
|
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.
|
are the same thing.
|
||||||
|
|
||||||
|
从技术的角度看,`pathMatch = 'full'`导致路由器尝试用URL中*剩下的*、未匹配过的片段去匹配`''`。
|
||||||
|
在这个例子中,重定向发生在路由配置树的顶级,所以*剩下的*URL和*完整的*URL是完全一样的。
|
||||||
|
|
||||||
The other possible `pathMatch` value is `'prefix'` which tells the router
|
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.
|
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'`,
|
That's not what we want to do here. If the `pathMatch` value were `'prefix'`,
|
||||||
_every_ URL would match `''`.
|
_every_ URL would match `''`.
|
||||||
We could never navigate to `/crisis-center/1` because the redirect route would match first and
|
We could never navigate to `/crisis-center/1` because the redirect route would match first and
|
||||||
send us to the `CrisisListComponent`.
|
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 `''`.
|
We should redirect to the `CrisisListComponent` _only_ when the _entire (remaining)_ url is `''`.
|
||||||
|
|
||||||
|
_只有_当_完整的(剩余的)_URL是`''`时,我们才应该重定向到`CrisisListComponent`。
|
||||||
|
|
||||||
Learn more in Victor Savkin's blog
|
Learn more in Victor Savkin's blog
|
||||||
[post on redirects](http://victorsavkin.com/post/146722301646/angular-router-empty-paths-componentless-routes).
|
[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.
|
We'll discuss redirects in more detail in a future update to this chapter.
|
||||||
|
|
||||||
|
|
|
@ -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.
|
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>Rule of One
|
||||||
### <a id="01-01"></a>单一法则
|
### <a id="01-01"></a>单一法则
|
||||||
|
|
|
@ -36,7 +36,7 @@ include ../_util-fns
|
||||||
such as <code>npm</code>, <code>gulp</code>, and <code>lite-server</code>.
|
such as <code>npm</code>, <code>gulp</code>, and <code>lite-server</code>.
|
||||||
|
|
||||||
这一章单元测试是在其它章节的基础上写的。我们建议你按顺序阅读它们。同时,我们假设你已经对Angular 2的原理、[“快速起步”](../quickstart.html)和
|
这一章单元测试是在其它章节的基础上写的。我们建议你按顺序阅读它们。同时,我们假设你已经对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
|
.l-main-section
|
||||||
:marked
|
:marked
|
||||||
|
@ -85,7 +85,7 @@ pre.prettyprint.lang-bash
|
||||||
:marked
|
:marked
|
||||||
First create a configuration file for serving up our test harness through `lite-server`.
|
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')
|
+makeExample('testing/ts/liteserver-test-config.json', '', 'liteserver-test-config.json')
|
||||||
|
|
||||||
|
@ -105,7 +105,7 @@ code-example(format="").
|
||||||
:marked
|
: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.
|
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
|
.l-main-section
|
||||||
:marked
|
:marked
|
||||||
|
@ -251,7 +251,7 @@ code-example(format="").
|
||||||
|
|
||||||
Look over at the browser (lite-server will have reloaded it). The browser displays
|
Look over at the browser (lite-server will have reloaded it). The browser displays
|
||||||
|
|
||||||
看看浏览器(live-server应该已经刷新了它)。其中显示的是:
|
看看浏览器(lite-server应该已经刷新了它)。其中显示的是:
|
||||||
|
|
||||||
figure.image-display
|
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")
|
img(src='/resources/images/devguide/first-app-tests/Jasmine-not-running-tests.png' style="width:400px;" alt="Jasmine not running any tests")
|
||||||
|
|
|
@ -193,7 +193,7 @@ pre.prettyprint.lang-bash
|
||||||
|
|
||||||
Let’s launch with **lite-server** in a second terminal window:
|
Let’s launch with **lite-server** in a second terminal window:
|
||||||
|
|
||||||
没问题,让我们在另一个终端窗口中启动**live-server**:
|
没问题,让我们在另一个终端窗口中启动**lite-server**:
|
||||||
|
|
||||||
pre.prettyprint.lang-bash
|
pre.prettyprint.lang-bash
|
||||||
code npm start
|
code npm start
|
||||||
|
|
|
@ -94,7 +94,7 @@ include ../_util-fns
|
||||||
such as <code>npm</code>, <code>gulp</code>, and <code>lite-server</code>.
|
such as <code>npm</code>, <code>gulp</code>, and <code>lite-server</code>.
|
||||||
|
|
||||||
这一章单元测试是在其它章节的基础上写的。我们建议你按顺序阅读它们。同时,我们假设你已经对Angular 2的原理、[“快速起步”](../quickstart.html)和
|
这一章单元测试是在其它章节的基础上写的。我们建议你按顺序阅读它们。同时,我们假设你已经对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
|
:marked
|
||||||
## Add another spec file
|
## Add another spec file
|
||||||
|
|
Loading…
Reference in New Issue