基础知识-架构 翻译了一部分。修改了对照翻译模块的小功能。

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

@@ -3,30 +3,29 @@ include ../_util-fns
 :marked
   Angular 2 is a framework to help us build client applications in HTML and JavaScript.
   
-  Angular 2是一个使用HTML和JavaScript构建客户端应用的框架。
+  Angular 2是一个用HTML和JavaScript构建客户端应用的框架。
   
   The framework consists of several cooperating libraries, some of them core and some optional.
   
-  这个框架包括一系列紧密合作的库，有些是核心库，有些是可选库。
+  该框架包括一系列紧密合作的库，有些是核心库，有些是可选库。
   
   We write applications by composing HTML *templates* with Angularized-markup, 
   writing *component* classes to manage those templates, adding application logic in *services*,
   and handing the top root component to Angular's *bootstrapper*. 
   
-  我们用带有Angular标记的HTML写 *模板* ，用 *组件* 类来管理这些模板，用 *服务* 添加应用逻辑，用根组件来完成Angular *启动* 。
+  我们这样写应用程序：用带Angular扩展语法的HTML写*模板*，用*组件*类管理这些模板，用*服务*添加应用逻辑，用根组件完成Angular*启动*。
-  把这些组合起来，我们就得到了一个应用程序。
   
   Angular takes over, presenting our application content in a browser and responding to user interactions
   according to the instructions we provided.
   
-  Angular在浏览器中接管、展现我们的应用内容，并且根据我们提供的指令响应用户的交互。
+  Angular在浏览器中接管、展现应用的内容，并根据我们提供的操作指令响应用户的交互。
   
 <!-- figure img(src="/resources/images/devguide/architecture/airplane.png" alt="Us" align="left" style="width:200px; margin-left:-40px;margin-right:10px" ) -->
 :marked
   Of course there is more to it than this. We'll learn the details when we dive into the guide chapters.
   Let's get the big picture first.
 
-  当然，这只是冰山一角。随着内容的深入，我们还会学到更多的细节。
+  当然，这只是冰山的一角。随着内容的深入，我们还会学到更多的细节。
   我们先来看看宏观图景。
 
 figure
@@ -60,7 +59,7 @@ figure
   :marked
       The code referenced in this chapter is available as a [live example](/resources/live-examples/architecture/ts/plnkr.html).
       
-      本章所引用的代码可以在这个[在线例子](/resources/live-examples/architecture/ts/plnkr.html)中找到。
+      本章所引用的代码可以从这个[在线例子](/resources/live-examples/architecture/ts/plnkr.html)中找到。
 <a id="module"></a>
 .l-main-section
 :marked
@@ -75,54 +74,55 @@ figure
   
   In general we assemble our application from many **modules**.
   
-  我们的程序通常都是由很多 *模块* 组装成的。
+  我们的程序通常都是由很多*模块*组装而成的。
   
   A typical module is a cohesive block of code dedicated to a single purpose.
   A module **exports** something of value in that code, typically one thing such as a class.
   
-  典型的组件是一个内聚的代码块组成的，用以完成单一的目的。
+  典型的组件是一个内聚的代码块，用以完成单一的目的。
+  在这些代码中，模块会*导出*一些东西，最典型的就是类。
   <br clear="all"><br>
 .l-sub-section
   :marked
      ### Modules are optional
-     ### 组件是可选的
+     ### 模块是可选的
      We highly recommend modular design. TypeScript has great support for ES2015 module syntax and our chapters assume we're taking a modular
      approach using that syntax. That's why we list *Module* among the basic building blocks.
      
-     我们强烈推荐遵循模块化设计。TypeScript对ES2015的模块语法支持很好，本章假定我们使用那些语法作为模块化方案。这就是为什么我们要把 *模块* 列为一种基本构造块。
+     我们强烈推荐使用模块化设计。TypeScript对ES2015的模块语法支持很好，本章就使用这种语法作为模块化方案。这就是为什么我们要把*模块*作为基本构造块之一。
      
      Angular itself doesn't require a modular approach nor this particular syntax. Don't use it if you don't want it.
      Each chapter has plenty to offer after you steer clear of the `import` and `export` statements.
      
      Angular本身并不需要模块化方案或使用这种特定的语法。如果你不喜欢，可以不用它。
-     在你弄清楚了`import`和`export`语句之后，它在每章都会出现很多。
+     不过你得先弄明白`import`和`export`语句，它在每章中都会出现很多次。
      
      Find setup and organization clues in the JavaScript track (select it from the combo-box at the top of this page) 
      which demonstrates Angular 2 development with plain old JavaScript and no module system. 
      
-     在JavaScript（可以从页面顶部的组合框选择它）分支下，可以找到如何安装和进行文件组织的线索。
+     在JavaScript（你可以从页面顶部的组合框选择它）分支下，可以找到如何安装和组织文件结构的线索。
-     它示范了如何用老版本的JavaScript语言，在没有模块化系统的情况下进行Angular 2开发。
+     它示范了如何用老版本的JavaScript语言，在没有模块化系统支持的情况下进行Angular 2开发。
 :marked
   Perhaps the first module we meet is a module that exports a *component* class. 
   The component is one of the basic Angular blocks, we write a lot of them,
   and we'll talk about components in the next segment. For the moment it is enough to know that a
   component class is the kind of thing we'd export from a module.
   
-  也许我们遇到的第一个模块，就是用于导出 *组件* 类的那个。
+  我们遇到的第一个模块，很可能就是用于导出*组件*类的那个。
-  组件是Angular最基本的构造块之一，我们会写很多。下一段，我们将会讨论组件。
+  组件是Angular中的基本构造块之一，我们会写很多。下一段儿，我们将会讨论组件。
-  但目前，只要知道组件类需要我们从模块中导出就行了。
+  但目前，我们只要知道组件类得从模块中导出就行了。
   
   Most applications have an `AppComponent`. By convention, we'll find it in a file named `app.component.ts`. 
   Look inside such a file and we'll see an `export` statement like this one.
   
-  大多数应用都有一个`AppComponent`。作为一项惯例，它会位于一个名叫`app.component.ts`的文件中。
+  大多数应用都有一个`AppComponent`。按照惯例，它位于一个名叫`app.component.ts`的文件中。
   打开它，我们将会看到一个`export`语句，就像这样：
 +makeExample('architecture/ts/app/app.component.ts', 'export', 'app/app.component.ts (节选)')(format=".")
 :marked
   The `export` statement tells TypeScript that this is a module whose
   `AppComponent` class is public and accessible to other modules of the application.
   
-  `export`语句告诉TypeScript：这是一个模块，`AppComponent`类是公开的，可以被应用中的其它模块访问。
+  `export`语句告诉TypeScript：这是一个模块，其中的`AppComponent`类是公开的，可以被应用中的其它模块访问。
   
   When we need a reference to the `AppComponent`, we **import** it like this:
   
@@ -133,7 +133,7 @@ figure
   located in a neighboring file. 
   The **module name** (AKA module id) is often the same as the filename without its extension.
   
-  `import`语句告诉系统，它能从附近一个叫作`app.component`的文件中获得一个`AppComponent`组件。
+  `import`语句告诉系统，它能从附近一个名叫`app.component`的文件中获得一个`AppComponent`组件。
   **模块名**（又叫模块ID）通常和去掉扩展名后的文件名相同。
   ### Library Modules 
   ### 库模块
@@ -149,23 +149,23 @@ figure
   Each Angular library contains a [barrel](../glossary.html#barrel) module
   that is actually a public façade over several logically-related private modules.
 
-  Angular本身就是用一组库模块的形式发布的，它们都以`@angular`为前缀。
+  Angular本身就是通过npm包发布的一组库模块，它们都以`@angular`为前缀。
-  每个Angular库都包含一个[封装桶](../glossary.html#barrel)模块。
+  每个Angular库中都包含一个[封装桶](../glossary.html#barrel)模块。
-  它实际上是一个公开的外观层（façade），囊括了许多逻辑上相关的私有模块。
+  它实际上是一个公开的外观层（façade），囊括了一些逻辑上相关的私有模块。
   
   The `@angular/core` library is the primary Angular library module from which we get most of what we need.
   
-  `angular2/core`库是主要的Angular库模块，从这里我们能获得所需的大部分东西。
+  `@angular/core`库是主要的Angular库模块，从这里我们能获得所需的大部分东西。
   <br clear="all">
   
   There are other important Angular library modules too such as `@angular/common`, `@angular/router`, and `@angular/http`.
   
-  还有另外一些重要的Angular库模块，比如`@angular/common`、`@angular/router` 和 `@angular/http`。
+  还有另一些重要的Angular库模块，比如`@angular/common`、`@angular/router` 和 `@angular/http`。
 
   We import what we need from an Angular library module in much the same way.
   For example, we import the Angular **`Component` *function*** from the *@angular/core* module like this:
   
-  我们从Angular库模块中导入所需内容的方式都与此类似。
+  我们从Angular库模块中导入所需内容的方式都跟这差不多。
   比如，我们从*@angular2/core*中导入Angular **`Component`*函数***的代码是这样的：
 +makeExample('architecture/ts/app/app.component.ts', 'import')(format=".")
 :marked
@@ -179,15 +179,16 @@ figure
   the import statement refers to the bare module name, `@angular/core`, *without a path prefix*.
   
   注意到不同之处了吗？
-  前面的方式中，当从Angular库模块中导入时，import语句引用的是一个裸模块名 —— `angular2/core` —— *没有路径前缀* 。
+  第一种，从Angular库模块中导入时，import语句引用的是“裸”模块名 —— `@angular/core` —— *不带路径前缀*。
   
   When we import from one of *our* own files, we prefix the module name with the file path.
   In this example we specify  a relative file path (./). That means the
   source module is in the same folder (./) as the module importing it.
   We could path up and around the application folder structure if the source module were somewhere else.
   
-  当我们从 *自己的* 文件中导入时，模块名中带有前缀，在这个例子中，是一个相对路径（./）。这表示源模块位于与导入它的模块相同的目录中（./）。
+  当我们从*自己的*文件中导入时，模块名中带有路径前缀。
-  如果源模块位于其它位置的话，我们还可以向上引用应用目录结构中的任意路径（../../../somewhere/）。
+  在这个例子中，是一个相对路径（./）。这表示源模块和想导入它的模块位于同一个目录中（./）。
+  如果源模块位于其它位置，我们还可以向上引用应用目录结构中的任意路径（如`../../../somewhere/`）。
 .l-sub-section
   :marked
     We import and export in the ECMAScript 2015 (ES2015) module syntax. 
@@ -195,25 +196,25 @@ figure
     and many other places on the web.
     
     我们导入和导出使用的是ECMAScript 2015 (ES2015)的语法。
-    要学习更多关于此语法的知识，参见[这里](http://www.2ality.com/2014/09/es6-modules-final.html)，也可以在网上的很多地方找到。
+    要学习关于此语法的更多知识，参见[这里](http://www.2ality.com/2014/09/es6-modules-final.html)，在网上很多别的地方也能找到相关资料。
     
     The infrastructure *behind* module loading and importing is an important subject.
     But it's a subject outside the scope of this introduction to Angular. 
     While we're focused on our application, *import* and *export*
     is about all we need to know.
     
-    关于模块加载和导入背后的基础设施，是一个很重要的话题。
+    “模块加载与导入”背后的基础设施，是一个很重要的话题，但它不在Angular简介的范围内。
-    但是，这个话题在介绍Angular的范围之外。在我们聚焦于讲解应用的时候，知道 *import* 和 *export* 就足够了。
+    我们目前的焦点是讲解应用，你只要知道*import*和*export*就够了。
 :marked
   The key take-aways are:
   
-  要知道的关键是：
+  这里的关键点是：
   * Angular apps are composed of modules.
   * Angular应用是由模块组成的。
   * Modules export things &mdash; classes, function, values &mdash; that other modules import.
-  * 模块导出一些东西 —— 类，函数，值，供其它模块导入。
+  * 模块导出一些东西 —— 类，函数，值，而其它模块会导入它们。
   * We prefer to write our application as a collection of modules, each module exporting one thing.
-  * 我们喜欢把应用写成一组模块，每个模块只导出一个东西。
+  * 首选的写法是把应用写成一组模块，每个模块只导出一样东西。
   
   The first module we write will most likely export a component.
   
@@ -230,24 +231,24 @@ figure
   The shell at the application root with navigation links, that list of heroes, the hero editor ... 
   they're all views controlled by Components.
   
-  **组件** 控制屏幕中的补丁大的一小块儿地方，我们称之为 *视图* 。
+  **组件**控制屏幕中补丁那么大的一小块儿地方，这块儿地方我们称之为*视图*。
-  应用的“外壳”包括一些导航链接、一个英雄列表、英雄编辑器…… 它们都是被组件控制的视图。
+  应用的“外壳”包括一些导航链接、英雄列表、英雄编辑器…… 它们都是由组件控制的视图。
   
   We define a Component's application logic - what it does to support the view - inside a class.
   The class interacts with the view through an API of properties and methods. 
   
-  我们定义了一个组件的应用逻辑 —— 它被用来为视图提供支持 —— 放在类中。
+  我们定义了一个组件的应用逻辑（它被用来为视图提供支持）放在类中。
-  组件用一些由属性和方法组成的API与视图交互。
+  组件通过一些由属性和方法组成的API与视图交互。
   
   <a id="component-code"></a>
+
   A `HeroListComponent`, for example, might have a `heroes` property that returns an array of heroes
   that it acquired from a service.
   It might have a `selectHero()` method that sets a `selectedHero` property when the user clicks on a hero from that list.
   It might be a class like this:
   
-  <a id="component-code"></a>
+  比如，`HeroListComponent`组件，可能有一个`heroes`属性，它返回一个英雄的数组，而这些数据是从服务中取得的。
-  比如，`HeroListComponent`组件，可能有一个`heroes`属性，它返回一个英雄的数组，这个数据是从服务中取得的。
+  它可能还有一个`selectHero()`方法，当用户从列表中点击一个英雄时，用它来设置`selectedHero`属性。
-  它还可能有一个`selectHero()`方法，用来在用户从列表中点击一个英雄时设置`selectedHero`属性。
   它可能是像这样的一个类：
 
 +makeExample('architecture/ts/app/hero-list.component.ts', 'class', 'app/hero-list.component.ts')
@@ -255,8 +256,8 @@ figure
   Angular creates, updates, and destroys components as the user moves through the application.
   The developer can take action at each moment in this lifecycle through optional [Lifecycle Hooks](lifecycle-hooks.html).
   
-  当用户在这个应用中“移动”时，Angular会创建、更新、销毁组件。
+  当用户在这个应用中“移动”时，Angular会创建、更新和销毁组件。
-  开发人员还可以通过[生命周期钩子](lifecycle-hooks.html)在组件生命周期的每个时间点做出自己的处理。
+  开发人员可以通过[生命周期钩子](lifecycle-hooks.html)在组件生命周期的各个时间点上插入自己的操作。
 .l-sub-section
   :marked
     We're not showing those hooks in this example 
@@ -268,8 +269,8 @@ figure
     For the moment, have faith that Angular will call the constructor and deliver an
     appropriate `HeroService` when we need it.
 
-    我们可能会好奇，谁调用那个构造函数？谁为服务提供参数？
+    我们可能会好奇，谁来调用那个构造函数？谁为服务提供参数？
-    现在，只要相信Angular就行了，它会去调用构造函数，并且在我们需要的时候交给我们一个合适的`HeroService`实例。
+    目前，只要信任Angular就行了。它会在合适的时机调用构造函数，并在我们要用的时候给出一个合适的`HeroService`实例。
  
 .l-main-section
 <a id="template"></a>
@@ -282,12 +283,12 @@ figure
   We define a Component's view with its companion **template**. A template is a form of HTML
   that tells Angular how to render the Component.
   
-  我们通过伴随它的 **模板** 来定义组件的视图。模板是HTML的一种形式，用来告诉Angular如何渲染组件。
+  我们通过组件的伴生**模板**来定义视图。模板是HTML的一种形式，它会告诉Angular如何渲染组件。
 
   A template looks like regular HTML much of the time ... and then it gets a bit strange. Here is a
   template for our `HeroList` component.
   
-  基本上，模板看起来很像标准HTML……当然也略有一些奇怪的地方。下面是我们`HeroList`组件的一个模板。
+  多数情况下，模板看起来很像标准HTML……当然也有一小点儿奇怪的地方。下面是`HeroList`组件的一个模板。
 +makeExample('architecture/ts/app/hero-list.component.html',null,'app/hero-list.component.html')
 :marked
   We recognize `<h2>` and  `<div>`. 
@@ -295,21 +296,21 @@ figure
   What are `*ngFor`, `{{hero.name}}`, `(click)`, `[hero]`, and `<hero-detail>`?
   
   我们认得`<h2>`和`<div>`。
-  但有一些其它的标签/属性是我们在学校中从没有听说过的。
+  但另外那些标签/属性是我们在学校中从没听过的。
-  什么是`*ngFor`、`{{hero.name}}`、`(click)`、`[hero]`和`<hero-detail>`？
+  `*ngFor`、`{{hero.name}}`、`(click)`、`[hero]`和`<hero-detail>`都是什么鬼？
   
   These are examples of Angular's [template syntax](template-syntax.html). 
   We will grow accustomed to that syntax and may even learn to love it.
   We'll begin to explain it in a moment.
   
-  这些是Angular [模板语法](template-syntax.html) 的例子。
+  这些都是Angular[模板语法](template-syntax.html) 的例子。
-  我们会逐步习惯这些语法，甚至会学着爱上它。
+  我们会逐渐习惯这些语法，甚至会学着爱上它。
   一会儿我们再解释它。
   
   Before we do, focus attention on the last line. 
   The `<hero-detail>` tag is a custom element representing the `HeroDetailComponent`.
   
-  在我们开始前，注意最后那行。
+  在开始前，先仔细看下最后那行。
   `<hero-detail>`是一个自定义元素的标签，用来表示`HeroDetailComponent`组件。
   
   The `HeroDetailComponent` is a *different* component than the `HeroListComponent` we've been reviewing.
@@ -317,8 +318,8 @@ figure
   hero that the user selects from the list presented by the `HeroListComponent`.
   The `HeroDetailComponent` is a **child** of the `HeroListComponent`.
   
-  `HeroDetailComponent`是和我们审视过的`HeroListComponent` *不同* 的组件。
+  `HeroDetailComponent`跟我们以前回顾过的`HeroListComponent`是*不同*的组件。
-  `HeroDetailComponent`（未展示代码）展现一个特定英雄的情况，这个英雄是用户从`HeroListComponent`所展示的列表中选择的。
+  `HeroDetailComponent`（未展示代码）用于展现一个特定英雄的情况，这个英雄是用户从`HeroListComponent`列表中选择的。
   `HeroDetailComponent`是`HeroListComponent`的*子组件*。
 
 figure
@@ -327,14 +328,13 @@ figure
   Notice how `<hero-detail>` rests comfortably among the HTML elements we already know. 
   We can mix ... and will mix ... our custom components with native HTML in the same layouts.
   
-  注意：`<hero-detail>`是多么和谐的出现在我们已经知道的那些HTML元素中。
+  注意：`<hero-detail>`竟如此和谐的出现在那些已知的HTML元素中。
-  我们在同一个布局中，可以混合……而且还将混合……我们的自定义组件与原生HTML。
+  在同一个设计中，我们能混用……也将继续混用……自定义组件与原生HTML。
   
   And in this manner we can and will compose complex component trees to build out our richly featured application.
   
-  在这种方式下，我们能而且将会组合出复杂的组件树，来构建我们那些丰富多彩的应用。
+  在这种方式下，我们能而且将组合出复杂的组件树，来构建那些丰富多彩的应用。
 <br clear="all">
-
 .l-main-section
 <a id="metadata"></a>
 :marked
@@ -350,35 +350,35 @@ figure
   [Looking back](#component-code) at the `HeroListComponent`, we see that it's just a class.
   There is no evidence of a framework, no "Angular" in it at all.
   
-  [回头看看](#component-code)`HeroListComponent`，我们就明白，它只是一个类。
+  [回头看看](#component-code)`HeroListComponent`就会明白：它只是一个类。
-  毫无框架的迹象，里面完全没有出现"Angular"。
+  一点框架的痕迹也没有，里面完全没有出现"Angular"的字样。
   
   In fact, it really is *just a class*. It's not a component until we *tell Angular about it*.
   
-  实际上，它真的只是一个类。直到我们 *告诉Angular这一点* ，否则就没有组件。
+  实际上，它真的*只是一个类*。直到我们*告诉Angular*这一点，它才会成为组件。
   
   We tell Angular that `HeroListComponent` is a component by attaching **metadata** to the class.
   
-  通过把 **元数据** 附加到类，我们告诉Angular：`HeroListComponent`是个组件。
+  只要把**元数据**附加到这个类，我们就相当于告诉Angular：`HeroListComponent`是个组件。
   
   The easy way to attach metadata in TypeScript is with a **decorator**. 
   Here's some metadata for `HeroListComponent`:
   
-  TypeScript中，附加元数据的简单方式是 **装饰器(decorator)** 。
+  在TypeScript中，**装饰器(decorator)**是附加元数据的简易途径。
   下面就是`HeroListComponent`的一些元数据。
 +makeExample('architecture/ts/app/hero-list.component.ts', 'metadata', 'app/hero-list.component.ts (元数据)')
 :marked
   Here we see the `@Component` decorator which (no surprise) identifies the class
   immediately below it as a Component class.
   
-  这里我们看到`@Component`装饰器（理所当然的）标记出紧跟着它的这个类是一个组件类。
+  这里我们看到`@Component`装饰器（毫无悬念的）把紧随其后的类标记成了组件类。
   
   A decorator is a function. Decorators often have a configuration parameter. 
   The `@Component` decorator takes a required configuration object with the
   information Angular needs to create and present the component and its view.
   
-  装饰器是一个函数。装饰器通常还有配置参数。
+  装饰器是一个函数。装饰器通常还带有配置参数。
-  `@Component`装饰器可以带一个配置对象，这些信息会被Angular用来创建和展示组件及其视图。
+  `@Component`装饰器可以接受一个配置对象，Angular会基于这些信息创建和展示组件及其视图。
   
   Here we see a few of the possible `@Component` configuration options:
   

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

@@ -210,9 +210,9 @@ table(width="100%")
   Post *documentation* issues and pull requests on the 
   [angular.io](https://github.com/angular/angular.io) github repository.
   
-  如果是*文档方面*的问题或Pull Requests，请到Github上的[angular.io](https://github.com/angular/angular.io)仓库。
+  如果有*文档方面*的问题或Pull Requests，请到Github上的[angular.io](https://github.com/angular/angular.io)仓库。
   
   Post issues with *Angular 2 itself* to the [angular](https://github.com/angular/angular) github repository.
   
-  如果是*Angular 2本身*的问题，请到Github上的[angular](https://github.com/angular/angular)仓库。
+  如果有*Angular 2本身*的问题，请到Github上的[angular](https://github.com/angular/angular)仓库。
 // #enddocregion the-rest

public/resources/css/_translate.scss

@@ -5,3 +5,9 @@
 .original-english-debug {
   border-bottom: 1px dashed red;
 }
+
+.translate-cn {
+  em {
+    font-style: normal;
+  }
+}

public/resources/js/translate.js

@@ -11,15 +11,32 @@
         }
       }
       node.title = prevNode.innerText;
+      node.classList.add('translate');
+      node.classList.add('translate-cn');
     }
   });
 
   function isPureEnglish(text) {
-    return /^[\1-\255—’“”]*$/.test(text);
+    return /^[\1-\255—’“”ç]*$/.test(text);
+  }
+
+  function attributesToString(node) {
+    return _.chain(node.attributes)
+      .map(function (value) {
+        if (value.name === 'id') {
+          return '';
+        } else {
+          return value.name + '=' + value.value;
+        }
+      })
+      .sortBy()
+      .value()
+      .join(';');
   }
 
   function isClonedNode(node1, node2) {
-    return node1.parentNode === node2.parentNode && node1.tagName === node2.tagName && node1.className === node2.className;
+    return node1.tagName === node2.tagName &&
+      attributesToString(node1) === attributesToString(node2.attributes);
   }
 
   function indexOf(node) {