校对合并结果

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 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框架交互同时,用来“单元测试”它们。

View File

@ -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.

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. 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>单一法则

View File

@ -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")

View File

@ -193,7 +193,7 @@ pre.prettyprint.lang-bash
Lets launch with **lite-server** in a second terminal window: Lets 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

View File

@ -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