Zhicheng Wang
parent
034001d407
commit
d7aa1e95c8
|
|
@ -13,7 +13,7 @@ a(id="top")
|
|||
:marked
|
||||
**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
|
||||
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ include ../_util-fns
|
|||
:marked
|
||||
**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
|
||||
<a id="parent-to-child"></a>
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@ include ../_util-fns
|
|||
:marked
|
||||
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
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ a(id='top')
|
|||
:marked
|
||||
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
|
||||
tr
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
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
|
||||
.l-main-section
|
||||
|
|
|
|||
|
|
@ -78,7 +78,7 @@ include ../_util-fns
|
|||
:marked
|
||||
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")
|
||||
.l-main-section
|
||||
|
|
|
|||
|
|
@ -79,7 +79,7 @@ figure
|
|||
.l-sub-section
|
||||
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
|
||||
:marked
|
||||
|
|
|
|||
|
|
@ -35,7 +35,9 @@ block includes
|
|||
[绑定第二个属性](#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
|
||||
:marked
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@ block includes
|
|||
|
||||
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
|
||||
:marked
|
||||
|
|
|
|||
|
|
@ -131,7 +131,7 @@ block includes
|
|||
|
||||
Run the <live-example></live-example>.
|
||||
|
||||
运行<live-example>在线例子</live-example>.
|
||||
运行<live-example></live-example>.
|
||||
|
||||
.l-main-section#why-di
|
||||
:marked
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ figure.image-display
|
|||
The <live-example></live-example> demonstrates all of the syntax and code
|
||||
snippets described in this page.
|
||||
|
||||
这个<live-example>在线例子</live-example>演示了本章中描述的所有语法和代码片段。
|
||||
这个<live-example></live-example>演示了本章中描述的所有语法和代码片段。
|
||||
|
||||
.l-main-section#interpolation
|
||||
:marked
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@ include ../_util-fns
|
|||
|
||||
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
|
||||
:marked
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ block includes
|
|||
|
||||
Try the <live-example></live-example>.
|
||||
|
||||
试试<live-example>在线例子</live-example>.
|
||||
试试<live-example></live-example>.
|
||||
|
||||
.l-main-section
|
||||
:marked
|
||||
|
|
|
|||
|
|
@ -128,7 +128,7 @@ table(width="100%")
|
|||
</span>
|
||||
|
||||
查找这些例子在线版本的链接，通常在页面的开头部分附近。
|
||||
例如[架构](architecture.html)章的<live-example name="architecture">在线例子</live-example>。
|
||||
例如[架构](architecture.html)章的<live-example name="architecture"></live-example>。
|
||||
<span if-docs="ts">
|
||||
该链接启动浏览器代码编辑器，你可以查看、修改、保存和下载代码。
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -93,7 +93,7 @@ figure
|
|||
:marked
|
||||
Try the <live-example></live-example>.
|
||||
|
||||
试一试<live-example>在线例子</live-example>。
|
||||
试一试<live-example></live-example>。
|
||||
|
||||
a#hooks-overview
|
||||
.l-main-section
|
||||
|
|
@ -319,7 +319,7 @@ a#other-lifecycle-hooks
|
|||
demonstrates the lifecycle hooks in action through a series of exercises
|
||||
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
|
||||
a *child* component that illustrates one or more of the lifecycle hook methods.
|
||||
|
|
|
|||
|
|
@ -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">试试在线例子。</live-example>
|
||||
|
||||
### Static bootstrapping with the ahead-of-time (AOT) compiler
|
||||
|
||||
### 使用预编译器 (AoT - Ahead-Of-Time) 进行静态引导
|
||||
|
|
@ -1169,6 +1171,8 @@ a#contact-module-v1
|
|||
|
||||
试试范例的`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>
|
||||
|
||||
a#lazy-load
|
||||
|
|
|
|||
|
|
@ -28,9 +28,10 @@ block includes
|
|||
|
||||
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.
|
||||
|
||||
欢迎来到Angular“管道(Pipe)”的世界！我们可以把这种简单的“值-显示”转换器声明在HTML中。
|
||||
试试<live-example>在线例子</live-example>。
|
||||
|
||||
.l-main-section
|
||||
|
|
@ -286,7 +287,7 @@ figure.image-display
|
|||
To probe the behavior in the <live-example></live-example>,
|
||||
change the value and optional exponent in the template.
|
||||
|
||||
如果我们试一下这个<live-example>在线例子</live-example>，就可以通过修改值和模板中的可选部分来体会其行为。
|
||||
如果我们试一下这个<live-example></live-example>，就可以通过修改值和模板中的可选部分来体会其行为。
|
||||
|
||||
## Power Boost Calculator
|
||||
|
||||
|
|
@ -370,7 +371,7 @@ a#change-detection
|
|||
Notice the odd behavior in the <live-example></live-example>:
|
||||
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.
|
||||
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.
|
||||
|
||||
唯一的重大改动就是管道。
|
||||
我们可以在<live-example>在线例子</live-example>中确认，当我们输入新的英雄甚至修改#[code heroes]数组时，这个#[i 会飞的英雄]的显示也跟着更新了。
|
||||
我们可以在<live-example></live-example>中确认，当我们输入新的英雄甚至修改#[code heroes]数组时，这个#[i 会飞的英雄]的显示也跟着更新了。
|
||||
|
||||
h3#async-pipe The impure #[i AsyncPipe]
|
||||
:marked
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
At the moment this guide is describing the state of affairs *prior* to those steps.
|
||||
|
||||
<live-example>在线例子</live-example>*高亮了*选中的行，因为它演示的是应用的最终状态，因此包含了我们*即将*示范的步骤。
|
||||
<live-example></live-example>*高亮了*选中的行，因为它演示的是应用的最终状态，因此包含了我们*即将*示范的步骤。
|
||||
此刻，我们描述的仍是那些步骤*之前*的状态。
|
||||
:marked
|
||||
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>
|
||||
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
|
||||
.l-main-section
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ block includes
|
|||
:marked
|
||||
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
|
||||
h2#report-issues
|
||||
|
|
|
|||
|
|
@ -1338,4 +1338,4 @@ block redirect-to-web-api
|
|||
:marked
|
||||
See the full source code in the <live-example></live-example>.
|
||||
|
||||
要想查看完整的源代码，请参见<live-example>在线例子</live-example>。
|
||||
要想查看完整的源代码，请参见<live-example></live-example>。
|
||||
|
|
|
|||
|
|
@ -134,8 +134,7 @@ block qs-seed
|
|||
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").
|
||||
|
||||
**《快速起步》种子** 包含了与《快速起步》游乐场一样的应用。该应用有<live-example>自己的*游乐场*</live-example>，
|
||||
但是，它真正的目的是提供坚实的*本地*开发基础。
|
||||
**《快速起步》种子** 包含了与《快速起步》游乐场一样的应用，但是，它真正的目的是提供坚实的*本地*开发基础。
|
||||
所以你的电脑里的项目目录里面有*更多文件*，参见[搭建剖析](setup-systemjs-anatomy.html "Setup Anatomy")。
|
||||
|
||||
block core-files
|
||||
|
|
|
|||
|
|
@ -70,7 +70,7 @@ style.
|
|||
|
||||
Try the <live-example></live-example>.
|
||||
|
||||
试试<live-example>在线例子</live-example>。
|
||||
试试<live-example></live-example>。
|
||||
|
||||
a#definition
|
||||
.l-main-section
|
||||
|
|
|
|||
|
|
@ -119,7 +119,7 @@ a#toc
|
|||
The <live-example></live-example>
|
||||
demonstrates all of the syntax and code snippets described in this guide.
|
||||
|
||||
<live-example>在线例子</live-example>演示了本章中描述的所有语法和代码片段。
|
||||
<live-example></live-example>演示了本章中描述的所有语法和代码片段。
|
||||
|
||||
.l-hr
|
||||
a#html
|
||||
|
|
@ -1739,7 +1739,6 @@ a#two-way
|
|||
`SizerComponent.size`初始值是`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.
|
||||
Angular _desugars_ the `SizerComponent` binding into this:
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ a#top
|
|||
|
||||
* [Live examples](#live-examples "Live examples of the tests in this guide")
|
||||
|
||||
[在线例子](#live-examples "本章这些测试的在线例子")
|
||||
[在线例子](#live-examples "本章这些测试的在线例子")
|
||||
|
||||
* [Introduction to Angular testing](#testing-intro)
|
||||
|
||||
|
|
@ -56,21 +56,23 @@ a#top
|
|||
|
||||
[测试一个组件](#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)
|
||||
|
||||
* [_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)
|
||||
|
||||
|
|
@ -85,19 +87,19 @@ a#top
|
|||
|
||||
[测试带有外部模板的组件](#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)
|
||||
|
||||
|
|
@ -116,7 +118,7 @@ a#top
|
|||
|
||||
[获取注入的服务](#get-injected-service)
|
||||
|
||||
* [_TestBed.get_](#testbed-get)
|
||||
* [`TestBed.get`](#testbed-get)
|
||||
|
||||
* [Always get the service from an injector](#service-from-injector)
|
||||
|
||||
|
|
@ -139,31 +141,31 @@ a#top
|
|||
|
||||
[同步测试](#sync-tests)
|
||||
|
||||
* [The _async_ funciton in it](#async)
|
||||
* [The `async` funciton in it](#async)
|
||||
|
||||
[`it`中的`async`函数](#async)
|
||||
|
||||
* [_whenStable_](#when-stable)
|
||||
* [`whenStable`](#when-stable)
|
||||
|
||||
* [The _fakeAsync_ function](#fake-async)
|
||||
* [The `fakeAsync` function](#fake-async)
|
||||
|
||||
[`fakeAsync` 函数](#fake-async)
|
||||
|
||||
* [The _tick_ function](#tick)
|
||||
* [The `tick` function](#tick)
|
||||
|
||||
[`tick`函数](#tick)
|
||||
|
||||
* [_jasmine.done_](#jasmine-done)
|
||||
* [`jasmine.done`](#jasmine-done)
|
||||
|
||||
* [Test a component with inputs and outputs](#component-with-input-output)
|
||||
|
||||
[测试带有输入属性和输出属性的组件](#component-with-input-output)
|
||||
|
||||
* [Test _DashboardHeroComponent_ stand-alone](#dashboard-standalone)
|
||||
* [Test `DashboardHeroComponent` stand-alone](#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)
|
||||
|
||||
|
|
@ -173,7 +175,7 @@ a#top
|
|||
|
||||
[测试路由组件](#routed-component)
|
||||
|
||||
* [The _inject_ helper function](#inject)
|
||||
* [The `inject` helper function](#inject)
|
||||
|
||||
[`inject`助手函数](#inject)
|
||||
|
||||
|
|
@ -181,15 +183,15 @@ a#top
|
|||
|
||||
[测试带参数的路由组件](#routed-component-w-param)
|
||||
|
||||
* [Create an _Observable_ test double](#stub-observable)
|
||||
* [Create an `Observable` test double](#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)
|
||||
|
||||
* [Use a _page_ object to simplify setup](#page-object)
|
||||
* [Use a `page` object to simplify setup](#page-object)
|
||||
|
||||
[使用`page`对象来简化设置](#page-object)
|
||||
|
||||
|
|
@ -205,7 +207,7 @@ a#top
|
|||
|
||||
[改写（Override）组件的提供商](#component-override)
|
||||
|
||||
* [The _overrideComponent_ method](#override-component-method)
|
||||
* [The `overrideComponent` method](#override-component-method)
|
||||
|
||||
[`overrideComponent`方法](#override-component-method)
|
||||
|
||||
|
|
@ -222,7 +224,7 @@ a#top
|
|||
[更多的改写](#more-overrides)
|
||||
|
||||
|
||||
* [Test a _RouterOutlet_ component](#router-outlet-component)
|
||||
* [Test a `RouterOutlet` component](#router-outlet-component)
|
||||
|
||||
[测试`RouterOutlet`组件](#router-outlet-component)
|
||||
|
||||
|
|
@ -230,11 +232,11 @@ a#top
|
|||
|
||||
[模拟不需要的组件](#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)
|
||||
|
||||
|
|
@ -243,9 +245,9 @@ a#top
|
|||
[为什么要这样写测试？](#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)
|
||||
|
||||
|
|
@ -280,25 +282,25 @@ a#top
|
|||
|
||||
[Angular单元测试工具类 API ](#atu-apis)
|
||||
|
||||
* [_TestBed_ class summary](#testbed-class-summary)
|
||||
* [`TestBed` class summary](#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)
|
||||
|
||||
* [The _ComponentFixture_ methods](#component-fixture-methods)
|
||||
* [The `ComponentFixture` methods](#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)
|
||||
|
|
@ -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
|
||||
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 can test components in isolation as well.
|
||||
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.
|
||||
|
||||
我们也同样可以对组件写独立单元测试。
|
||||
不过，独立单元测试无法体现组件与Angular的交互。
|
||||
具体来说，就是不能发现组件类如何与它的模板或其它组件交互。
|
||||
|
||||
Such tests require the **Angular testing utilities**.
|
||||
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
|
||||
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).
|
||||
|
||||
这时你需要*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
|
||||
and to lock in a few basic testing skills.
|
||||
|
||||
但首先，我们要先随便写一个测试来验证测试环境是否已经就绪了，并掌握一些基础的测试技术。
|
||||
|
||||
a(href="#top").to-top Back to top
|
||||
a(href="#top").to-top 回到顶部
|
||||
|
||||
.l-hr
|
||||
|
||||
|
|
@ -706,9 +725,14 @@ a#live-karma-example
|
|||
:marked
|
||||
### 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.
|
||||
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 回到顶部
|
||||
|
||||
|
|
@ -718,26 +742,46 @@ a#simple-component-test
|
|||
:marked
|
||||
## Test a component
|
||||
|
||||
## 测试一个组件
|
||||
|
||||
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
|
||||
a good place to start.
|
||||
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='.')
|
||||
|
||||
:marked
|
||||
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
|
||||
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,
|
||||
for reasons explained in the [FAQ](#faq) answer to
|
||||
["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.
|
||||
|
||||
在测试文件中，我们先用ES6的`import`语句来引入测试所需的符号。
|
||||
|
||||
+makeExample('testing/ts/src/app/banner-inline.component.spec.ts', 'imports', 'src/app/banner-inline.component.spec.ts (imports)')(format='.')
|
||||
|
||||
a#configure-testing-module
|
||||
:marked
|
||||
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='.')
|
||||
|
||||
a#testbed
|
||||
|
|
@ -2138,10 +2182,10 @@ a#tests-w-observable-double
|
|||
: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>.
|
||||
|
||||
a(href="#top").to-top Back to top
|
||||
|
||||
到<live-example plnkr="app-specs">在线例子</live-example>查看和下载**所有**本章应用程序测试代码。
|
||||
|
||||
a(href="#top").to-top Back to top
|
||||
|
||||
.l-hr
|
||||
|
||||
a#page-object
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ include ../_util-fns
|
|||
|
||||
Run the <live-example></live-example>.
|
||||
|
||||
运行<live-example>在线例子</live-example>
|
||||
运行<live-example></live-example>
|
||||
|
||||
|
||||
:marked
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ include ../_util-fns
|
|||
:marked
|
||||
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
|
||||
:marked
|
||||
|
|
@ -272,7 +272,7 @@ code-example(language="sh" class="code-shell").
|
|||
|
||||
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:
|
||||
|
||||
|
|
|
|||
|
|
@ -463,7 +463,7 @@ code-example(language="sh" class="code-shell").
|
|||
|
||||
Run the <live-example></live-example> for this part.
|
||||
|
||||
运行这部分的<live-example>在线例子</live-example>。
|
||||
运行这部分的<live-example></live-example>。
|
||||
|
||||
### The Road Ahead
|
||||
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ include ../_util-fns
|
|||
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
|
||||
:marked
|
||||
|
|
@ -431,7 +431,7 @@ a#add-hero-detail
|
|||
|
||||
Your app should look like this <live-example></live-example>.
|
||||
|
||||
现在，应用应该变成了这样：<live-example>在线例子</live-example>。
|
||||
现在，应用应该变成了这样：<live-example></live-example>。
|
||||
|
||||
.l-main-section
|
||||
:marked
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ include ../_util-fns
|
|||
|
||||
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
|
||||
:marked
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ figure.image-display
|
|||
:marked
|
||||
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
|
||||
|
||||
|
|
@ -1431,7 +1431,7 @@ figure.image-display
|
|||
Review the sample source code in the <live-example></live-example> for this page.
|
||||
Verify that you have the following structure:
|
||||
|
||||
回顾一下本章<live-example>在线例子</live-example>中范例代码。
|
||||
回顾一下本章<live-example></live-example>中范例代码。
|
||||
验证我们是否已经得到了如下结构：
|
||||
|
||||
.filetree
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ block includes
|
|||
|
||||
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
|
||||
:marked
|
||||
|
|
@ -865,7 +865,7 @@ figure.image-display
|
|||
Review the sample source code in the <live-example></live-example> for this page.
|
||||
Verify that you have the following structure:
|
||||
|
||||
回顾一下本章<live-example>在线例子</live-example>中的范例代码。
|
||||
回顾一下本章<live-example></live-example>中的范例代码。
|
||||
验证我们是否得到了如下结构：
|
||||
|
||||
.filetree
|
||||
|
|
|
|||
Loading…
Reference in New Issue