diff --git a/public/docs/ts/latest/cookbook/ajs-quick-reference.jade b/public/docs/ts/latest/cookbook/ajs-quick-reference.jade
index b49a137902..60c7dcc6aa 100644
--- a/public/docs/ts/latest/cookbook/ajs-quick-reference.jade
+++ b/public/docs/ts/latest/cookbook/ajs-quick-reference.jade
@@ -13,7 +13,7 @@ a(id="top")
:marked
**See the Angular syntax in this **.
- **可到在线例子中查看Angular语法**。
+ **可到中查看Angular语法**。
## Contents
diff --git a/public/docs/ts/latest/cookbook/component-communication.jade b/public/docs/ts/latest/cookbook/component-communication.jade
index 35d82d4a75..7fb01f5248 100644
--- a/public/docs/ts/latest/cookbook/component-communication.jade
+++ b/public/docs/ts/latest/cookbook/component-communication.jade
@@ -44,7 +44,7 @@ include ../_util-fns
:marked
**See the **.
- **参见在线例子**。
+ **参见**。
.l-main-section
diff --git a/public/docs/ts/latest/cookbook/dynamic-form.jade b/public/docs/ts/latest/cookbook/dynamic-form.jade
index af5f6dff60..c66a8c3d7d 100644
--- a/public/docs/ts/latest/cookbook/dynamic-form.jade
+++ b/public/docs/ts/latest/cookbook/dynamic-form.jade
@@ -54,7 +54,7 @@ include ../_util-fns
:marked
See the .
- **参见在线例子**。
+ **参见**。
.l-main-section
diff --git a/public/docs/ts/latest/cookbook/set-document-title.jade b/public/docs/ts/latest/cookbook/set-document-title.jade
index b6703adf59..aac47011be 100644
--- a/public/docs/ts/latest/cookbook/set-document-title.jade
+++ b/public/docs/ts/latest/cookbook/set-document-title.jade
@@ -9,7 +9,7 @@ a(id='top')
:marked
See the .
- **参见在线例子**。
+ **参见**。
table
tr
diff --git a/public/docs/ts/latest/cookbook/ts-to-js.jade b/public/docs/ts/latest/cookbook/ts-to-js.jade
index 41427c8d5c..78763d1480 100644
--- a/public/docs/ts/latest/cookbook/ts-to-js.jade
+++ b/public/docs/ts/latest/cookbook/ts-to-js.jade
@@ -67,7 +67,7 @@ a#toc
**Run and compare the live TypeScript and JavaScript
code shown in this cookbook.**
- 运行在线例子,比较 _TypeScript_ 版和 JavaScript 版的代码。
+ 运行在线例子,比较 TypeScript 版和 JavaScript 版的代码。
a#from-ts
.l-main-section
diff --git a/public/docs/ts/latest/guide/animations.jade b/public/docs/ts/latest/guide/animations.jade
index 1f4825c754..cf521f5811 100644
--- a/public/docs/ts/latest/guide/animations.jade
+++ b/public/docs/ts/latest/guide/animations.jade
@@ -78,7 +78,7 @@ include ../_util-fns
:marked
The examples in this page are available as a .
- 本章中引用的这个例子可以到在线例子去体验。
+ 本章中引用的这个例子可以到去体验。
a(id="example-transitioning-between-states")
.l-main-section
diff --git a/public/docs/ts/latest/guide/architecture.jade b/public/docs/ts/latest/guide/architecture.jade
index ea81edb5ae..f0e5f10413 100644
--- a/public/docs/ts/latest/guide/architecture.jade
+++ b/public/docs/ts/latest/guide/architecture.jade
@@ -79,7 +79,7 @@ figure
.l-sub-section
p The code referenced on this page is available as a .
- p 本章所引用的代码见在线例子。
+ p 本章所引用的代码见。
.l-main-section
:marked
diff --git a/public/docs/ts/latest/guide/attribute-directives.jade b/public/docs/ts/latest/guide/attribute-directives.jade
index 93a9c7ed40..6ea7caca74 100644
--- a/public/docs/ts/latest/guide/attribute-directives.jade
+++ b/public/docs/ts/latest/guide/attribute-directives.jade
@@ -35,7 +35,9 @@ block includes
[绑定第二个属性](#second-property)
- 试试在线例子。
+ Try the .
+
+ 试试。
.l-main-section#directive-overview
:marked
diff --git a/public/docs/ts/latest/guide/component-styles.jade b/public/docs/ts/latest/guide/component-styles.jade
index d765c8b321..06af71c7f4 100644
--- a/public/docs/ts/latest/guide/component-styles.jade
+++ b/public/docs/ts/latest/guide/component-styles.jade
@@ -48,7 +48,7 @@ block includes
You can run the in Plunker and download the code from there.
- 你可以在Plunker上运行本章这些代码的在线例子并下载这些代码。
+ 你可以在Plunker上运行本章这些代码的并下载这些代码。
.l-main-section
:marked
diff --git a/public/docs/ts/latest/guide/dependency-injection.jade b/public/docs/ts/latest/guide/dependency-injection.jade
index a761f24cab..72dcddfc70 100644
--- a/public/docs/ts/latest/guide/dependency-injection.jade
+++ b/public/docs/ts/latest/guide/dependency-injection.jade
@@ -131,7 +131,7 @@ block includes
Run the .
- 运行在线例子.
+ 运行.
.l-main-section#why-di
:marked
diff --git a/public/docs/ts/latest/guide/displaying-data.jade b/public/docs/ts/latest/guide/displaying-data.jade
index 69f9416d17..92df47e34e 100644
--- a/public/docs/ts/latest/guide/displaying-data.jade
+++ b/public/docs/ts/latest/guide/displaying-data.jade
@@ -42,7 +42,7 @@ figure.image-display
The demonstrates all of the syntax and code
snippets described in this page.
- 这个在线例子演示了本章中描述的所有语法和代码片段。
+ 这个演示了本章中描述的所有语法和代码片段。
.l-main-section#interpolation
:marked
diff --git a/public/docs/ts/latest/guide/forms.jade b/public/docs/ts/latest/guide/forms.jade
index 8ba8bec6e2..2819a21ca6 100644
--- a/public/docs/ts/latest/guide/forms.jade
+++ b/public/docs/ts/latest/guide/forms.jade
@@ -48,7 +48,7 @@ include ../_util-fns
You can run the in Plunker and download the code from there.
- 你可以在Plunker中运行在线例子,并且从那里下载代码。
+ 你可以在Plunker中运行,并且从那里下载代码。
.l-main-section#template-driven
:marked
diff --git a/public/docs/ts/latest/guide/hierarchical-dependency-injection.jade b/public/docs/ts/latest/guide/hierarchical-dependency-injection.jade
index 52e4402111..f200f64e0a 100644
--- a/public/docs/ts/latest/guide/hierarchical-dependency-injection.jade
+++ b/public/docs/ts/latest/guide/hierarchical-dependency-injection.jade
@@ -21,7 +21,7 @@ block includes
Try the .
- 试试在线例子.
+ 试试.
.l-main-section
:marked
diff --git a/public/docs/ts/latest/guide/index.jade b/public/docs/ts/latest/guide/index.jade
index 62a6c19123..268efa4761 100644
--- a/public/docs/ts/latest/guide/index.jade
+++ b/public/docs/ts/latest/guide/index.jade
@@ -128,7 +128,7 @@ table(width="100%")
查找这些例子在线版本的链接,通常在页面的开头部分附近。
- 例如[架构](architecture.html)章的在线例子。
+ 例如[架构](architecture.html)章的。
该链接启动浏览器代码编辑器,你可以查看、修改、保存和下载代码。
diff --git a/public/docs/ts/latest/guide/lifecycle-hooks.jade b/public/docs/ts/latest/guide/lifecycle-hooks.jade
index 2e1adda926..c5baac042f 100644
--- a/public/docs/ts/latest/guide/lifecycle-hooks.jade
+++ b/public/docs/ts/latest/guide/lifecycle-hooks.jade
@@ -93,7 +93,7 @@ figure
:marked
Try the .
- 试一试在线例子。
+ 试一试。
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`.
- 在线例子通过在受控于根组件`AppComponent`的一些组件上进行的一系列练习,演示了生命周期钩子的运作方式。
+ 通过在受控于根组件`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.
diff --git a/public/docs/ts/latest/guide/ngmodule.jade b/public/docs/ts/latest/guide/ngmodule.jade
index 0a20c64bbf..28127450ad 100644
--- a/public/docs/ts/latest/guide/ngmodule.jade
+++ b/public/docs/ts/latest/guide/ngmodule.jade
@@ -317,6 +317,8 @@ a#bootstrap
这里的例子演示进行动态引导的方法。
Try the live example.
+
+ 试试在线例子。
### Static bootstrapping with the ahead-of-time (AOT) compiler
@@ -1169,6 +1171,8 @@ a#contact-module-v1
试试范例的`ContactModule`版。
+ Try the live example.
+
试试在线例子
a#lazy-load
diff --git a/public/docs/ts/latest/guide/pipes.jade b/public/docs/ts/latest/guide/pipes.jade
index 62eb40252b..a17032d3cd 100644
--- a/public/docs/ts/latest/guide/pipes.jade
+++ b/public/docs/ts/latest/guide/pipes.jade
@@ -27,10 +27,11 @@ block includes
我们几乎会把它们看做某种CSS样式,事实上,我们也确实更喜欢在HTML模板中应用它们 —— 就像CSS样式一样。
Introducing Angular pipes, a way to write display-value transformations that you can declare in your HTML.
+
+ 通过引入Angular管道,我们可以把这种简单的“显示-值”转换器声明在HTML中。
You can run the in Plunker and download the code from there.
- 欢迎来到Angular“管道(Pipe)”的世界!我们可以把这种简单的“值-显示”转换器声明在HTML中。
试试在线例子。
.l-main-section
@@ -286,7 +287,7 @@ figure.image-display
To probe the behavior in the ,
change the value and optional exponent in the template.
- 如果我们试一下这个在线例子,就可以通过修改值和模板中的可选部分来体会其行为。
+ 如果我们试一下这个,就可以通过修改值和模板中的可选部分来体会其行为。
## Power Boost Calculator
@@ -370,7 +371,7 @@ a#change-detection
Notice the odd behavior in the :
when you add flying heroes, none of them are displayed under "Heroes who fly."
- 当运行例子时,我们看到一种奇怪的行为(试试在线例子)。添加的每个英雄都是会飞行的英雄,但是没有一个被显示出来。
+ 当运行时,我们看到一种奇怪的行为。添加的每个英雄都是会飞行的英雄,但是没有一个被显示出来。
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.
唯一的重大改动就是管道。
- 我们可以在在线例子中确认,当我们输入新的英雄甚至修改#[code heroes]数组时,这个#[i 会飞的英雄]的显示也跟着更新了。
+ 我们可以在中确认,当我们输入新的英雄甚至修改#[code heroes]数组时,这个#[i 会飞的英雄]的显示也跟着更新了。
h3#async-pipe The impure #[i AsyncPipe]
:marked
diff --git a/public/docs/ts/latest/guide/router.jade b/public/docs/ts/latest/guide/router.jade
index a014c376b9..a2afe1c922 100644
--- a/public/docs/ts/latest/guide/router.jade
+++ b/public/docs/ts/latest/guide/router.jade
@@ -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.
- 在线例子*高亮了*选中的行,因为它演示的是应用的最终状态,因此包含了我们*即将*示范的步骤。
+ *高亮了*选中的行,因为它演示的是应用的最终状态,因此包含了我们*即将*示范的步骤。
此刻,我们描述的仍是那些步骤*之前*的状态。
: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
where you can download the final source code.
- 本章中涉及到了很多背景知识,而且本应用程序也太大了,所以没法在这里显示。请访问在线例子,在那里你可以下载最终的源码。
+ 本章中涉及到了很多背景知识,而且本应用程序也太大了,所以没法在这里显示。请访问,在那里你可以下载最终的源码。
a#appendices
.l-main-section
diff --git a/public/docs/ts/latest/guide/security.jade b/public/docs/ts/latest/guide/security.jade
index 0ae5fec0e9..31cf413308 100644
--- a/public/docs/ts/latest/guide/security.jade
+++ b/public/docs/ts/latest/guide/security.jade
@@ -46,7 +46,7 @@ block includes
:marked
You can run the in Plunker and download the code from there.
- 运行在线例子来试用本页的代码。
+ 运行来试用本页的代码。
.l-main-section
h2#report-issues
diff --git a/public/docs/ts/latest/guide/server-communication.jade b/public/docs/ts/latest/guide/server-communication.jade
index 8e40c14966..d12274dea4 100644
--- a/public/docs/ts/latest/guide/server-communication.jade
+++ b/public/docs/ts/latest/guide/server-communication.jade
@@ -1338,4 +1338,4 @@ block redirect-to-web-api
:marked
See the full source code in the .
- 要想查看完整的源代码,请参见在线例子。
+ 要想查看完整的源代码,请参见。
diff --git a/public/docs/ts/latest/guide/setup.jade b/public/docs/ts/latest/guide/setup.jade
index 7d8cdfb1aa..ead5074fae 100644
--- a/public/docs/ts/latest/guide/setup.jade
+++ b/public/docs/ts/latest/guide/setup.jade
@@ -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").
- **《快速起步》种子** 包含了与《快速起步》游乐场一样的应用。该应用有自己的*游乐场*,
- 但是,它真正的目的是提供坚实的*本地*开发基础。
+ **《快速起步》种子** 包含了与《快速起步》游乐场一样的应用,但是,它真正的目的是提供坚实的*本地*开发基础。
所以你的电脑里的项目目录里面有*更多文件*,参见[搭建剖析](setup-systemjs-anatomy.html "Setup Anatomy")。
block core-files
diff --git a/public/docs/ts/latest/guide/structural-directives.jade b/public/docs/ts/latest/guide/structural-directives.jade
index b932bcdc15..5021e96e66 100644
--- a/public/docs/ts/latest/guide/structural-directives.jade
+++ b/public/docs/ts/latest/guide/structural-directives.jade
@@ -70,7 +70,7 @@ style.
Try the .
- 试试在线例子。
+ 试试。
a#definition
.l-main-section
diff --git a/public/docs/ts/latest/guide/template-syntax.jade b/public/docs/ts/latest/guide/template-syntax.jade
index 054dc33b53..cb6e041153 100644
--- a/public/docs/ts/latest/guide/template-syntax.jade
+++ b/public/docs/ts/latest/guide/template-syntax.jade
@@ -119,7 +119,7 @@ a#toc
The
demonstrates all of the syntax and code snippets described in this guide.
- 在线例子演示了本章中描述的所有语法和代码片段。
+ 演示了本章中描述的所有语法和代码片段。
.l-hr
a#html
@@ -1739,7 +1739,6 @@ a#two-way
`SizerComponent.size`初始值是`AppComponent.fontSizePx`。
点击按钮时,通过双向绑定更新`AppComponent.fontSizePx`。
被修改的`AppComponent.fontSizePx`通过_样式_绑定,改变文本的显示大小。
- 试一下在线例子。
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:
diff --git a/public/docs/ts/latest/guide/testing.jade b/public/docs/ts/latest/guide/testing.jade
index d688d48ced..997f49eea0 100644
--- a/public/docs/ts/latest/guide/testing.jade
+++ b/public/docs/ts/latest/guide/testing.jade
@@ -15,8 +15,8 @@ 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)
+
+ [`TestBed`(测试台)](#testbed)
- * [_createComponent_](#create-component)
+ * [`createComponent`](#create-component)
- * [_ComponentFixture_, _DebugElement_, and _query(By.css)_](#component-fixture)
+ * [`ComponentFixture`, `DebugElement`, and `query(By.css)`](#component-fixture)
- [_ComponentFixture_, _DebugElement_, 和 _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)
@@ -514,23 +516,40 @@ a#isolated-v-testing-utilities
examine an instance of a class all by itself without any dependence on Angular or any injected values.
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
@@ -705,9 +724,14 @@ figure.image-display
a#live-karma-example
:marked
### Try the live example
+
+ ### 试试这个在线例子
You can also try this test as a in plunker.
All of the tests in this guide are available as [live examples](#live-examples "Live examples of these tests").
+
+ 你还可以在plunker的中试运行这个测试。
+ 本章的所有测试都有相应的[在线例子](#live-examples "Live examples of these tests")。
a(href="#top").to-top Back to top
a(href="#top").to-top 回到顶部
@@ -717,27 +741,47 @@ a(href="#top").to-top 回到顶部
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 `
` tag.
+
+ 大多数开发人员首先要测试的就是Angular组件。
+ `src/app/banner-inline.component.ts`中的`BannerComponent`是这个应用中最简单的组件,也是一个好的起点。
+ 它所表示的是屏幕顶部``标签中的应用标题。
+
+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,9 +2182,9 @@ a#tests-w-observable-double
:marked
Inspect and download _all_ of the guide's application test code with this live example.
-a(href="#top").to-top Back to top
-
到在线例子查看和下载**所有**本章应用程序测试代码。
+
+a(href="#top").to-top Back to top
.l-hr
diff --git a/public/docs/ts/latest/guide/user-input.jade b/public/docs/ts/latest/guide/user-input.jade
index 52cc71175e..78f57ec74c 100644
--- a/public/docs/ts/latest/guide/user-input.jade
+++ b/public/docs/ts/latest/guide/user-input.jade
@@ -11,7 +11,7 @@ include ../_util-fns
Run the .
- 运行在线例子
+ 运行
:marked
diff --git a/public/docs/ts/latest/tutorial/toh-pt1.jade b/public/docs/ts/latest/tutorial/toh-pt1.jade
index 8028e17c87..b1a997dbfe 100644
--- a/public/docs/ts/latest/tutorial/toh-pt1.jade
+++ b/public/docs/ts/latest/tutorial/toh-pt1.jade
@@ -33,7 +33,7 @@ include ../_util-fns
:marked
When you're done with this page, the app should look like this .
- 在我们完成本章时,得到的应用和这个在线例子一样。
+ 在我们完成本章时,得到的应用和这个一样。
a#keep-transpiling
:marked
@@ -272,7 +272,7 @@ code-example(language="sh" class="code-shell").
Your app should look like this .
- 运行这部分的在线例子。
+ 运行这部分的。
Here's the complete `app.component.ts` as it stands now:
diff --git a/public/docs/ts/latest/tutorial/toh-pt2.jade b/public/docs/ts/latest/tutorial/toh-pt2.jade
index e904fc75c0..9164b35f77 100644
--- a/public/docs/ts/latest/tutorial/toh-pt2.jade
+++ b/public/docs/ts/latest/tutorial/toh-pt2.jade
@@ -463,7 +463,7 @@ code-example(language="sh" class="code-shell").
Run the for this part.
- 运行这部分的在线例子。
+ 运行这部分的。
### The Road Ahead
diff --git a/public/docs/ts/latest/tutorial/toh-pt3.jade b/public/docs/ts/latest/tutorial/toh-pt3.jade
index a0de040cb1..05c4273bad 100644
--- a/public/docs/ts/latest/tutorial/toh-pt3.jade
+++ b/public/docs/ts/latest/tutorial/toh-pt3.jade
@@ -22,7 +22,7 @@ include ../_util-fns
When you're done, the app should look like this .
本章中,我们要做的第一步就是把英雄详情拆分到一个独立的、可复用的组件中。
- 做完这些,应用看起来是这样的:在线例子。
+ 做完这些,应用看起来是这样的:。
.l-main-section
:marked
@@ -431,7 +431,7 @@ a#add-hero-detail
Your app should look like this .
- 现在,应用应该变成了这样:在线例子。
+ 现在,应用应该变成了这样:。
.l-main-section
:marked
diff --git a/public/docs/ts/latest/tutorial/toh-pt4.jade b/public/docs/ts/latest/tutorial/toh-pt4.jade
index d3388ab085..ecb0036c02 100644
--- a/public/docs/ts/latest/tutorial/toh-pt4.jade
+++ b/public/docs/ts/latest/tutorial/toh-pt4.jade
@@ -21,7 +21,7 @@ include ../_util-fns
When you're done with this page, the app should look like this .
- 当我们完成本章的内容是,本应用会变成这样:在线例子。
+ 当我们完成本章的内容是,本应用会变成这样:。
.l-main-section
:marked
diff --git a/public/docs/ts/latest/tutorial/toh-pt5.jade b/public/docs/ts/latest/tutorial/toh-pt5.jade
index cf97ad3ab8..c37c1f7849 100644
--- a/public/docs/ts/latest/tutorial/toh-pt5.jade
+++ b/public/docs/ts/latest/tutorial/toh-pt5.jade
@@ -44,7 +44,7 @@ figure.image-display
:marked
When you're done with this page, the app should look like this .
- 完成本章之后,应用会变成这样:在线例子。
+ 完成本章之后,应用会变成这样:。
include ../../../_includes/_see-addr-bar
@@ -1431,7 +1431,7 @@ figure.image-display
Review the sample source code in the for this page.
Verify that you have the following structure:
- 回顾一下本章在线例子中范例代码。
+ 回顾一下本章中范例代码。
验证我们是否已经得到了如下结构:
.filetree
diff --git a/public/docs/ts/latest/tutorial/toh-pt6.jade b/public/docs/ts/latest/tutorial/toh-pt6.jade
index 4a9e573991..ba325b3778 100644
--- a/public/docs/ts/latest/tutorial/toh-pt6.jade
+++ b/public/docs/ts/latest/tutorial/toh-pt6.jade
@@ -24,7 +24,7 @@ block includes
When you're done with this page, the app should look like this .
- 当我们完成这一章时,应用会变成这样:在线例子。
+ 当我们完成这一章时,应用会变成这样:。
.l-main-section
:marked
@@ -865,7 +865,7 @@ figure.image-display
Review the sample source code in the for this page.
Verify that you have the following structure:
- 回顾一下本章在线例子中的范例代码。
+ 回顾一下本章中的范例代码。
验证我们是否得到了如下结构:
.filetree