diff --git a/public/docs/ts/latest/guide/architecture.jade b/public/docs/ts/latest/guide/architecture.jade
index ca4279fadf..14e3750d95 100644
--- a/public/docs/ts/latest/guide/architecture.jade
+++ b/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在浏览器中接管、展现应用的内容,并根据我们提供的操作指令响应用户的交互。
: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)中找到。
.l-main-section
:marked
@@ -75,66 +74,67 @@ 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.
- 典型的组件是一个内聚的代码块组成的,用以完成单一的目的。
+ 典型的组件是一个内聚的代码块,用以完成单一的目的。
+ 在这些代码中,模块会*导出*一些东西,最典型的就是类。
.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语言,在没有模块化系统的情况下进行Angular 2开发。
+ 在JavaScript(你可以从页面顶部的组合框选择它)分支下,可以找到如何安装和组织文件结构的线索。
+ 它示范了如何用老版本的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:
- 当我们需要引用`AppComponent`时,我们 **导入** 它,就像这样:
+ 当我们需要引用`AppComponent`时,我们**导入**它,就像这样:
+makeExample('architecture/ts/app/main.ts', 'import', 'app/main.ts (节选)')(format=".")
:marked
The `import` statement tells the system it can get an `AppComponent` from a module named `app.component`
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`组件。
- **模块名** (又叫模块ID)通常和去掉扩展名后的文件名相同。
+ `import`语句告诉系统,它能从附近一个名叫`app.component`的文件中获得一个`AppComponent`组件。
+ **模块名**(又叫模块ID)通常和去掉扩展名后的文件名相同。
### Library Modules
### 库模块
figure
@@ -149,24 +149,24 @@ 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库都包含一个[封装桶](../glossary.html#barrel)模块。
- 它实际上是一个公开的外观层(façade),囊括了许多逻辑上相关的私有模块。
+ Angular本身就是通过npm包发布的一组库模块,它们都以`@angular`为前缀。
+ 每个Angular库中都包含一个[封装桶](../glossary.html#barrel)模块。
+ 它实际上是一个公开的外观层(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库模块,从这里我们能获得所需的大部分东西。
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库模块中导入所需内容的方式都与此类似。
- 比如,我们从 *@angular2/core* 中导入Angular **`Component` *函数* ** 的代码是这样的:
+ 我们从Angular库模块中导入所需内容的方式都跟这差不多。
+ 比如,我们从*@angular2/core*中导入Angular **`Component`*函数***的代码是这样的:
+makeExample('architecture/ts/app/app.component.ts', 'import')(format=".")
:marked
Compare that syntax to our previous import of `AppComponent`.
@@ -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的范围之外。在我们聚焦于讲解应用的时候,知道 *import* 和 *export* 就足够了。
+ “模块加载与导入”背后的基础设施,是一个很重要的话题,但它不在Angular简介的范围内。
+ 我们目前的焦点是讲解应用,你只要知道*import*和*export*就够了。
:marked
The key take-aways are:
- 要知道的关键是:
+ 这里的关键点是:
* Angular apps are composed of modules.
* Angular应用是由模块组成的。
* Modules export things — classes, function, values — 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 `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:
-
- 比如,`HeroListComponent`组件,可能有一个`heroes`属性,它返回一个英雄的数组,这个数据是从服务中取得的。
- 它还可能有一个`selectHero()`方法,用来在用户从列表中点击一个英雄时设置`selectedHero`属性。
+ 比如,`HeroListComponent`组件,可能有一个`heroes`属性,它返回一个英雄的数组,而这些数据是从服务中取得的。
+ 它可能还有一个`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会创建、更新、销毁组件。
- 开发人员还可以通过[生命周期钩子](lifecycle-hooks.html)在组件生命周期的每个时间点做出自己的处理。
+ 当用户在这个应用中“移动”时,Angular会创建、更新和销毁组件。
+ 开发人员可以通过[生命周期钩子](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
@@ -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 `