diff --git a/gulpfile.js b/gulpfile.js index 73778bb19e..6eb339517f 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -798,7 +798,8 @@ function watchAndSync(options, cb) { execCommands(['npm run harp -- server .'], {}, cb); var browserSync = require('browser-sync').create(); - browserSync.init({proxy: 'localhost:9000'}); + browserSync.init({proxy: 'localhost:9000', +scrollRestoreTechnique: 'cookie'}); if (options.devGuide) { devGuideExamplesWatch(_devguideShredOptions, browserSync.reload); diff --git a/public/docs/ts/latest/guide/architecture.jade b/public/docs/ts/latest/guide/architecture.jade index e37f4e362a..34bf123e6e 100644 --- a/public/docs/ts/latest/guide/architecture.jade +++ b/public/docs/ts/latest/guide/architecture.jade @@ -96,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 @@ -106,20 +106,19 @@ figure 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`语句，每章都会为你提供很多（知识）。 + 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开发 - 。 + 在JavaScript（你可以从页面顶部的组合框选择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, @@ -127,8 +126,8 @@ figure 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. @@ -141,11 +140,11 @@ figure 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 @@ -157,7 +156,7 @@ figure **模块名**（又叫模块ID）通常和去掉扩展名后的文件名相同。 ### Library Modules - ### 库模块 + ### 模块库 figure img(src="/resources/images/devguide/architecture/library-module.png" alt="组件" align="left" style="width:240px; margin-left:-40px;margin-right:10px" ) :marked @@ -170,23 +169,23 @@ 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本身就是通过npm包发布的一组库模块，它们都以`@angular`为前缀。 + 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. - `@angular/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库模块中导入所需内容的方式都差不多。 + 我们从Angular模块库中导入所需内容的方式都差不多。 比如，我们从*@angular2/core*中导入Angular **`Component`*函数***的代码是这样的： +makeExample('architecture/ts/app/app.component.ts', 'import')(format=".") @@ -201,7 +200,7 @@ figure the import statement refers to the bare module name, `@angular/core`, *without a path prefix*. 注意到不同之处了吗？ - 第一种，从Angular库模块中导入时，import语句引用的是“裸”模块名 —— `@angular/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 @@ -209,7 +208,7 @@ figure We could path up and around the application folder structure if the source module were somewhere else. 当我们从*自己的*文件中导入时，模块名中带有路径前缀。 - 在这个例子中，是一个相对路径（./）。这表示源模块和想导入它的模块位于同一个目录中（./）。 + 在这个例子中，前缀是一个相对路径（./）。这表示源模块和想导入它的模块位于同一个目录中（./）。 如果源模块位于其它位置，我们还可以向上引用应用目录结构中的任意路径（如`../../../somewhere/`）。 .l-sub-section :marked @@ -225,8 +224,8 @@ figure 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: @@ -247,7 +246,7 @@ figure The first module we write will most likely export a component. - 我们写的第一个模块很可能是导出一个组件。 + 我们写的第一个模块将会导出一个组件。 .l-main-section @@ -261,7 +260,7 @@ 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. @@ -271,13 +270,13 @@ figure 组件通过一些由属性和方法组成的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`属性，它返回一个英雄的数组，而这些数据是从服务中取得的。 + + 比如，在`HeroListComponent`组件中，可能有一个`heroes`属性，它返回一个英雄的数组，而这些数据是从服务中取得的。 它可能还有一个`selectHero()`方法，当用户从列表中点击一个英雄时，用它来设置`selectedHero`属性。 它可能是像这样的一个类： @@ -300,8 +299,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 @@ -314,7 +313,7 @@ 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. @@ -328,14 +327,14 @@ 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)例子。 我们会逐渐习惯这些语法，甚至会学着爱上它。 一会儿我们再解释它。 @@ -361,7 +360,7 @@ figure We can mix ... and will mix ... our custom components with native HTML in the same layouts. 注意：``竟如此和谐的出现在那些已知的HTML元素中。 - 在同一个设计中，我们能混用……也将继续混用……自定义组件与原生HTML。 + 在同一个格局中，我们能混用……也将继续混用……自定义组件与原生HTML。 And in this manner we can and will compose complex component trees to build out our richly featured application.