架构篇翻了一半儿

2016-04-20 23:20:58 +08:00 · 2016-04-20 23:20:58 +08:00 · 3d2e51fd9b
parent b007e835db
commit 3d2e51fd9b
1 changed files with 163 additions and 9 deletions
--- a/public/docs/ts/latest/guide/architecture.jade
+++ b/public/docs/ts/latest/guide/architecture.jade
@ -3,232 +3,386 @@ include ../_util-fns
 :marked
  Angular 2 is a framework to help us build client applications in HTML and 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 takes over, presenting our application content in a browser and responding to user interactions
  according to the instructions we provided.
  
+  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
  img(src="/resources/images/devguide/architecture/overview2.png" alt="overview" style="margin-left:-40px;" width="700")
 :marked
  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. [Service](#service)
+  1. [服务(Service)](#service)
  1. [Directive](#directive)
+  1. [指令(Directive)](#directive)
  1. [Dependency Injection](#dependency-injection)
+  1. [依赖注入(Dependency Injection)](#dependency-injection)

  Learn these eight and we're on our way.
+  
+  我们这一路上就将学习这8点。

 .l-sub-section
  :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)中找到。
 <a id="module"></a>
 .l-main-section
 :marked
  ## The Module
+  ## 模块
 figure
-  img(src="/resources/images/devguide/architecture/module.png" alt="Component" align="left" style="width:240px; margin-left:-40px;margin-right:10px" )
+  img(src="/resources/images/devguide/architecture/module.png" alt="模块" align="left" style="width:240px; margin-left:-40px;margin-right:10px" )
 :marked
  Angular apps are modular. 
  
+  Angular应用是模块化的。
+  
  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的模块语法支持很好，本章假定我们使用那些语法作为模块化方案。这就是为什么我们要把 *模块* 列为一种基本构造块。
+     
     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`语句之后，它在每章都会出现很多。
+     
     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开发。
 :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最基本的构造块之一，我们会写很多。下一段，我们将会讨论组件。
+  但目前，只要知道组件类需要我们从模块中导出就行了。
+  
  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.
-+makeExample('architecture/ts/app/app.component.ts', 'export', 'app/app.component.ts (excerpt)')(format=".")
+  
+  大多数应用都有一个`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`类是公开的，可以被应用中的其它模块访问。
+  
  When we need a reference to the `AppComponent`, we **import** it like this:
-+makeExample('architecture/ts/app/main.ts', 'import', 'app/main.ts (excerpt)')(format=".")
+  
+  当我们需要引用`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）通常和去掉扩展名后的文件名相同。
  ### Library Modules 
+  ### 库模块
 figure
-  img(src="/resources/images/devguide/architecture/library-module.png" alt="Component" align="left" style="width:240px; margin-left:-40px;margin-right:10px" )
+  img(src="/resources/images/devguide/architecture/library-module.png" alt="组件" align="left" style="width:240px; margin-left:-40px;margin-right:10px" )
 :marked
  Some modules are libraries of other modules.
  
+  有些模块是其它模块的库。
+  
  Angular itself ships as a collection of library modules called "barrels". 
  Each Angular library is actually a public façade over several logically related private modules.
  
+  Angular本身就是用一组库模块的形式发布的，我们称之为“封装桶(barrel)”。
+  每个Angular库实际上是一个公开的外观层（façade），囊括了许多逻辑上相关的私有模块。
+  
  The `angular2/core` library is the primary Angular library module from which we get most of what we need.
+  
+  `angular2/core`库是主要的Angular库模块，从这里我们能获得所需的大部分东西。
  <br clear="all">
  
  There are other important Angular library modules too such as `angular2/common`, `angular2/router`, and `angular2/http`.
+  
+  还有其它重要的Angular库，比如`angular2/common`, `angular2/router` 和 `angular2/http`。
 .l-sub-section
  :marked
     Learn more about how Angular organizes and distributes modules 
     in "[Modules, barrels and bundles](https://github.com/angular/angular/blob/master/modules/angular2/docs/bundles/overview.md)".  
+     
+     要学习Angular如何组织和分发模块的知识，参见"[模块、封装桶(barrel)和捆绑包(bundle)](https://github.com/angular/angular/blob/master/modules/angular2/docs/bundles/overview.md)"
 :marked
  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 *angular2/core* module like this:
+  
+  我们从Angular库模块中导入的方式基本上都是如此。
+  比如，我们从 *angular2/core* 中导入Angular **`Component` *函数* ** 的代码是这样的：
 +makeExample('architecture/ts/app/app.component.ts', 'import')(format=".")
 :marked
  Compare that syntax to our previous import of `AppComponent`.
+  
+  比较一下它和前面导入`AppComponent`时的语法。
 +makeExample('architecture/ts/app/main.ts', 'import')(format=".")
 :marked
  Notice the difference? 
  In the first case, when importing from an Angular library module,
  the import statement refers to the bare module name, `angular2/core`, *without a path prefix*.
  
+  注意到不同之处了吗？
+  前面的方式中，当从Angular库模块中导入时，import语句引用的是一个裸模块名 —— `angular2/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/）。
 .l-sub-section
  :marked
    We import and export in the ECMAScript 2015 (ES2015) module syntax. 
    Learn more about that syntax [here](http://www.2ality.com/2014/09/es6-modules-final.html)
    and many other places on the web.
    
+    我们导入和导出使用的是ECMAScript 2015 (ES2015)的语法。
+    要学习更多关于此语法的知识，参见[这里](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* 就足够了。
 :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.
+  
+  我们写的第一个模块很可能是导出一个组件。
 .l-main-section
 <a id="component"></a>
 :marked
  ## The Component
+  ## 组件
 figure
-  img(src="/resources/images/devguide/architecture/hero-component.png" alt="Component" align="left" style="width:200px; margin-left:-40px;margin-right:10px" )
+  img(src="/resources/images/devguide/architecture/hero-component.png" alt="组件" align="left" style="width:200px; margin-left:-40px;margin-right:10px" )
 :marked
  A **Component** controls a patch of screen real estate that we could call a *view*. 
  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>
  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`属性，它返回一个英雄的数组，这个数据是从服务中取得的。
+  它还可能有一个`selectHero()`方法，用来在用户从列表中点击一个英雄时设置`selectedHero`属性。
+  它可能是像这样的一个类：

 +makeExample('architecture/ts/app/hero-list.component.ts', 'class', 'app/hero-list.component.ts')
 :marked
  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)在组件生命周期的每个时间点做出自己的处理。
 .l-sub-section
  :marked
    We're not showing those hooks in this example 
    but we are making a mental note to find out about them later.
    
+    我们不会在这个例子中展示这些钩子，先在脑子中留个记号，将来再翻出来讲。
+    
    We may wonder who is calling that constructor? Who provides the service parameter?
    For the moment, have faith that Angular will call the constructor and deliver an
    appropriate `HeroService` when we need it.

+    我们可能会好奇，谁调用那个构造函数？谁为服务提供参数？
+    现在，只要相信Angular就行了，它会去调用构造函数，并且在我们需要的时候交给我们一个合适的`HeroService`实例。
+ 
 .l-main-section
 <a id="template"></a>
 :marked
  ## The Template
+  ## 模板
 figure
-  img(src="/resources/images/devguide/architecture/template.png" alt="Template" align="left" style="width:200px; margin-left:-40px;margin-right:10px" )
+  img(src="/resources/images/devguide/architecture/template.png" alt="模板" align="left" style="width:200px; margin-left:-40px;margin-right:10px" )
 :marked
  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如何渲染组件。

  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>`. 
  But there's other markup that no one told us about in school.
  What are `*ngFor`, `{{hero.name}}`, `(click)`, `[hero]`, and `<hero-detail>`?
  
+  我们认得`<h2>`和`<div>`。
+  但有一些其他的标签/属性是我们在学校中从没有听说过的。
+  什么是`*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) 的例子。
+  我们会逐步习惯这些语法，甚至会学着爱上它。
+  一会儿我们再解释它。
+  
  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.
  The `HeroDetailComponent` (code not shown) presents facts about a particular hero, the
  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`的 *子组件* 。

 figure
-  img(src="/resources/images/devguide/architecture/component-tree.png" alt="Metadata" align="left" style="width:300px; margin-left:-40px;margin-right:10px" )
+  img(src="/resources/images/devguide/architecture/component-tree.png" alt="组件树" align="left" style="width:300px; margin-left:-40px;margin-right:10px" )
 :marked
  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元素中。
+  我们在同一个布局中，可以混合……而且还将混合……我们的自定义组件与原生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
  ## Angular Metadata
+  ## Angular元数据
 figure
-  img(src="/resources/images/devguide/architecture/metadata.png" alt="Metadata" align="left" style="width:150px; margin-left:-40px;margin-right:10px" )
+  img(src="/resources/images/devguide/architecture/metadata.png" alt="元数据" align="left" style="width:150px; margin-left:-40px;margin-right:10px" )
 :marked
 <p style="padding-top:10px">Metadata tells Angular how to process a class.</p>
+<p style="padding-top:10px">元数据告诉Angular如何处理一个类。</p>
 <br clear="all">
 :marked
  [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"。
+  
  In fact, it really is *just a class*. It's not a component until we *tell Angular about it*.
  
+  实际上，它真的只是一个类。直到我们 *告诉Angular这一点* ，否则就没有组件。
+  
  We tell Angular that `HeroListComponent` is a component by attaching **metadata** to the class.
  
+  通过把 **元数据** 附加到类，我们告诉Angular：`HeroListComponent`是个组件。
+  
  The easy way to attach metadata in TypeScript is with a **decorator**. 
  Here's some metadata for `HeroListComponent`:
-+makeExample('architecture/ts/app/hero-list.component.ts', 'metadata', 'app/hero-list.component.ts (metadata)')
+  
+  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`装饰器（理所当然的）标记出紧跟着它的这个类是一个组件类。
+  
  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用来创建和展示组件及其视图。
+  
  Here we see a few of the possible `@Component` configuration options:
  
  * `selector` - a css selector that tells Angular to create and insert an instance of this component