为live example添加翻译脚本

翻译了一部分测试章节
2017-04-23 09:34:51 +08:00 · 2017-04-23 09:34:51 +08:00 · d7aa1e95c8
parent 034001d407
commit d7aa1e95c8
31 changed files with 132 additions and 83 deletions
--- 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 <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
  
--- 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 <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>
--- 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 <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
--- 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 <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
--- 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 <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
--- 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 <live-example></live-example>.

-      本章中引用的这个例子可以到<live-example>在线例子</live-example>去体验。
+      本章中引用的这个例子可以到<live-example></live-example>去体验。

 a(id="example-transitioning-between-states")
 .l-main-section
--- 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 <live-example></live-example>.

-  p 本章所引用的代码见<live-example>在线例子</live-example>。
+  p 本章所引用的代码见<live-example></live-example>。

 .l-main-section
 :marked
--- 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)


-  试试<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
--- 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 <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
--- 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 <live-example></live-example>.

-  运行<live-example>在线例子</live-example>.
+  运行<live-example></live-example>.

 .l-main-section#why-di
 :marked
--- 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 <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
--- 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 <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
--- 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 <live-example></live-example>.
  
-  试试<live-example>在线例子</live-example>.
+  试试<live-example></live-example>.

 .l-main-section
 :marked
--- a/public/docs/ts/latest/guide/index.jade
+++ b/public/docs/ts/latest/guide/index.jade
@ -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>
--- 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 <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.
--- a/public/docs/ts/latest/guide/ngmodule.jade
+++ b/public/docs/ts/latest/guide/ngmodule.jade
@ -317,6 +317,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

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

-    <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
--- 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 <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
--- 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 <live-example></live-example>.

-  要想查看完整的源代码，请参见<live-example>在线例子</live-example>。
+  要想查看完整的源代码，请参见<live-example></live-example>。
--- 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").

-    **《快速起步》种子** 包含了与《快速起步》游乐场一样的应用。该应用有<live-example>自己的*游乐场*</live-example>，
-    但是，它真正的目的是提供坚实的*本地*开发基础。
+    **《快速起步》种子** 包含了与《快速起步》游乐场一样的应用，但是，它真正的目的是提供坚实的*本地*开发基础。
    所以你的电脑里的项目目录里面有*更多文件*，参见[搭建剖析](setup-systemjs-anatomy.html "Setup Anatomy")。

 block core-files
--- 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 <live-example></live-example>.

-  试试<live-example>在线例子</live-example>。
+  试试<live-example></live-example>。

 a#definition
 .l-main-section
--- 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 <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:
--- 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 <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 回到顶部
@ -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 `<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,9 +2182,9 @@ 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/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 <live-example></live-example>.

-  运行<live-example>在线例子</live-example>
+  运行<live-example></live-example>


 :marked
--- 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 <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:

--- 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 <live-example></live-example> for this part.
  
-  运行这部分的<live-example>在线例子</live-example>。
+  运行这部分的<live-example></live-example>。

  ### The Road Ahead
  
--- 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 <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
--- 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 <live-example></live-example>.

-  当我们完成本章的内容是，本应用会变成这样：<live-example>在线例子</live-example>。
+  当我们完成本章的内容是，本应用会变成这样：<live-example></live-example>。

 .l-main-section
 :marked
--- 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 <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
--- 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 <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