From d7aa1e95c8b62fe4bcf8e5d0dffd80ceb387399c Mon Sep 17 00:00:00 2001 From: Zhicheng Wang Date: Sun, 23 Apr 2017 09:34:51 +0800 Subject: [PATCH] =?UTF-8?q?=E4=B8=BAlive=20example=E6=B7=BB=E5=8A=A0?= =?UTF-8?q?=E7=BF=BB=E8=AF=91=E8=84=9A=E6=9C=AC=20=E7=BF=BB=E8=AF=91?= =?UTF-8?q?=E4=BA=86=E4=B8=80=E9=83=A8=E5=88=86=E6=B5=8B=E8=AF=95=E7=AB=A0?= =?UTF-8?q?=E8=8A=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../latest/cookbook/ajs-quick-reference.jade | 2 +- .../cookbook/component-communication.jade | 2 +- .../docs/ts/latest/cookbook/dynamic-form.jade | 2 +- .../latest/cookbook/set-document-title.jade | 2 +- public/docs/ts/latest/cookbook/ts-to-js.jade | 2 +- public/docs/ts/latest/guide/animations.jade | 2 +- public/docs/ts/latest/guide/architecture.jade | 2 +- .../ts/latest/guide/attribute-directives.jade | 4 +- .../ts/latest/guide/component-styles.jade | 2 +- .../ts/latest/guide/dependency-injection.jade | 2 +- .../docs/ts/latest/guide/displaying-data.jade | 2 +- public/docs/ts/latest/guide/forms.jade | 2 +- .../hierarchical-dependency-injection.jade | 2 +- public/docs/ts/latest/guide/index.jade | 2 +- .../docs/ts/latest/guide/lifecycle-hooks.jade | 4 +- public/docs/ts/latest/guide/ngmodule.jade | 4 + public/docs/ts/latest/guide/pipes.jade | 9 +- public/docs/ts/latest/guide/router.jade | 4 +- public/docs/ts/latest/guide/security.jade | 2 +- .../ts/latest/guide/server-communication.jade | 2 +- public/docs/ts/latest/guide/setup.jade | 3 +- .../latest/guide/structural-directives.jade | 2 +- .../docs/ts/latest/guide/template-syntax.jade | 3 +- public/docs/ts/latest/guide/testing.jade | 130 ++++++++++++------ public/docs/ts/latest/guide/user-input.jade | 2 +- public/docs/ts/latest/tutorial/toh-pt1.jade | 4 +- public/docs/ts/latest/tutorial/toh-pt2.jade | 2 +- public/docs/ts/latest/tutorial/toh-pt3.jade | 4 +- public/docs/ts/latest/tutorial/toh-pt4.jade | 2 +- public/docs/ts/latest/tutorial/toh-pt5.jade | 4 +- public/docs/ts/latest/tutorial/toh-pt6.jade | 4 +- 31 files changed, 132 insertions(+), 83 deletions(-) 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