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 `

` and `
`. @@ -295,21 +296,21 @@ figure What are `*ngFor`, `{{hero.name}}`, `(click)`, `[hero]`, and ``? 我们认得`

`和`
`。 - 但有一些其它的标签/属性是我们在学校中从没有听说过的。 - 什么是`*ngFor`、`{{hero.name}}`、`(click)`、`[hero]`和``? + 但另外那些标签/属性是我们在学校中从没听过的。 + `*ngFor`、`{{hero.name}}`、`(click)`、`[hero]`和``都是什么鬼? 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 `` tag is a custom element representing the `HeroDetailComponent`. - 在我们开始前,注意最后那行。 + 在开始前,先仔细看下最后那行。 ``是一个自定义元素的标签,用来表示`HeroDetailComponent`组件。 The `HeroDetailComponent` is a *different* component than the `HeroListComponent` we've been reviewing. @@ -317,9 +318,9 @@ 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`列表中选择的。 + `HeroDetailComponent`是`HeroListComponent`的*子组件*。 figure img(src="/resources/images/devguide/architecture/component-tree.png" alt="组件树" align="left" style="width:300px; margin-left:-40px;margin-right:10px" ) @@ -327,14 +328,13 @@ figure Notice how `` 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. - 注意:``是多么和谐的出现在我们已经知道的那些HTML元素中。 - 我们在同一个布局中,可以混合……而且还将混合……我们的自定义组件与原生HTML。 + 注意:``竟如此和谐的出现在那些已知的HTML元素中。 + 在同一个设计中,我们能混用……也将继续混用……自定义组件与原生HTML。 And in this manner we can and will compose complex component trees to build out our richly featured application. - 在这种方式下,我们能而且将会组合出复杂的组件树,来构建我们那些丰富多彩的应用。 + 在这种方式下,我们能而且将组合出复杂的组件树,来构建那些丰富多彩的应用。
- .l-main-section :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`,我们就明白,它只是一个类。 - 毫无框架的迹象,里面完全没有出现"Angular"。 + [回头看看](#component-code)`HeroListComponent`就会明白:它只是一个类。 + 一点框架的痕迹也没有,里面完全没有出现"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: diff --git a/public/docs/ts/latest/guide/index.jade b/public/docs/ts/latest/guide/index.jade index 3c15cef08d..01dd333ac1 100644 --- a/public/docs/ts/latest/guide/index.jade +++ b/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 diff --git a/public/resources/css/_translate.scss b/public/resources/css/_translate.scss index 0b36ce178f..50eb879b55 100644 --- a/public/resources/css/_translate.scss +++ b/public/resources/css/_translate.scss @@ -5,3 +5,9 @@ .original-english-debug { border-bottom: 1px dashed red; } + +.translate-cn { + em { + font-style: normal; + } +} diff --git a/public/resources/js/translate.js b/public/resources/js/translate.js index aa0e56cd5e..675ed43148 100644 --- a/public/resources/js/translate.js +++ b/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) {