Merge pull request #1 from rexebin/upgrade-2.2.0

Upgrade 2.2.0
2016-11-22 23:38:01 +08:00 · 2016-11-22 23:38:01 +08:00 · 9201b1270f
parent 5a7745fb27 7f022c153b
commit 9201b1270f
11 changed files with 68 additions and 46 deletions
--- a/public/docs/ts/latest/cookbook/aot-compiler.jade
+++ b/public/docs/ts/latest/cookbook/aot-compiler.jade
@ -561,7 +561,7 @@ a#toh

  ***index.html***

-  ***Index.html***
+  ***index.html***

  The JiT and AoT apps require their own `index.html` files because they setup and launch so differently.
  **Put the AoT version in the `/aot` folder** because two `index.html` files can't be in the same folder.
@ -570,6 +570,7 @@ a#toh
  **将AoT版本放在`/aot`目录**，因为两个`index.html`文件不能位于同一个目录。

  Here they are for comparison:
+
  下面是它们的比较：

 +makeTabs(
@ -594,6 +595,8 @@ a#toh

  ***main.ts***

+  ***main.ts***
+
  JiT and AoT applications boot in much the same way but require different Angular libraries to do so.
  The key differences, covered in the [Bootstrap](#bootstrap) section above,
  are evident in these `main` files which can and should reside in the same folder:
@ -612,6 +615,7 @@ a#toh

 :marked
  ***Component-relative Template URLS***
+
  ***相对组件的模板路径***

  The AoT compiler requires that `@Component` URLS for external templates and css files be _component-relative_.
@ -640,6 +644,7 @@ a#toh
    设置一个全局`module`是暂时的权宜之计。
 :marked
  ***TypeScript configuration***
+
  ***TypeScript配置***

  JiT-compiled applications transpile to `commonjs` modules.
--- a/public/docs/ts/latest/guide/architecture.jade
+++ b/public/docs/ts/latest/guide/architecture.jade
@ -482,11 +482,6 @@ figure
  比如`@Injectable`、`@Input`和`@Output`等是一些最常用的!{_decoratorCn}。

 <br class="l-clear-both">
-
-  我们也会沿用类似的风格，用其它元数据!{_decoratorCn}来指导Angular的行为。
-  比如`@Injectable`、`@Input`和`@Output`等是一些最常用的!{_decoratorCn}。
-
-<br clear="all">
 :marked
  The architectural takeaway is that you must add metadata to your code
  so that Angular knows what to do.
--- a/public/docs/ts/latest/guide/browser-support.jade
+++ b/public/docs/ts/latest/guide/browser-support.jade
@ -249,17 +249,11 @@ table
    td 13.5KB
  tr
    td
-      p.
-        a(href="https://github.com/web-animations/web-animations-js" target="_blank") Web Animations
-      p.
      a#web-animations(href="https://github.com/web-animations/web-animations-js" target="_blank") Web Animations
    td Apache
    td 14.8KB
  tr
    td
-      p.
-        a(href="https://github.com/inexorabletash/polyfill/blob/master/typedarray.js" target="_blank") Typed Array
-      p.
     a#typedarray(href="https://github.com/inexorabletash/polyfill/blob/master/typedarray.js" target="_blank") Typed Array
    td MIT
    td 4KB
--- a/public/docs/ts/latest/guide/forms.jade
+++ b/public/docs/ts/latest/guide/forms.jade
@ -42,8 +42,6 @@ include ../_util-fns

  - 结合表单来使用`ngModel`，能让我们跟踪状态的变化并对表单控件做验证

-  - 结合表单来使用`ngModel`，能让我们跟踪状态的变化并对表单控件做验证
-
  - provide strong visual feedback using special CSS classes that track the state of the controls

  - 使用特殊的CSS类来跟踪控件状态，并提供强烈的视觉反馈
--- a/public/docs/ts/latest/guide/index.jade
+++ b/public/docs/ts/latest/guide/index.jade
@ -155,11 +155,13 @@ table(width="100%")

  Look for a link to a running version of that sample near the top of each page,
  such as this <live-example name="architecture"></live-example> from the [Architecture](architecture.html) page.
+
+  在每页靠近顶部的地方都可以看到一个链接，指向这个范例的可执行版本，比如[架构](architecture.html)一章中的<live-example name="architecture"></live-example>。
+
  <p if-docs="ts">
  The link launches a browser-based code editor where you can inspect, modify, save, and download the code.
  </p>

-  在每页靠近顶部的地方都可以看到一个链接，指向这个范例的可执行版本，比如[架构](architecture.html)一章中的<live-example name="architecture"></live-example>。
  <p if-docs="ts">
  这个链接启动一个基于浏览器的代码编辑器，在这里，我们可以查看、修改、保存和下载这些代码。
  </p>
--- a/public/docs/ts/latest/guide/router.jade
+++ b/public/docs/ts/latest/guide/router.jade
@ -423,7 +423,7 @@ table
    td
      p <code>Router</code>
      p <code>Router</code>（路由器）
-    td.
+    td
      p.
        Displays the application component for the active URL.
        Manages navigation from one component to the next.
@ -2295,7 +2295,11 @@ h3#merge-hero-routes 把hero模块导入到AppModule中
  When the user selects a crisis, the app navigates to the `CrisisDetailComponent`
  for display and editing of the crisis name.

-  Voilà, another feature module!
+  `Crisis`有`id`和`name`，和`Hero`一样。
+  新的`CrisisListComponent`显示了危机列表。
+  当用户选择一个危机时，应用导航到`CrisisDetailComponent`，显示和编辑危机名字。
+
+  Voila, another feature module!

  真棒！另一个特性模块诞生了

--- a/public/docs/ts/latest/guide/style-guide.jade
+++ b/public/docs/ts/latest/guide/style-guide.jade
@ -3007,7 +3007,8 @@ a(href="#toc") 回到顶部
    <a href="https://marketplace.visualstudio.com/items?itemName=johnpapa.Angular2">
      <img src="https://github.com/johnpapa/vscode-angular2-snippets/raw/master/images/use-extension.gif" width="80%" alt="Use Extension">
    </a>
-
+.s-rule.consider
+  :marked
    **Consider** using [snippets](https://atom.io/packages/angular-2-typescript-snippets) for [Atom](https://atom.io/) that follow these styles and guidelines.

    **考虑**使用[Atom](https://atom.io/)的[代码片断](https://atom.io/packages/angular-2-typescript-snippets)来实施本风格指南。
--- a/public/docs/ts/latest/guide/upgrade.jade
+++ b/public/docs/ts/latest/guide/upgrade.jade
@ -1310,7 +1310,7 @@ figure
 :marked
  ### Switching to TypeScript

-  ## 切换到TypeScript
+  ### 切换到TypeScript

  Since we're going to be writing our Angular 2 code in TypeScript, it makes sense to
  bring in the TypeScript compiler even before we begin upgrading.
@ -1665,13 +1665,15 @@ code-example(format="").
  attached to the `<html>` element of the host page. This will no longer work with
  Angular 2. We should switch to a JavaScript-driven bootstrap instead.

+  我们的应用现在是使用宿主页面中附加到`<html>`元素上的`ng-app`指令引导的。
+  但在Angular 2中，它不再工作了。我们得切换成JavaScript驱动的引导方式。
+
  So, remove the `ng-app` attribute from `index.html`, and instead boostrap via `app/main.ts`.
  This file has been configured as the application entrypoint in `systemjs.config.js`,
  so it is already being loaded by the browser.

-  我们的应用现在是使用宿主页面中附加到`<html>`元素上的`ng-app`指令引导的。
-  但在Angular 2中，它不再工作了。我们得切换成JavaScript驱动的引导方式。
-  所以，从`index.html`中移除`ng-app`属性，并把这些加载`main.ts`中：
+  所以，从`index.html`中移除`ng-app`属性，并把这些加载`main.ts`中。
+  在`systemjs.config.js`中已经将此文件配置为应用的入口，所以它已被浏览器所加载。

 +makeExample('upgrade-phonecat-2-hybrid/ts/app/main.ts', 'bootstrap')

--- a/public/docs/ts/latest/quickstart.jade
+++ b/public/docs/ts/latest/quickstart.jade
@ -1,6 +1,6 @@
 block includes
  include _util-fns
-  - var _Install = '安装'
+  - var _Install = 'Install'
  - var _Install_cn = '安装'
  - var _prereq = 'Node.js and npm'
  - var _prereq_cn = 'Node.js和npm'
@ -43,26 +43,44 @@ figure.image-display
    你还可以<a href="!{_quickstartSrcURL}" target="_blank">克隆整个“快速起步”应用</a>。

 h1 Build this application!
+
 h1 构建此应用！

 :marked
  - [Prerequisite](#prereq): Install #{_prereq}.
+
  - [环境准备](#prereq): 安装#{_prereq_cn}。
+
  - [Step 1](#create-and-configure): Create and configure the project.
+
  - [步骤1](#create-and-configure)：创建并配置此项目。
+
  - [Step 2](#ngmodule): Create your application.
+
  - [步骤2](#ngmodule)：创建应用。
-  <li if-docs="ts">[Step 3](#root-component): Create a component and add it to your application.</li>
-  <li if-docs="ts">[步骤3](#root-component)：创建组件并添加到应用程序中。</li>
+
+  - [Step 3](#root-component): Create a component and add it to your application.
+
+  - [步骤3](#root-component)：创建组件并添加到应用程序中。
+
  - [Step !{step++}](#main): Start up your application.
-  - [步骤!{step++](#main)：启动应用程序。
+
+  - [步骤4](#main)：启动应用
+
  - [Step !{step++}](#index): Define the web page that hosts the application.
-  - [步骤!{step++](#index)：定义作为该应用的宿主的页面。
+
+  - [步骤5](#index)：定义作为该应用的宿主的页面。
+
  - [Step !{step++}](#build-and-run): Build and run the application.
-  - [步骤!{step++](#build-and-run)：构建并运行此应用。
+
+  - [步骤6](#build-and-run)：构建并运行此应用。
+
  - [Step !{step++}](#make-changes): Make some live changes.
-  - [步骤!{step++](#make-changes)：做一些修改，并立即查看效果。
-  - [Wrap up and Next Steps](#wrap-up)
+
+  - [步骤7](#make-changes)：做一些修改，并立即查看效果。
+
+  - [Wrap up and next steps](#wrap-up)
+
  - [收工，下一步](#wrap-up)

 - var step = _stepInit // reinitialize step counter for headers to come
@ -345,7 +363,7 @@ code-example.code-shell.

 .l-main-section
 h2#main Step !{step++}: Start up your application
-h2#main 步骤!{step++}：启动应用
+h2#main 步骤4：启动应用

 block create-main
  :marked
@ -397,7 +415,7 @@ block create-main

 .l-main-section
 h2#index Step !{step++}: Define the web page that hosts the application
-h2#index 步骤!{step++}：定义该应用的宿主页面
+h2#index 步骤5：定义该应用的宿主页面
 :marked
  In the *#{_indexHtmlDir}* folder,
  create an `index.html` file and paste the following lines into it:
@ -449,7 +467,7 @@ block commentary-on-index-html

 .l-main-section#build-and-run
 h2 Step !{step++}: Build and run the application
-h2 步骤!{step++}： 编译并运行应用程序
+h2 步骤6： 编译并运行应用程序
 block run-app
  :marked
    Open a terminal window and enter this command:
@ -487,7 +505,7 @@ block build-app

 .l-main-section#make-changes
 h2 Step !{step++}: Make some live changes
-h2 步骤!{step++}：做一些即时修改
+h2 步骤7：做一些即时修改
 :marked
  Try changing the message in <span ngio-ex>app/app.component.ts</span> to "Hello Again Angular!".

@ -526,6 +544,8 @@ block project-file-structure
      .file styles.css
      .file systemjs.config.js
      .file tsconfig.json
+
+block project-files
  :marked
    To see the file contents, open the <live-example></live-example>.

--- a/public/docs/ts/latest/tutorial/toh-pt5.jade
+++ b/public/docs/ts/latest/tutorial/toh-pt5.jade
@ -222,6 +222,7 @@ block keep-app-running
  * Move the following from `HeroesComponent` to `AppComponent`:

  * 将下面的项目从`HeroesComponent`移到`AppComponent`：
+
    * `title` class property

    * `title`类属性
@ -231,8 +232,8 @@ block keep-app-running
    * 在模板中添加一个`<h1>`标签，包裹着到`title`属性的绑定。

  * Add a `<my-heroes>` element to the app template just below the heading so we still see the heroes.
-  *
-  在模板中添加`<my-heroes>`标签，以便我们仍能看到英雄列表。
+
+  * 在模板中添加`<my-heroes>`标签，以便我们仍能看到英雄列表。

  * Add `HeroesComponent` to the `!{_declsVsDirectives}` !{_array} of `!{_AppModuleVsAppComp}` so Angular recognizes the `<my-heroes>` tags.