iSharkFly-Docs
/
angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

为live example添加翻译脚本 

翻译了一部分测试章节
This commit is contained in:
Zhicheng Wang 2017-04-23 09:34:51 +08:00
parent 034001d407
commit d7aa1e95c8
31 changed files with 132 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/docs/ts/latest/cookbook/ajs-quick-reference.jade
View File

@ -13,7 +13,7 @@ a(id="top")
:marked :marked
**See the Angular syntax in this <live-example name="cb-ajs-quick-reference"></live-example>**. **See the Angular syntax in this <live-example name="cb-ajs-quick-reference"></live-example>**.
**可到<live-example name="cb-ajs-quick-reference">在线例子</live-example>中查看Angular语法**。 **可到<live-example name="cb-ajs-quick-reference"></live-example>中查看Angular语法**。
## Contents ## Contents

2
public/docs/ts/latest/cookbook/component-communication.jade
View File

@ -44,7 +44,7 @@ include ../_util-fns
:marked :marked
**See the <live-example name="cb-component-communication"></live-example>**. **See the <live-example name="cb-component-communication"></live-example>**.
**参见<live-example name="cb-component-communication">在线例子</live-example>**。 **参见<live-example name="cb-component-communication"></live-example>**。
.l-main-section .l-main-section
<a id="parent-to-child"></a> <a id="parent-to-child"></a>

2
public/docs/ts/latest/cookbook/dynamic-form.jade
View File

@ -54,7 +54,7 @@ include ../_util-fns
:marked :marked
See the <live-example name="cb-dynamic-form"></live-example>. See the <live-example name="cb-dynamic-form"></live-example>.
**参见<live-example name="cb-dynamic-form">在线例子</live-example>**。 **参见<live-example name="cb-dynamic-form"></live-example>**。
.l-main-section .l-main-section

2
public/docs/ts/latest/cookbook/set-document-title.jade
View File

@ -9,7 +9,7 @@ a(id='top')
:marked :marked
See the <live-example name="cb-set-document-title"></live-example>. See the <live-example name="cb-set-document-title"></live-example>.
**参见<live-example name="cb-set-document-title">在线例子</live-example>**。 **参见<live-example name="cb-set-document-title"></live-example>**。
table table
tr tr

2
public/docs/ts/latest/cookbook/ts-to-js.jade
View File

@ -67,7 +67,7 @@ a#toc
**Run and compare the live <live-example name="cb-ts-to-js">TypeScript</live-example> and <live-example name="cb-ts-to-js" lang="js">JavaScript</live-example> **Run and compare the live <live-example name="cb-ts-to-js">TypeScript</live-example> and <live-example name="cb-ts-to-js" lang="js">JavaScript</live-example>
code shown in this cookbook.** code shown in this cookbook.**
运行在线例子，比较 <live-example name="cb-ts-to-js">_TypeScript_</live-example> 版和 <live-example name="cb-ts-to-js" lang="js">JavaScript</live-example> 版的代码。 运行在线例子，比较 <live-example name="cb-ts-to-js">TypeScript</live-example> 版和 <live-example name="cb-ts-to-js" lang="js">JavaScript</live-example> 版的代码。
a#from-ts a#from-ts
.l-main-section .l-main-section

2
public/docs/ts/latest/guide/animations.jade
View File

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

2
public/docs/ts/latest/guide/architecture.jade
View File

@ -79,7 +79,7 @@ figure
.l-sub-section .l-sub-section
p The code referenced on this page is available as a <live-example></live-example>. p The code referenced on this page is available as a <live-example></live-example>.
p 本章所引用的代码见<live-example>在线例子</live-example>。 p 本章所引用的代码见<live-example></live-example>。
.l-main-section .l-main-section
:marked :marked

4
public/docs/ts/latest/guide/attribute-directives.jade
View File

@ -35,7 +35,9 @@ block includes
[绑定第二个属性](#second-property) [绑定第二个属性](#second-property)
试试<live-example title="Attribute Directive example">在线例子</live-example>。 Try the <live-example title="Attribute Directive example"></live-example>.
试试<live-example title="Attribute Directive example"></live-example>。
.l-main-section#directive-overview .l-main-section#directive-overview
:marked :marked

2
public/docs/ts/latest/guide/component-styles.jade
View File

@ -48,7 +48,7 @@ block includes
You can run the <live-example></live-example> in Plunker and download the code from there. You can run the <live-example></live-example> in Plunker and download the code from there.
你可以在Plunker上运行本章这些代码的<live-example>在线例子</live-example>并下载这些代码。 你可以在Plunker上运行本章这些代码的<live-example></live-example>并下载这些代码。
.l-main-section .l-main-section
:marked :marked

2
public/docs/ts/latest/guide/dependency-injection.jade
View File

@ -131,7 +131,7 @@ block includes
Run the <live-example></live-example>. Run the <live-example></live-example>.
运行<live-example>在线例子</live-example>. 运行<live-example></live-example>.
.l-main-section#why-di .l-main-section#why-di
:marked :marked

2
public/docs/ts/latest/guide/displaying-data.jade
View File

@ -42,7 +42,7 @@ figure.image-display
The <live-example></live-example> demonstrates all of the syntax and code The <live-example></live-example> demonstrates all of the syntax and code
snippets described in this page. snippets described in this page.
这个<live-example>在线例子</live-example>演示了本章中描述的所有语法和代码片段。 这个<live-example></live-example>演示了本章中描述的所有语法和代码片段。
.l-main-section#interpolation .l-main-section#interpolation
:marked :marked

2
public/docs/ts/latest/guide/forms.jade
View File

@ -48,7 +48,7 @@ include ../_util-fns
You can run the <live-example></live-example> in Plunker and download the code from there. You can run the <live-example></live-example> in Plunker and download the code from there.
你可以在Plunker中运行<live-example>在线例子</live-example>，并且从那里下载代码。 你可以在Plunker中运行<live-example></live-example>，并且从那里下载代码。
.l-main-section#template-driven .l-main-section#template-driven
:marked :marked

2
public/docs/ts/latest/guide/hierarchical-dependency-injection.jade
View File

@ -21,7 +21,7 @@ block includes
Try the <live-example></live-example>. Try the <live-example></live-example>.
试试<live-example>在线例子</live-example>. 试试<live-example></live-example>.
.l-main-section .l-main-section
:marked :marked

2
public/docs/ts/latest/guide/index.jade
View File

@ -128,7 +128,7 @@ table(width="100%")
</span> </span>
查找这些例子在线版本的链接，通常在页面的开头部分附近。 查找这些例子在线版本的链接，通常在页面的开头部分附近。
例如[架构](architecture.html)章的<live-example name="architecture">在线例子</live-example>。 例如[架构](architecture.html)章的<live-example name="architecture"></live-example>。
<span if-docs="ts"> <span if-docs="ts">
该链接启动浏览器代码编辑器，你可以查看、修改、保存和下载代码。 该链接启动浏览器代码编辑器，你可以查看、修改、保存和下载代码。
</span> </span>

4
public/docs/ts/latest/guide/lifecycle-hooks.jade
View File

@ -93,7 +93,7 @@ figure
:marked :marked
Try the <live-example></live-example>. Try the <live-example></live-example>.
试一试<live-example>在线例子</live-example>。 试一试<live-example></live-example>。
a#hooks-overview a#hooks-overview
.l-main-section .l-main-section
@ -319,7 +319,7 @@ a#other-lifecycle-hooks
demonstrates the lifecycle hooks in action through a series of exercises demonstrates the lifecycle hooks in action through a series of exercises
presented as components under the control of the root `AppComponent`. presented as components under the control of the root `AppComponent`.
<live-example>在线例子</live-example>通过在受控于根组件`AppComponent`的一些组件上进行的一系列练习，演示了生命周期钩子的运作方式。 <live-example></live-example>通过在受控于根组件`AppComponent`的一些组件上进行的一系列练习，演示了生命周期钩子的运作方式。
They follow a common pattern: a *parent* component serves as a test rig for They follow a common pattern: a *parent* component serves as a test rig for
a *child* component that illustrates one or more of the lifecycle hook methods. a *child* component that illustrates one or more of the lifecycle hook methods.

4
public/docs/ts/latest/guide/ngmodule.jade
View File

@ -318,6 +318,8 @@ a#bootstrap
<live-example embedded plnkr="minimal.0" img="devguide/ngmodule/minimal-plunker.png">Try the live example.</live-example> <live-example embedded plnkr="minimal.0" img="devguide/ngmodule/minimal-plunker.png">Try the live example.</live-example>
<live-example embedded plnkr="minimal.0" img="devguide/ngmodule/minimal-plunker.png">试试在线例子。</live-example>
### Static bootstrapping with the ahead-of-time (AOT) compiler ### Static bootstrapping with the ahead-of-time (AOT) compiler
### 使用预编译器 (AoT - Ahead-Of-Time) 进行静态引导 ### 使用预编译器 (AoT - Ahead-Of-Time) 进行静态引导
@ -1169,6 +1171,8 @@ a#contact-module-v1
试试范例的`ContactModule`版。 试试范例的`ContactModule`版。
<live-example embedded plnkr="contact.2" img="devguide/ngmodule/contact-2-plunker.png">Try the live example.</live-example>
<live-example embedded plnkr="contact.2" img="devguide/ngmodule/contact-2-plunker.png">试试在线例子</live-example> <live-example embedded plnkr="contact.2" img="devguide/ngmodule/contact-2-plunker.png">试试在线例子</live-example>
a#lazy-load a#lazy-load

9
public/docs/ts/latest/guide/pipes.jade
View File

@ -28,9 +28,10 @@ block includes
Introducing Angular pipes, a way to write display-value transformations that you can declare in your HTML. Introducing Angular pipes, a way to write display-value transformations that you can declare in your HTML.
通过引入Angular管道，我们可以把这种简单的“显示-值”转换器声明在HTML中。
You can run the <live-example></live-example> in Plunker and download the code from there. You can run the <live-example></live-example> in Plunker and download the code from there.
欢迎来到Angular“管道(Pipe)”的世界！我们可以把这种简单的“值-显示”转换器声明在HTML中。
试试<live-example>在线例子</live-example>。 试试<live-example>在线例子</live-example>。
.l-main-section .l-main-section
@ -286,7 +287,7 @@ figure.image-display
To probe the behavior in the <live-example></live-example>, To probe the behavior in the <live-example></live-example>,
change the value and optional exponent in the template. change the value and optional exponent in the template.
如果我们试一下这个<live-example>在线例子</live-example>，就可以通过修改值和模板中的可选部分来体会其行为。 如果我们试一下这个<live-example></live-example>，就可以通过修改值和模板中的可选部分来体会其行为。
## Power Boost Calculator ## Power Boost Calculator
@ -370,7 +371,7 @@ a#change-detection
Notice the odd behavior in the <live-example></live-example>: Notice the odd behavior in the <live-example></live-example>:
when you add flying heroes, none of them are displayed under "Heroes who fly." when you add flying heroes, none of them are displayed under "Heroes who fly."
当运行例子时，我们看到一种奇怪的行为（试试<live-example>在线例子</live-example>）。添加的每个英雄都是会飞行的英雄，但是没有一个被显示出来。 当运行<live-example></live-example>时，我们看到一种奇怪的行为。添加的每个英雄都是会飞行的英雄，但是没有一个被显示出来。
Although you're not getting the behavior you want, Angular isn't broken. Although you're not getting the behavior you want, Angular isn't broken.
It's just using a different change-detection algorithm that ignores changes to the list or any of its items. It's just using a different change-detection algorithm that ignores changes to the list or any of its items.
@ -560,7 +561,7 @@ a#impure-flying-heroes
display updates as you add heroes, even when you mutate the `heroes` array. display updates as you add heroes, even when you mutate the `heroes` array.
唯一的重大改动就是管道。 唯一的重大改动就是管道。
我们可以在<live-example>在线例子</live-example>中确认，当我们输入新的英雄甚至修改#[code heroes]数组时，这个#[i 会飞的英雄]的显示也跟着更新了。 我们可以在<live-example></live-example>中确认，当我们输入新的英雄甚至修改#[code heroes]数组时，这个#[i 会飞的英雄]的显示也跟着更新了。
h3#async-pipe The impure #[i AsyncPipe] h3#async-pipe The impure #[i AsyncPipe]
:marked :marked

4
public/docs/ts/latest/guide/router.jade
View File

@ -2168,7 +2168,7 @@ a#route-parameters-activated-route
row because it demonstrates the final state of the application which includes the steps you're *about* to cover. row because it demonstrates the final state of the application which includes the steps you're *about* to cover.
At the moment this guide is describing the state of affairs *prior* to those steps. At the moment this guide is describing the state of affairs *prior* to those steps.
<live-example>在线例子</live-example>*高亮了*选中的行，因为它演示的是应用的最终状态，因此包含了我们*即将*示范的步骤。 <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.
@ -3954,7 +3954,7 @@ a#final-app
Please visit the <live-example title="Router Sample in Plunker"></live-example> Please visit the <live-example title="Router Sample in Plunker"></live-example>
where you can download the final source code. where you can download the final source code.
本章中涉及到了很多背景知识，而且本应用程序也太大了，所以没法在这里显示。请访问<live-example title="Router Sample in Plunker">在线例子</live-example>，在那里你可以下载最终的源码。 本章中涉及到了很多背景知识，而且本应用程序也太大了，所以没法在这里显示。请访问<live-example title="Router Sample in Plunker"></live-example>，在那里你可以下载最终的源码。
a#appendices a#appendices
.l-main-section .l-main-section

2
public/docs/ts/latest/guide/security.jade
View File

@ -46,7 +46,7 @@ block includes
:marked :marked
You can run the <live-example></live-example> in Plunker and download the code from there. You can run the <live-example></live-example> in Plunker and download the code from there.
运行<live-example>在线例子</live-example>来试用本页的代码。 运行<live-example></live-example>来试用本页的代码。
.l-main-section .l-main-section
h2#report-issues h2#report-issues

2
public/docs/ts/latest/guide/server-communication.jade
View File

@ -1338,4 +1338,4 @@ block redirect-to-web-api
:marked :marked
See the full source code in the <live-example></live-example>. See the full source code in the <live-example></live-example>.
要想查看完整的源代码，请参见<live-example>在线例子</live-example>。 要想查看完整的源代码，请参见<live-example></live-example>。

3
public/docs/ts/latest/guide/setup.jade
View File

@ -134,8 +134,7 @@ block qs-seed
Consequently, there are _many more files_ in the project folder on your machine, Consequently, there are _many more files_ in the project folder on your machine,
most of which you can [learn about later](setup-systemjs-anatomy.html "Setup Anatomy"). most of which you can [learn about later](setup-systemjs-anatomy.html "Setup Anatomy").
**《快速起步》种子** 包含了与《快速起步》游乐场一样的应用。该应用有<live-example>自己的*游乐场*</live-example>， **《快速起步》种子** 包含了与《快速起步》游乐场一样的应用，但是，它真正的目的是提供坚实的*本地*开发基础。
但是，它真正的目的是提供坚实的*本地*开发基础。
所以你的电脑里的项目目录里面有*更多文件*，参见[搭建剖析](setup-systemjs-anatomy.html "Setup Anatomy")。 所以你的电脑里的项目目录里面有*更多文件*，参见[搭建剖析](setup-systemjs-anatomy.html "Setup Anatomy")。
block core-files block core-files

2
public/docs/ts/latest/guide/structural-directives.jade
View File

@ -70,7 +70,7 @@ style.
Try the <live-example></live-example>. Try the <live-example></live-example>.
试试<live-example>在线例子</live-example>。 试试<live-example></live-example>。
a#definition a#definition
.l-main-section .l-main-section

3
public/docs/ts/latest/guide/template-syntax.jade
View File

@ -119,7 +119,7 @@ a#toc
The <live-example></live-example> The <live-example></live-example>
demonstrates all of the syntax and code snippets described in this guide. demonstrates all of the syntax and code snippets described in this guide.
<live-example>在线例子</live-example>演示了本章中描述的所有语法和代码片段。 <live-example></live-example>演示了本章中描述的所有语法和代码片段。
.l-hr .l-hr
a#html a#html
@ -1739,7 +1739,6 @@ a#two-way
`SizerComponent.size`初始值是`AppComponent.fontSizePx`。 `SizerComponent.size`初始值是`AppComponent.fontSizePx`。
点击按钮时，通过双向绑定更新`AppComponent.fontSizePx`。 点击按钮时，通过双向绑定更新`AppComponent.fontSizePx`。
被修改的`AppComponent.fontSizePx`通过_样式_绑定，改变文本的显示大小。 被修改的`AppComponent.fontSizePx`通过_样式_绑定，改变文本的显示大小。
试一下<live-example>在线例子</live-example>。
The two-way binding syntax is really just syntactic sugar for a _property_ binding and an _event_ binding. The two-way binding syntax is really just syntactic sugar for a _property_ binding and an _event_ binding.
Angular _desugars_ the `SizerComponent` binding into this: Angular _desugars_ the `SizerComponent` binding into this:

128
public/docs/ts/latest/guide/testing.jade
View File

@ -16,7 +16,7 @@ a#top
* [Live examples](#live-examples "Live examples of the tests in this guide") * [Live examples](#live-examples "Live examples of the tests in this guide")
[在线例子](#live-examples "本章这些测试的在线例子") [在线例子](#live-examples "本章这些测试的在线例子")
* [Introduction to Angular testing](#testing-intro) * [Introduction to Angular testing](#testing-intro)
@ -56,21 +56,23 @@ a#top
[测试一个组件](#simple-component-test) [测试一个组件](#simple-component-test)
* [_TestBed_](#testbed) * [`TestBed`](#testbed)
* [_createComponent_](#create-component) [`TestBed`（测试台）](#testbed)
* [_ComponentFixture_, _DebugElement_, and _query(By.css)_](#component-fixture) * [`createComponent`](#create-component)
[_ComponentFixture_, _DebugElement_, 和 _query(By.css)_](#component-fixture) * [`ComponentFixture`, `DebugElement`, and `query(By.css)`](#component-fixture)
[`ComponentFixture`, `DebugElement`, 和 `query(By.css)`](#component-fixture)
* [The tests](#the-tests) * [The tests](#the-tests)
[测试](#the-tests) [测试](#the-tests)
* [_detectChanges_: Angular change detection within a test](#detect-changes) * [`detectChanges`: Angular change detection within a test](#detect-changes)
[_detectChanges_: 在测试中控制Angular的变更检测](#detect-changes) [`detectChanges`: 在测试中控制Angular的变更检测](#detect-changes)
* [Try the live example](#try-example) * [Try the live example](#try-example)
@ -85,19 +87,19 @@ a#top
[测试带有外部模板的组件](#component-with-external-template) [测试带有外部模板的组件](#component-with-external-template)
* [The first asynchronous _beforeEach_](#async-in-before-each) * [The first asynchronous `beforeEach`](#async-in-before-each)
[第一处异步代码：_beforeEach_](#async-in-before-each) [第一处异步代码：`beforeEach`](#async-in-before-each)
* [_compileComponents_](#compile-components) * [`compileComponents`](#compile-components)
* [The second synchronous _beforeEach_](#second-before-each) * [The second synchronous `beforeEach`](#second-before-each)
[第二处同步代码：_beforeEach_](#second-before-each) [第二处同步代码：`beforeEach`](#second-before-each)
* [Waiting for _compileComponents_](#waiting-compile-components) * [Waiting for `compileComponents`](#waiting-compile-components)
[等待 _compileComponents_](#waiting-compile-components) [等待 `compileComponents`](#waiting-compile-components)
* [Try the live example](#live-external-template-example) * [Try the live example](#live-external-template-example)
@ -116,7 +118,7 @@ a#top
[获取注入的服务](#get-injected-service) [获取注入的服务](#get-injected-service)
* [_TestBed.get_](#testbed-get) * [`TestBed.get`](#testbed-get)
* [Always get the service from an injector](#service-from-injector) * [Always get the service from an injector](#service-from-injector)
@ -139,31 +141,31 @@ a#top
[同步测试](#sync-tests) [同步测试](#sync-tests)
* [The _async_ funciton in it](#async) * [The `async` funciton in it](#async)
[`it`中的`async`函数](#async) [`it`中的`async`函数](#async)
* [_whenStable_](#when-stable) * [`whenStable`](#when-stable)
* [The _fakeAsync_ function](#fake-async) * [The `fakeAsync` function](#fake-async)
[`fakeAsync` 函数](#fake-async) [`fakeAsync` 函数](#fake-async)
* [The _tick_ function](#tick) * [The `tick` function](#tick)
[`tick`函数](#tick) [`tick`函数](#tick)
* [_jasmine.done_](#jasmine-done) * [`jasmine.done`](#jasmine-done)
* [Test a component with inputs and outputs](#component-with-input-output) * [Test a component with inputs and outputs](#component-with-input-output)
[测试带有输入属性和输出属性的组件](#component-with-input-output) [测试带有输入属性和输出属性的组件](#component-with-input-output)
* [Test _DashboardHeroComponent_ stand-alone](#dashboard-standalone) * [Test `DashboardHeroComponent` stand-alone](#dashboard-standalone)
[单独测试`DashboardHeroComponent`](#dashboard-standalone) [单独测试`DashboardHeroComponent`](#dashboard-standalone)
* [_triggerEventHandler_](#trigger-event-handler) * [`triggerEventHandler`](#trigger-event-handler)
* [Test a component inside a test host component](#component-inside-test-host) * [Test a component inside a test host component](#component-inside-test-host)
@ -173,7 +175,7 @@ a#top
[测试路由组件](#routed-component) [测试路由组件](#routed-component)
* [The _inject_ helper function](#inject) * [The `inject` helper function](#inject)
[`inject`助手函数](#inject) [`inject`助手函数](#inject)
@ -181,15 +183,15 @@ a#top
[测试带参数的路由组件](#routed-component-w-param) [测试带参数的路由组件](#routed-component-w-param)
* [Create an _Observable_ test double](#stub-observable) * [Create an `Observable` test double](#stub-observable)
[创建`Observable`测试桩（Stub）](#stub-observable) [创建`Observable`测试桩（Stub）](#stub-observable)
* [Testing with the _Observable_ test double](#tests-w-observable-double) * [Testing with the `Observable` test double](#tests-w-observable-double)
[使用`Observable`测试桩进行测试](#tests-w-observable-double) [使用`Observable`测试桩进行测试](#tests-w-observable-double)
* [Use a _page_ object to simplify setup](#page-object) * [Use a `page` object to simplify setup](#page-object)
[使用`page`对象来简化设置](#page-object) [使用`page`对象来简化设置](#page-object)
@ -205,7 +207,7 @@ a#top
[改写（Override）组件的提供商](#component-override) [改写（Override）组件的提供商](#component-override)
* [The _overrideComponent_ method](#override-component-method) * [The `overrideComponent` method](#override-component-method)
[`overrideComponent`方法](#override-component-method) [`overrideComponent`方法](#override-component-method)
@ -222,7 +224,7 @@ a#top
[更多的改写](#more-overrides) [更多的改写](#more-overrides)
* [Test a _RouterOutlet_ component](#router-outlet-component) * [Test a `RouterOutlet` component](#router-outlet-component)
[测试`RouterOutlet`组件](#router-outlet-component) [测试`RouterOutlet`组件](#router-outlet-component)
@ -230,11 +232,11 @@ a#top
[模拟不需要的组件](#stub-component) [模拟不需要的组件](#stub-component)
* [Stubbing the _RouterLink_](#router-link-stub) * [Stubbing the `RouterLink`](#router-link-stub)
[模拟_RouterLink_](#router-link-stub) [模拟`RouterLink`](#router-link-stub)
* [_By.directive_ and injected directives](#by-directive) * [`By.directive` and injected directives](#by-directive)
[`By.directive`与注入的指令](#by-directive) [`By.directive`与注入的指令](#by-directive)
@ -243,9 +245,9 @@ a#top
[为什么要这样写测试？](#why-stubbed-routerlink-tests) [为什么要这样写测试？](#why-stubbed-routerlink-tests)
* ["Shallow component tests" with *NO\_ERRORS\_SCHEMA*](#shallow-component-test) * ["Shallow component tests" with *NO_ERRORS_SCHEMA*](#shallow-component-test)
[使用`NO\_ERRORS\_SCHEMA`进行 "浅组件测试" ](#shallow-component-test) [使用`NO_ERRORS_SCHEMA`进行 "浅组件测试" ](#shallow-component-test)
* [Test an attribute directive](#attribute-directive) * [Test an attribute directive](#attribute-directive)
@ -280,25 +282,25 @@ a#top
[Angular单元测试工具类 API ](#atu-apis) [Angular单元测试工具类 API ](#atu-apis)
* [_TestBed_ class summary](#testbed-class-summary) * [`TestBed` class summary](#testbed-class-summary)
[`TestBed`总结](#testbed-class-summary) [`TestBed`总结](#testbed-class-summary)
* [The _ComponentFixture_](#component-fixture-api-summary) * [The `ComponentFixture`](#component-fixture-api-summary)
[`ComponentFixture`](#component-fixture-api-summary) [`ComponentFixture`总结](#component-fixture-api-summary)
* [_ComponentFixture_ properties](#component-fixture-properties) * [`ComponentFixture` properties](#component-fixture-properties)
[`ComponentFixture`的属性](#component-fixture-properties) [`ComponentFixture`的属性](#component-fixture-properties)
* [The _ComponentFixture_ methods](#component-fixture-methods) * [The `ComponentFixture` methods](#component-fixture-methods)
[`ComponentFixture`方法](#component-fixture-methods) [`ComponentFixture`方法](#component-fixture-methods)
* [_DebugElement_](#debug-element-details) * [`DebugElement`](#debug-element-details)
[`DebugElement`](#debug-element-details) [`DebugElement`详情](#debug-element-details)
* [Test environment setup files](#setup-files) * [Test environment setup files](#setup-files)
@ -515,22 +517,39 @@ a#isolated-v-testing-utilities
The tester creates a test instance of the class with `new`, supplying test doubles for the constructor parameters as needed, and The tester creates a test instance of the class with `new`, supplying test doubles for the constructor parameters as needed, and
then probes the test instance API surface. then probes the test instance API surface.
[独立单元测试](#isolated-unit-tests "不使用Angular测试工具集的单元测试")用于测试那些完全不依赖Angular或不需要注入值的类实例。
测试程序是所有`new`创建该类的实例，为构造函数参数提供所需的测试替身，然后测试该实例的API接口。
*You should write isolated unit tests for pipes and services.* *You should write isolated unit tests for pipes and services.*
*我们应该为管道和服务书写独立单元测试。*
You can test components in isolation as well. You can test components in isolation as well.
However, isolated unit tests don't reveal how components interact with Angular. However, isolated unit tests don't reveal how components interact with Angular.
In particular, they can't reveal how a component class interacts with its own template or with other components. In particular, they can't reveal how a component class interacts with its own template or with other components.
我们也同样可以对组件写独立单元测试。
不过，独立单元测试无法体现组件与Angular的交互。
具体来说，就是不能发现组件类如何与它的模板或其它组件交互。
Such tests require the **Angular testing utilities**. Such tests require the **Angular testing utilities**.
The Angular testing utilities include the `TestBed` class and several helper functions from `@angular/core/testing`. The Angular testing utilities include the `TestBed` class and several helper functions from `@angular/core/testing`.
They are the main focus of this guide and you'll learn about them They are the main focus of this guide and you'll learn about them
when you write your [first component test](#simple-component-test). when you write your [first component test](#simple-component-test).
A comprehensive review of the Angular testing utilities appears [later in this guide](#atu-apis). A comprehensive review of the Angular testing utilities appears [later in this guide](#atu-apis).
这时你需要*Angular测试工具集*。
Angular测试工具集包括`TestBed`类和一些来自`@angular/core/testing`的助手函数。
本章将会重点讲解它们，通过[第一个组件测试](#simple-component-test)来讲解。
[本章稍后的部分](#atu-apis)将展示Angular测试工具集的全貌。
But first you should write a dummy test to verify that your test environment is set up properly But first you should write a dummy test to verify that your test environment is set up properly
and to lock in a few basic testing skills. and to lock in a few basic testing skills.
但首先，我们要先随便写一个测试来验证测试环境是否已经就绪了，并掌握一些基础的测试技术。
a(href="#top").to-top Back to top a(href="#top").to-top Back to top
a(href="#top").to-top 回到顶部
.l-hr .l-hr
@ -706,9 +725,14 @@ a#live-karma-example
:marked :marked
### Try the live example ### Try the live example
### 试试这个在线例子
You can also try this test as a <live-example plnkr="1st-specs" title="First spec" embedded-style></live-example> in plunker. You can also try this test as a <live-example plnkr="1st-specs" title="First spec" embedded-style></live-example> in plunker.
All of the tests in this guide are available as [live examples](#live-examples "Live examples of these tests"). All of the tests in this guide are available as [live examples](#live-examples "Live examples of these tests").
你还可以在plunker的<live-example plnkr="1st-specs" title="First spec" embedded-style></live-example>中试运行这个测试。
本章的所有测试都有相应的[在线例子](#live-examples "Live examples of these tests")。
a(href="#top").to-top Back to top a(href="#top").to-top Back to top
a(href="#top").to-top 回到顶部 a(href="#top").to-top 回到顶部
@ -718,26 +742,46 @@ a#simple-component-test
:marked :marked
## Test a component ## Test a component
## 测试一个组件
An Angular component is the first thing most developers want to test. An Angular component is the first thing most developers want to test.
The `BannerComponent` in `src/app/banner-inline.component.ts` is the simplest component in this application and The `BannerComponent` in `src/app/banner-inline.component.ts` is the simplest component in this application and
a good place to start. a good place to start.
It presents the application title at the top of the screen within an `<h1>` tag. It presents the application title at the top of the screen within an `<h1>` tag.
大多数开发人员首先要测试的就是Angular组件。
`src/app/banner-inline.component.ts`中的`BannerComponent`是这个应用中最简单的组件，也是一个好的起点。
它所表示的是屏幕顶部`<h1>`标签中的应用标题。
+makeExample('testing/ts/src/app/banner-inline.component.ts', '', 'src/app/banner-inline.component.ts')(format='.') +makeExample('testing/ts/src/app/banner-inline.component.ts', '', 'src/app/banner-inline.component.ts')(format='.')
:marked :marked
This version of the `BannerComponent` has an inline template and an interpolation binding. This version of the `BannerComponent` has an inline template and an interpolation binding.
The component is probably too simple to be worth testing in real life but The component is probably too simple to be worth testing in real life but
it's perfect for a first encounter with the Angular testing utilities. it's perfect for a first encounter with the Angular testing utilities.
这个版本的`BannerComponent`有一个内联模板和一个插值表达式绑定。
这个组件可能太简单，以至于在真实的项目中都不值得测试，但它却是首次接触Angular测试工具集时的完美例子。
The corresponding `src/app/banner-inline.component.spec.ts` sits in the same folder as the component, The corresponding `src/app/banner-inline.component.spec.ts` sits in the same folder as the component,
for reasons explained in the [FAQ](#faq) answer to for reasons explained in the [FAQ](#faq) answer to
["Why put specs next to the things they test?"](#q-spec-file-location). ["Why put specs next to the things they test?"](#q-spec-file-location).
组件对应的`src/app/banner-inline.component.spec.ts`文件与该组件位于同一个目录中，原因详见[FAQ](#faq)中的
[为什么要把测试规约文件放在被测试对象旁边？](#q-spec-file-location)
Start with ES6 import statements to get access to symbols referenced in the spec. Start with ES6 import statements to get access to symbols referenced in the spec.
在测试文件中，我们先用ES6的`import`语句来引入测试所需的符号。
+makeExample('testing/ts/src/app/banner-inline.component.spec.ts', 'imports', 'src/app/banner-inline.component.spec.ts (imports)')(format='.') +makeExample('testing/ts/src/app/banner-inline.component.spec.ts', 'imports', 'src/app/banner-inline.component.spec.ts (imports)')(format='.')
a#configure-testing-module a#configure-testing-module
:marked :marked
Here's the `describe` and the `beforeEach` that precedes the tests: Here's the `describe` and the `beforeEach` that precedes the tests:
测试前面的`describe`和`beforeEach`如下：
+makeExample('testing/ts/src/app/banner-inline.component.spec.ts', 'setup', 'src/app/banner-inline.component.spec.ts (beforeEach)')(format='.') +makeExample('testing/ts/src/app/banner-inline.component.spec.ts', 'setup', 'src/app/banner-inline.component.spec.ts (beforeEach)')(format='.')
a#testbed a#testbed
@ -2138,10 +2182,10 @@ a#tests-w-observable-double
:marked :marked
Inspect and download _all_ of the guide's application test code with this <live-example plnkr="app-specs" embedded-style>live example</live-example>. Inspect and download _all_ of the guide's application test code with this <live-example plnkr="app-specs" embedded-style>live example</live-example>.
a(href="#top").to-top Back to top
到<live-example plnkr="app-specs">在线例子</live-example>查看和下载**所有**本章应用程序测试代码。 到<live-example plnkr="app-specs">在线例子</live-example>查看和下载**所有**本章应用程序测试代码。
a(href="#top").to-top Back to top
.l-hr .l-hr
a#page-object a#page-object

2
public/docs/ts/latest/guide/user-input.jade
View File

@ -11,7 +11,7 @@ include ../_util-fns
Run the <live-example></live-example>. Run the <live-example></live-example>.
运行<live-example>在线例子</live-example> 运行<live-example></live-example>
:marked :marked

4
public/docs/ts/latest/tutorial/toh-pt1.jade
View File

@ -33,7 +33,7 @@ include ../_util-fns
:marked :marked
When you're done with this page, the app should look like this <live-example></live-example>. When you're done with this page, the app should look like this <live-example></live-example>.
在我们完成本章时，得到的应用和这个<live-example>在线例子</live-example>一样。 在我们完成本章时，得到的应用和这个<live-example></live-example>一样。
a#keep-transpiling a#keep-transpiling
:marked :marked
@ -272,7 +272,7 @@ code-example(language="sh" class="code-shell").
Your app should look like this <live-example></live-example>. Your app should look like this <live-example></live-example>.
运行这部分的<live-example>在线例子</live-example>。 运行这部分的<live-example></live-example>。
Here's the complete `app.component.ts` as it stands now: Here's the complete `app.component.ts` as it stands now:

2
public/docs/ts/latest/tutorial/toh-pt2.jade
View File

@ -463,7 +463,7 @@ code-example(language="sh" class="code-shell").
Run the <live-example></live-example> for this part. Run the <live-example></live-example> for this part.
运行这部分的<live-example>在线例子</live-example>。 运行这部分的<live-example></live-example>。
### The Road Ahead ### The Road Ahead

4
public/docs/ts/latest/tutorial/toh-pt3.jade
View File

@ -22,7 +22,7 @@ include ../_util-fns
When you're done, the app should look like this <live-example></live-example>. When you're done, the app should look like this <live-example></live-example>.
本章中，我们要做的第一步就是把英雄详情拆分到一个独立的、可复用的组件中。 本章中，我们要做的第一步就是把英雄详情拆分到一个独立的、可复用的组件中。
做完这些，应用看起来是这样的：<live-example>在线例子</live-example>。 做完这些，应用看起来是这样的：<live-example></live-example>。
.l-main-section .l-main-section
:marked :marked
@ -431,7 +431,7 @@ a#add-hero-detail
Your app should look like this <live-example></live-example>. Your app should look like this <live-example></live-example>.
现在，应用应该变成了这样：<live-example>在线例子</live-example>。 现在，应用应该变成了这样：<live-example></live-example>。
.l-main-section .l-main-section
:marked :marked

2
public/docs/ts/latest/tutorial/toh-pt4.jade
View File

@ -21,7 +21,7 @@ include ../_util-fns
When you're done with this page, the app should look like this <live-example></live-example>. When you're done with this page, the app should look like this <live-example></live-example>.
当我们完成本章的内容是，本应用会变成这样：<live-example>在线例子</live-example>。 当我们完成本章的内容是，本应用会变成这样：<live-example></live-example>。
.l-main-section .l-main-section
:marked :marked

4
public/docs/ts/latest/tutorial/toh-pt5.jade
View File

@ -44,7 +44,7 @@ figure.image-display
:marked :marked
When you're done with this page, the app should look like this <live-example></live-example>. When you're done with this page, the app should look like this <live-example></live-example>.
完成本章之后，应用会变成这样：<live-example>在线例子</live-example>。 完成本章之后，应用会变成这样：<live-example></live-example>。
include ../../../_includes/_see-addr-bar include ../../../_includes/_see-addr-bar
@ -1431,7 +1431,7 @@ figure.image-display
Review the sample source code in the <live-example></live-example> for this page. Review the sample source code in the <live-example></live-example> for this page.
Verify that you have the following structure: Verify that you have the following structure:
回顾一下本章<live-example>在线例子</live-example>中范例代码。 回顾一下本章<live-example></live-example>中范例代码。
验证我们是否已经得到了如下结构： 验证我们是否已经得到了如下结构：
.filetree .filetree

4
public/docs/ts/latest/tutorial/toh-pt6.jade
View File

@ -24,7 +24,7 @@ block includes
When you're done with this page, the app should look like this <live-example></live-example>. When you're done with this page, the app should look like this <live-example></live-example>.
当我们完成这一章时，应用会变成这样：<live-example>在线例子</live-example>。 当我们完成这一章时，应用会变成这样：<live-example></live-example>。
.l-main-section .l-main-section
:marked :marked
@ -865,7 +865,7 @@ figure.image-display
Review the sample source code in the <live-example></live-example> for this page. Review the sample source code in the <live-example></live-example> for this page.
Verify that you have the following structure: Verify that you have the following structure:
回顾一下本章<live-example>在线例子</live-example>中的范例代码。 回顾一下本章<live-example></live-example>中的范例代码。
验证我们是否得到了如下结构： 验证我们是否得到了如下结构：
.filetree .filetree