review to line 457 for arrchitecture.jade.
This commit is contained in:
Rex Ye
parent
c18b193288
commit
88d5d3a594
|
|
@ -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)中找到。
|
||||
|
||||
<a id="module"></a>
|
||||
.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.
|
||||
|
||||
典型的组件是一个内聚的代码块，用以完成单一的目的。
|
||||
典型的组件是一个内聚的代码块，用以实现单一的目的。
|
||||
在这些代码中，模块会*导出*一些东西，最典型的就是类。
|
||||
<br clear="all"><br>
|
||||
.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库模块，从这里我们能获得大部分可能需要的东西。
|
||||
<br clear="all">
|
||||
|
||||
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
|
||||
<a id="component"></a>
|
||||
: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与视图交互。
|
||||
|
||||
<a id="component-code"></a>
|
||||
|
|
@ -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
|
||||
<a id="template"></a>
|
||||
|
|
@ -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 `<h2>` and `<div>`.
|
||||
|
|
@ -310,7 +342,7 @@ figure
|
|||
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.
|
||||
|
|
@ -333,13 +365,16 @@ figure
|
|||
|
||||
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
|
||||
## 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中寻找一个`<hero-list>`标签，然后创建组件，并插入此标签中。
|
||||
比如，如果应用“壳”（组件）的模板包含如下代码：
|
||||
|
||||
<div style="margin-left:30px">
|
||||
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 `<hero-detail>` tags.
|
||||
Angular will do so only if we mention the `HeroDetailComponent` in this `directives` array.
|
||||
|
||||
* `directives` - 一个数组，包含*此*模板需要的组件或指令。
|
||||
看看模板的最后一行，这表示我们期待Angular把`HeroDetailComponent`的实例放在`<hero-detail>`标签中。
|
||||
但是，只有当我们在`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" )
|
||||
|
|
|
|||
Loading…
Reference in New Issue