From 88d5d3a594ec69b0a24063737e6190df9033b52a Mon Sep 17 00:00:00 2001 From: Rex Ye Date: Mon, 16 May 2016 17:06:48 +0100 Subject: [PATCH] review to line 457 for arrchitecture.jade. --- public/docs/ts/latest/guide/architecture.jade | 81 ++++++++++++++----- 1 file changed, 61 insertions(+), 20 deletions(-) diff --git a/public/docs/ts/latest/guide/architecture.jade b/public/docs/ts/latest/guide/architecture.jade index aa420fb46e..0fedfa74c3 100644 --- a/public/docs/ts/latest/guide/architecture.jade +++ b/public/docs/ts/latest/guide/architecture.jade @@ -34,21 +34,37 @@ figure The architecture diagram identifies the eight main building blocks of an Angular 2 application: 这个架构图展现了Angular应用中的8个主要构造块： + 1. [Module](#module) + 1. [模块(Module)](#module) + 1. [Component](#component) + 1. [组件(Component)](#component) + 1. [Template](#template) + 1. [模板(Template)](#template) + 1. [Metadata](#metadata) + 1. [元数据(Metadata)](#metadata) + 1. [Data Binding](#data-binding) + 1. [数据绑定(Data Binding)](#data-binding) + 1. [Directive](#directive) + 1. [指令(Directive)](#directive) + 1. [Service](#service) + 1. [服务(Service)](#service) + 1. [Dependency Injection](#dependency-injection) + 1. [依赖注入(Dependency Injection)](#dependency-injection) Learn these eight and we're on our way. @@ -60,6 +76,7 @@ figure 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)中找到。 + .l-main-section :marked @@ -79,7 +96,7 @@ figure 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 @@ -95,13 +112,14 @@ figure 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语言，在没有模块化系统支持的情况下进行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, @@ -110,31 +128,34 @@ figure 我们遇到的第一个模块，很可能就是用于导出*组件*类的那个。 组件是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`的文件中。 打开它，我们将会看到一个`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`组件。 + `import`语句告诉系统，它能从附近名叫`app.component`的文件中获得`AppComponent`组件。 **模块名**（又叫模块ID）通常和去掉扩展名后的文件名相同。 + ### Library Modules ### 库模块 figure @@ -151,11 +172,11 @@ figure Angular本身就是通过npm包发布的一组库模块，它们都以`@angular`为前缀。 每个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. - `@angular/core`库是主要的Angular库模块，从这里我们能获得所需的大部分东西。 + `@angular/core`库是主要的Angular库模块，从这里我们能获得大部分可能需要的东西。
There are other important Angular library modules too such as `@angular/common`, `@angular/router`, and `@angular/http`. @@ -165,8 +186,9 @@ figure 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 Compare that syntax to our previous import of `AppComponent`. @@ -205,20 +227,28 @@ figure “模块加载与导入”背后的基础设施，是一个很重要的话题，但它不在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. 我们写的第一个模块很可能是导出一个组件。 + .l-main-section :marked @@ -231,13 +261,13 @@ 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与视图交互。 @@ -258,6 +288,7 @@ figure 当用户在这个应用中“移动”时，Angular会创建、更新和销毁组件。 开发人员可以通过[生命周期钩子](lifecycle-hooks.html)在组件生命周期的各个时间点上插入自己的操作。 + .l-sub-section :marked We're not showing those hooks in this example @@ -270,7 +301,7 @@ figure appropriate `HeroService` when we need it. 我们可能会好奇，谁来调用那个构造函数？谁为服务提供参数？ - 目前，只要信任Angular就行了。它会在合适的时机调用构造函数，并在我们要用的时候给出一个合适的`HeroService`实例。 + 目前，只要信任Angular就行了。它会在合适的时机调用构造函数，并在我们需要的时候给出一个合适的`HeroService`实例。 .l-main-section @@ -283,12 +314,13 @@ 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`组件的一个模板。 + +makeExample('architecture/ts/app/hero-list.component.html',null,'app/hero-list.component.html') :marked We recognize `

` and `
`. @@ -310,7 +342,7 @@ figure 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. @@ -333,13 +365,16 @@ figure And in this manner we can and will compose complex component trees to build out our richly featured application. - 在这种方式下，我们能而且将组合出复杂的组件树，来构建那些丰富多彩的应用。 + 在这种方式下，我们能够，并且将会组合出复杂的组件树，用来构建那些丰富多彩的应用。 +
.l-main-section :marked ## Angular Metadata + ## Angular元数据 + figure img(src="/resources/images/devguide/architecture/metadata.png" alt="元数据" align="left" style="width:150px; margin-left:-40px;margin-right:10px" ) :marked @@ -355,7 +390,7 @@ figure 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. @@ -390,6 +425,7 @@ figure * `selector` - 一个css选择器，它告诉Angular在*父*HTML中寻找一个``标签，然后创建组件，并插入此标签中。 比如，如果应用“壳”（组件）的模板包含如下代码： +
code-example(language="html"). <hero-list></hero-list> @@ -400,19 +436,24 @@ code-example(language="html"). >Angular就会在这些标签中插入`HeroListComponent`视图的一个实例。 * `templateUrl` - the address of this component's template which we showed [above](#template). + * `templateUrl` - 组件模板的地址，我们在[前面](#template)见过。 + * `directives` - an array of the Components or Directives that *this* template requires. We saw in the last line of our template that we expect Angular to insert a `HeroDetailComponent` in the space indicated by `` tags. Angular will do so only if we mention the `HeroDetailComponent` in this `directives` array. + * `directives` - 一个数组，包含*此*模板需要的组件或指令。 看看模板的最后一行，这表示我们期待Angular把`HeroDetailComponent`的实例放在``标签中。 - 但是，只有当我们在`directives`数组中引用过`HeroDetailComponent`的时候，Angular才会这么做。 + 但是，只有当我们在`directives`数组中提及到`HeroDetailComponent`的时候，Angular才会这么做。 + * `providers` - an array of **dependency injection providers** for services that the component requires. This is one way to tell Angular that our component's constructor requires a `HeroService` so it can get the list of heroes to display. We'll get to dependency injection in a moment. + * `providers` - 一个数组，包含组件所依赖的用于提供服务的*依赖注入供应商*。 - 这是我们告诉Angular该组件的构造器需要一个`HeroService`服务的方式之一。所以组件才能获得英雄的列表数据，并显示出来。 + 这是我们告诉Angular，该组件的构造函数需要一个`HeroService`服务。所以组件才能获得英雄的列表数据，并显示出来。 这样我们就在一瞬间完成了依赖注入。 figure img(src="/resources/images/devguide/architecture/template-metadata-component.png" alt="元数据" align="left" style="height:200px; margin-left:-40px;margin-right:10px" )