翻译完了“升级”一章的新增部分

合并了测试索引
解决了移动设备上菜单显示不全的问题
文字微调

public/docs/ts/latest/guide/_data.json

@@ -105,6 +105,12 @@
     "intro": "废弃的Beta版路由"
   },
 
+  "router": {
+    "title": "路由与导航",
+    "intro": "揭示如何通过Angular 2路由进行基本的屏幕导航。",
+    "hide": true
+  },
+
   "structural-directives": {
     "title": "结构型指令",
     "intro": "Angular有一个强力的模板引擎，它能让你轻松维护元素的DOM树结构。"

public/docs/ts/latest/guide/testing.jade

@@ -1,122 +1,240 @@
 :marked
   We write **unit tests** to explore and confirm the **behavior** of parts of our application.
 
-  我们编写**单元测试**来探索和确认我们应用程序的**行为**部分。
+  我们编写**单元测试**来探索并巩固应用程序中的**行为**部分。
 
   1. They **guard** against breaking existing code (“regressions”) when we make changes.
-  1. 当我们改变代码是，它们**守护**已有代码，以防被破坏。
+  
+  1. 当我们做出修改时，它们会**守护**已有代码(回归测试)，防止其被破坏。
 
   1. They **clarify** what  the code does both when used as intended and when faced with deviant conditions.
-  1. 在我们正确使用代码和面对异常情况时，它们**澄清**代码做什么。
+  
+  1. 当我们正确使用代码和面对异常情况时，它们会让代码的用途更加**明晰**。
 
   1. They **reveal** mistakes in design and implementation. Tests force us to look at our code from many angles. When a part of our application seems hard to test, we may have discovered a design flaw, something we can cure now rather than later when it becomes expensive to fix.
-  1. 它们**揭示**我们设计和实现的错误。测试强迫我们从多个角度看代码。当应用程序的一个部分看起来很难测试，我们可能会发现设计缺陷，这是我们可以立刻修复的，而不是等到它变得很难修复的时候。
+  
+  1. 它们会**揭露**我们设计和实现中的错误。测试会强迫我们从多种角度看代码。如果应用程序的一个部分看起来很难测试，这可能就意味着存在设计缺陷。
+     我们可以立即修复它，而不用等到它变得不可收拾的那一天。
 
 a(id="top")
 :marked
   # Table of Contents
+  
   # 目录
+  
   1. [Jasmine Testing 101](#jasmine-101)
-  1. [Jasmine测试101](#jasmine-101)
+  
+  1. [Jasmine测试简介](#jasmine-101)
+  
     - setup to run Jasmine tests in the browser
-    - 设置浏览器来运行Jasmine测试
+    
+    - 设置浏览器，来运行Jasmine测试
+    
     - basic Jasmine testing skills
-    - 基础Jasmine测试技能
+    
+    - Jasmine测试的基本技能
+    
     - write simple Jasmine tests in TypeScript
-    - 实用TypeScript来编写简单的Jasmine测试
+    
+    - 用TypeScript编写简单的Jasmine测试
+    
     - debug a test in the browser
-    - 在浏览器里调试测试
+    
+    - 在浏览器里调试一个测试
 
   1. [The Application Under Test](#aut)
 
   1. [被测试的应用程序](#aut)
 
   1. [First app test](#first-app-tests)
+  
   1. [第一个应用程序测试](#first-app-tests)
+  
     - test a simple application interface outside of Angular
+    
     - 在Angular之外，测试一个简单的应用程序接口
+    
     - where to put the test file
+    
     - 测试文件存放到哪儿
+    
     - load a test file with systemJS
+    
     - 使用systemJS调用一个测试文件
 
   1. [Pipe driven development](#pipe-testing)
+  
   1. [测试驱动开发一个管道](#pipe-testing)
+  
     - create a test before creating a class
-    - 在新建类之前，新建一个测试
+    
+    - 创建类之前，先创建一个测试
+    
     - load multiple test files in our test harness, using system.js
-    - 使用system.js，加载多个测试文件到我们的测试套装里
+    
+    - 使用system.js，往我们的测试套件里加载多个测试文件
+    
     - add the Angular 2 library to our test harness
-    - 添加Angular 2的类库到我们的测试套装里
+    
+    - 往我们的测试套件里添加Angular 2的类库
+    
     - watch the new test fail, and fix it
+    
     - 看着新测试失败，然后修复它
 
   1. Test an Asynchronous Service (forthcoming)
+  
+  1. 测试异步服务(即将到来)
+  
     - test an asynchronous service class outside of Angular
+    
+    - 在Angular外测试异步服务类
+    
     - write a test plan in code
+    
+    - 用代码写测试计划
+    
     - fake a dependency
+    
+    - 伪造一个依赖
+    
     - master the `catch(fail).then(done)` pattern
+    
+    - 掌握`catch(fail).then(done)`模式
+    
     - move setup to `beforeEach`
+    
+    - 把设置工作移入`beforeEach`
+    
     - test when a dependency fails
+    
+    - 测试依赖失败时的情况
+    
     - control async test timeout
     
+    - 控制异步测试的超时时间
+
   1. The Angular Test Environment (forthcoming)
+  
+  1. Angular测试环境（即将到来）
+  
     - the Angular test environment and why we need help
+    
+    - Angular测试环境以及我们为什么需要它的帮助
+    
     - add the Angular Test libraries to the  test harness
+    
+    - 把Angular测试库加入测试挽具中
+    
     - test the same async service using Angular Dependency Injection
+    
+    - 使用Angular依赖注入测试同一个异步服务
+    
     - reduce friction with test helpers
+    
+    - 减少与测试助手的摩擦
+    
     - introducing spies
     
+    - 引入侦探类
+
   1. Test a Component (forthcoming)
+  
+  1. 测试组件（即将到来）
+  
     - test the component outside of Angular
+    
+    - 在Angular外面测试组件
+    
     - mock the dependent asynchronous service
+    
+    - 模拟所依赖的异步服务
+    
     - simulate interaction with the view (no DOM)
+    
+    - 仿真与视图的交互（不涉及DOM）
+    
     - use a spy-promise to control asynchronous test flow
     
+    - 使用侦探型承诺(spy-promise)来控制异步测试工作流
+
   1. Test a Component in the DOM (forthcoming
+  
+  1. 在DOM中测试组件（即将到来）
+  
     - test the component inside the Angular test environment
+    
+    - 在Angular测试环境中测试组件
+    
     - use the `TestComponentBuilder`
+    
+    - 使用`TestComponentBuilder`
+    
     - more test helpers
+    
+    - 更多测试助手
+    
     - interact with the DOM
+    
+    - 与DOM交互
+    
     - bind to a mock dependent asynchronous service
     
+    - 绑定到一个模拟的异步服务
+
   1. Run the tests with karma (forthcoming)
   
+  1. 用Karma运行测试（即将到来）
+
   It’s a big agenda. Fortunately, you can learn a little bit at a time and put each lesson to use.
   
+  这是一个很大的日程表。幸运的是，我们可以一次只学一小点，然后把它们投入实战。
+
 a(href="#top").to-top Back to top
 
 .l-hr
 a(id="jasmine-101")
 :marked
   # Jasmine Testing 101
-  # Jasmine测试101
+  
+  # Jasmine测试简介
+  
 != partial("../testing/jasmine-testing-101")
 a(href="#top").to-top Back to top
+a(href="#top").to-top 回到顶部
 
 .l-hr
 a(id="aut")
 :marked
   # The Application to Test
+  
   # 被测试的应用程序
+  
 != partial("../testing/application-under-test")
 a(href="#top").to-top Back to top
+a(href="#top").to-top 回到顶部
 
 .l-hr
 a(id="first-app-tests")
 :marked
   # First app test
+  
   # 第一个应用程序测试
+  
 != partial("../testing/first-app-tests")
 a(href="#top").to-top Back to top
+a(href="#top").to-top 回到顶部
 
 .l-hr
 a(id="pipe-testing")
 :marked
   # Pipe driven development
+  
   # 测试驱动开发一个管道
+  
 != partial("../testing/testing-an-angular-pipe")
 a(href="#top").to-top Back to top
+a(href="#top").to-top 回到顶部
 
 .alert.is-important
   :marked

public/docs/ts/latest/guide/upgrade.jade

@@ -2146,7 +2146,7 @@ code-example(format="").
 
 :marked
   ## Saying Goodbye to Angular 1
-  ## 再见，Angular
+  ## 再见，Angular 1
 
   It is time to take off the training wheels and let our application begin
   its new life as a pure, shiny Angular 2 app. The remaining tasks all have to
@@ -2218,7 +2218,11 @@ code-example(format="").
   used as a valuable safety measure when ensuring that the application does not
   break during the upgrade. E2E tests are especially useful for this purpose.
 
+  测试不仅要在升级过程中被保留，它还是确保应用在升级过程中不会被破坏的一个安全指示器。
+  要达到这个目的，E2E测试尤其有用。
+
   ## E2E Tests
+  ## E2E测试
 
   The PhoneCat project has both E2E Protractor tests and some Karma unit tests in it.
   Of these two, E2E tests can be dealt with much more easily: By definition,
@@ -2229,17 +2233,32 @@ code-example(format="").
   test suite should keep passing with just minor modifications. This is because
   we don't change how the application behaves from the user's point of view.
 
+  PhoneCat项目中同时有基于Protractor的E2E测试和一些基于Karma的单元测试。
+  对这两者来说，E2E测试的转换要容易得多：根据定义，E2E测试通过与应用中显示的这些UI元素互动，从*外部*访问我们的应用来进行测试。
+  E2E测试实际上并不关心这些应用中各部件的内部结构。这也意味着，虽然我们已经修改了一点儿此应用程序，
+  但是E2E测试套件仍然应该能像以前一样全部通过。因为从用户的角度来说，我们并没有改变应用的行为。
+
   During TypeScript conversion, there is nothing we have to do to keep E2E tests
   working. It is only when we start to upgrade components and their template to Angular 2
   that we need to make some changes. This is because the E2E tests have matchers
   that are specific to Angular 1. For PhoneCat we need to make the following changes
   in order to make things work with Angular 2:
 
+  在转成TypeScript期间，我们不用做什么就能让E2E测试正常工作。
+  只有当我们想做些修改而把组件及其模板升级到Angular 2时才需要做些处理。
+  这是因为E2E测试有一些匹配器是Angular 1中特有的。对于PhoneCat来说，为了让它能在Angular 2下工作，我们得做下列修改：
+
 table
   tr
-    th Previous code
+    th
-    th New code
+      p Previous code
-    th Notes
+      p 老代码
+    th
+      p New code
+      p 新代码
+    th
+      p Notes
+      p 说明
   tr
     td
       :marked
@@ -2250,6 +2269,8 @@ table
     td
       :marked
         The repeater matcher relies on Angular 1 `ng-repeat`
+
+        repeater匹配器依赖于Angular 1中的`ng-repeat`
   tr
     td
       :marked
@@ -2260,6 +2281,8 @@ table
     td
       :marked
         The repeater matcher relies on Angular 1 `ng-repeat`
+
+        repeater匹配器依赖于Angular 1中的`ng-repeat`
   tr
     td
       :marked
@@ -2270,6 +2293,8 @@ table
     td
       :marked
         The model matcher relies on Angular 1 `ng-model`
+
+        model匹配器依赖于Angular 1中的`ng-model`
   tr
     td
       :marked
@@ -2280,6 +2305,8 @@ table
     td
       :marked
         The model matcher relies on Angular 1 `ng-model`
+
+        model匹配器依赖于Angular 1中的`ng-model`
   tr
     td
       :marked
@@ -2291,6 +2318,7 @@ table
       :marked
         The binding matcher relies on Angular 1 data binding
 
+        binding匹配器依赖于Angular 1的数据绑定
 
 :marked
   When the bootstrap method is switched from that of `UpgradeAdapter` to
@@ -2299,6 +2327,10 @@ table
   an Angular 1 app anymore, but instead it should find *Angular 2 apps* from
   the page. The following change is then needed in `protractor-conf.js`:
 
+  当引导方式从`UpgradeAdapter`切换到纯Angular 2的时，Angular 1就从页面中完全消失了。
+  此时，我们需要告诉Protractor，它不用再找Angular 1应用了，而是从页面中查找*Angular 2*应用。
+  于是在`protractor-conf.js`中做下列修改：
+
 code-example(format="").
   useAllAngular2AppRoots: true,
 
@@ -2309,11 +2341,16 @@ code-example(format="").
   that use WebDriver's generic URL APIs instead. The first of these is
   the redirection spec:
 
+  同样，我们的测试代码中有两个Protractor API调用内部使用了`$location`。该服务没有了，
+  我们就得把这些调用用一个WebDriver的通用URL API代替。第一个API是“重定向(redirect)”规约：
+
 +makeExample('upgrade-phonecat-3-final/e2e-spec.js', 'redirect', 'e2e-tests/scenarios.js')
 
 :marked
   And the second is the phone links spec:
 
+  第二个是“电话链接(phone links)”规约：
+
 +makeExample('upgrade-phonecat-3-final/e2e-spec.js', 'links', 'e2e-tests/scenarios.js')
 
 
@@ -2321,17 +2358,27 @@ code-example(format="").
 :marked
   ## Unit Tests
 
+  ## 单元测试
+
   For unit tests, on the other hand, more conversion work is needed. Effectively
   they need to be *upgraded* along with the production code.
 
+  另一方面，对于单元测试来说，需要更多的转化工作。实际上，它们需要随着产品代码一起升级。
+
   During TypeScript conversion no changes are strictly necessary. But it may be
   a good idea to convert the unit test code into TypeScript as well, as the same
   benefits we from TypeScript in production code also applies to tests.
 
+  在转成TypeScript期间，严格来讲没有什么改动是必须的。但把单元测试代码转成TypeScript仍然是个好主意，
+  产品代码从TypeScript中获得的那些增益也同样适用于测试代码。
+
   For instance, in the phone detail component spec we can use not only ES2015
   features like arrow functions and block-scoped variables, but also type
   definitions for some of the Angular 1 services we're consuming:
 
+  比如，在这个电话详情组件的规约中，我们不仅用到了ES2015中的箭头函数和块作用域变量这些特性，还为所用的一些
+  Angular 1服务提供了类型定义。
+
 +makeExample('upgrade-phonecat-1-typescript/ts/app/phone-detail/phone-detail.component.spec.ts', null, 'app/phone-detail/phone-detail.component.spec.ts')
 
 :marked
@@ -2339,15 +2386,22 @@ code-example(format="").
   are needed for Karma. We need to let SystemJS load all the new Angular 2 code,
   which can be done with the following kind of shim file:
 
+  一旦我们开始了升级过程并引入了SystemJS，还需要对Karma进行配置修改。
+  我们需要让SystemJS加载所有的Angular 2新代码，
+
 +makeExample('upgrade-phonecat-2-hybrid/ts/karma-test-shim.1.js', null, 'karma-test-shim.js')
 
 :marked
   The shim first loads the SystemJS configuration, then Angular 2's test support libraries,
   and then the application's spec files themselves.
 
+  这个shim文件首先加载了SystemJS的配置，然后是Angular 2的测试支持库，然后是应用本身的规约文件。
+
   Karma configuration should then be changed so that it uses the application root dir
   as the base directory, instead of `app`.
 
+  然后需要修改Karma配置，来让它使用本应用的根目录作为基础目录(base directory)，而不是`app`。
+
 +makeExample('upgrade-phonecat-2-hybrid/ts/karma.conf.ng1.js', 'basepath', 'karma.conf.js')
 
 :marked
@@ -2355,12 +2409,17 @@ code-example(format="").
   for loading application files so that they are *not* included to the page by Karma. We'll let
   the shim and SystemJS load them.
 
+  一旦这些完成了，我们就能加载SystemJS和其它依赖，并切换配置文件来加载那些应用文件，而*不用*在Karma页面中包含它们。
+  我们要让这个shim文件和SystemJS去加载它们。
+
 +makeExample('upgrade-phonecat-2-hybrid/ts/karma.conf.ng1.js', 'files', 'karma.conf.js')
 
 :marked
   Since the HTML templates of Angular 2 components will be loaded as well, we need to help
   Karma out a bit so that it can route them to the right paths:
 
+  由于Angular 2组件中的HTML模板也同样要被加载，所以我们得帮Karma一把，帮它在正确的路径下找到这些模板：
+
 +makeExample('upgrade-phonecat-2-hybrid/ts/karma.conf.ng1.js', 'html', 'karma.conf.js')
 
 :marked
@@ -2368,18 +2427,24 @@ code-example(format="").
   counterparts are switched. The specs for the checkmark pipe are probably the most straightforward,
   as the pipe has no dependencies:
 
+  如果产品代码被切换到了Angular 2，单元测试文件本身也需要切换过来。对勾儿(checkmark)管道的规约可能是最简单的，因为它没有任何依赖：
+
 +makeExample('upgrade-phonecat-2-hybrid/ts/app/core/checkmark/checkmark.pipe.spec.ts', null, 'app/core/checkmark/checkmark.pipe.spec.ts')
 
 :marked
   The unit test for the phone service is a bit more involved. We need to switch from the mocked-out
   Angular 1 `$httpBackend` to a mocked-out Angular 2 Http backend.
 
+  `Phone`服务的测试会牵扯到一点别的。我们需要把模拟版的Angular 1 `$httpBackend`服务切换到模拟板的Angular 2 Http后端。
+
 +makeExample('upgrade-phonecat-2-hybrid/ts/app/core/phone/phone.service.spec.ts', null, 'app/core/phone/phone.service.spec.ts')
 
 :marked
   For the component specs we can mock out the `Phone` service itself, and have it provide
   canned phone data. We use Angular's component unit testing APIs for both components.
 
+  对于组件的规约，我们可以模拟出`Phone`服务本身，并且让它提供电话的数据。我们可以对这些组件使用Angular的组件单元测试API。
+
 +makeExample('upgrade-phonecat-2-hybrid/ts/app/phone-detail/phone-detail.component.spec.ts', null, 'app/phone-detail/phone-detail.component.spec.ts')
 
 +makeExample('upgrade-phonecat-2-hybrid/ts/app/phone-list/phone-list.component.spec.ts', null, 'app/phone-list/phone-list.component.spec.ts')
@@ -2390,10 +2455,15 @@ code-example(format="").
   router. For the details component we need to provide an Angular 2 `RouteParams` object
   instead of using the Angular 1 `$routeParams`.
 
+  最后，当我们切换到Angular 2路由时，我们需要重新过一遍这些组件测试。对详情组件来说，我们需要提供一个Angular 2的
+  `RouteParams`对象，而不再用Angular 1的`$routeParams`。
+
 +makeExample('upgrade-phonecat-3-final/ts/app/phone-detail/phone-detail.component.spec.ts', 'routeparams', 'app/phone-detail/phone-detail.component.spec.ts')
 
 :marked
   And for the phone list component we need to set up a few things for the router itself so that
   the route link directive will work.
 
+  对于电话列表组件来说，我们需要为路由器本身略作设置，以便它的路由链接(`routerLink`)指令能够正常工作。
+
 +makeExample('upgrade-phonecat-3-final/ts/app/phone-list/phone-list.component.spec.ts', 'routestuff', 'app/phone-list/phone-list.component.spec.ts')

public/docs/ts/latest/guide/webpack.jade

@@ -11,7 +11,7 @@ include ../_util-fns
   It's an excellent alternative to the *SystemJS* approach we use throughout the documentation.
   In this guide we get a taste of Webpack and how to use it with Angular 2 applications.
 
-  这是我们在文档中到处使用的这个*SystemJS*的一个卓越替代品。这篇指南会带我们尝尝Webpack的滋味，并学习如何在Angular 2程序中使用它。
+  这是我们在文档中到处使用的这个*SystemJS*的一个优秀替代品。这篇指南会带我们尝尝Webpack的滋味，并学习如何在Angular 2程序中使用它。
 
   <a id="top"></a>
   ## Table of contents

public/docs/ts/latest/testing/index.jade

@@ -34,7 +34,7 @@
 
   1. Jasmine Testing 101
 
-  1. Jasmine测试101
+  1. Jasmine测试简介
 
     - setup to run Jasmine tests in the browser
 

public/docs/ts/latest/testing/jasmine-testing-101.jade

@@ -337,7 +337,7 @@ figure.image-display
 
   Congratulations … you’ve completed Jasmine testing 101.
 
-  恭喜...你完成了Jasmine测试101。
+  恭喜...你完成了Jasmine测试简介。
 
   Now that we’re familiar with Jasmine on its own, we’re ready to test an application.
 

public/resources/css/module/_side-nav.scss

@@ -8,7 +8,6 @@
   box-shadow: 3px 0px 6px rgba($coal, .3);
   width: 232px;
   bottom: 0px;
-  height: calc(100vh - 56px);
   overflow: auto;
 
   @media handheld and (max-width: $phone-breakpoint),
@@ -149,7 +148,10 @@
     screen and (max-device-width: $phone-breakpoint),
     screen and (max-width: $tablet-breakpoint) {
       display: none;
-      //max-height: ($phone-breakpoint * 0.60);
+      &.is-visible {
+        height: calc(100vh - 56px - 48px);
+        overflow: auto;
+      }
     }
 
     // FLAT NAV (.nav)