iSharkFly-Docs
/
angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added scrollRestoreTechnique:'cookie' in the browsersync init config, potentially solve refresh position lost bug.

This commit is contained in:
Zhimin YE (Rex) 2016-05-25 15:37:09 +01:00
parent e1a273a986
commit 562ddeab94
2 changed files with 32 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
gulpfile.js
View File

@ -798,7 +798,8 @@ function watchAndSync(options, cb) {
execCommands(['npm run harp -- server .'], {}, cb); execCommands(['npm run harp -- server .'], {}, cb);
var browserSync = require('browser-sync').create(); var browserSync = require('browser-sync').create();
browserSync.init({proxy: 'localhost:9000'}); browserSync.init({proxy: 'localhost:9000',
scrollRestoreTechnique: 'cookie'});
if (options.devGuide) { if (options.devGuide) {
devGuideExamplesWatch(_devguideShredOptions, browserSync.reload); devGuideExamplesWatch(_devguideShredOptions, browserSync.reload);

61
public/docs/ts/latest/guide/architecture.jade
View File

@ -96,7 +96,7 @@ figure
A typical module is a cohesive block of code dedicated to a single purpose. 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. A module **exports** something of value in that code, typically one thing such as a class.
典型的组件是一个内聚的代码块，用以实现单一的目的。 典型的模块是一个内聚的代码块，用以实现单一的目的。
在这些代码中，模块会*导出*一些东西，最典型的就是类。 在这些代码中，模块会*导出*一些东西，最典型的就是类。
<br clear="all"><br> <br clear="all"><br>
.l-sub-section .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 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. 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. 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. Each chapter has plenty to offer after you steer clear of the `import` and `export` statements.
Angular本身并不需要模块化方案或使用这种特定的语法。如果你不喜欢，可以不用它。 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) 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. which demonstrates Angular 2 development with plain old JavaScript and no module system.
在JavaScript（你可以从页面顶部的组合框选择它）分支下，可以找到如何安装和组织文件结构的线索。 在JavaScript（你可以从页面顶部的组合框选择JavaScript）分支下，可以找到如何安装和组织的线索。
它示范了如何用老版本的JavaScript语言，在没有模块化系统支持的情况下进行Angular 2开发 它示范了如何用老版本的JavaScript语言，在没有模块化系统支持的情况下进行Angular 2应用程序的开发。
。
:marked :marked
Perhaps the first module we meet is a module that exports a *component* class. 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, 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. 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`. 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. 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 The `export` statement tells TypeScript that this is a module whose
`AppComponent` class is public and accessible to other modules of the application. `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: 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=".") +makeExample('architecture/ts/app/main.ts', 'import', 'app/main.ts (节选)')(format=".")
:marked :marked
@ -157,7 +156,7 @@ figure
**模块名**（又叫模块ID）通常和去掉扩展名后的文件名相同。 **模块名**（又叫模块ID）通常和去掉扩展名后的文件名相同。
### Library Modules ### Library Modules
### 库模块 ### 模块库
figure figure
img(src="/resources/images/devguide/architecture/library-module.png" alt="组件" 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 :marked
@ -170,23 +169,23 @@ figure
Each Angular library contains a [barrel](../glossary.html#barrel) module Each Angular library contains a [barrel](../glossary.html#barrel) module
that is actually a public façade over several logically-related private modules. that is actually a public façade over several logically-related private modules.
Angular本身就是通过npm包发布的一组库模块，它们都以`@angular`为前缀。 Angular本身就是通过npm包发布的一组模块库，它们都以`@angular`为前缀。
每个Angular库中都包含一个[封装桶](../glossary.html#barrel)模块。 每个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. 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"> <br clear="all">
There are other important Angular library modules too such as `@angular/common`, `@angular/router`, and `@angular/http`. 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. 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: For example, we import the Angular **`Component` *function*** from the *@angular/core* module like this:
我们从Angular库模块中导入所需内容的方式都差不多。 我们从Angular模块库中导入所需内容的方式都差不多。
比如，我们从*@angular2/core*中导入Angular **`Component`*函数***的代码是这样的： 比如，我们从*@angular2/core*中导入Angular **`Component`*函数***的代码是这样的：
+makeExample('architecture/ts/app/app.component.ts', 'import')(format=".") +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*. 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. 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 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. We could path up and around the application folder structure if the source module were somewhere else.
当我们从*自己的*文件中导入时，模块名中带有路径前缀。 当我们从*自己的*文件中导入时，模块名中带有路径前缀。
在这个例子中，是一个相对路径（./）。这表示源模块和想导入它的模块位于同一个目录中（./）。 在这个例子中，前缀是一个相对路径（./）。这表示源模块和想导入它的模块位于同一个目录中（./）。
如果源模块位于其它位置，我们还可以向上引用应用目录结构中的任意路径（如`../../../somewhere/`）。 如果源模块位于其它位置，我们还可以向上引用应用目录结构中的任意路径（如`../../../somewhere/`）。
.l-sub-section .l-sub-section
:marked :marked
@ -225,8 +224,8 @@ figure
While we're focused on our application, *import* and *export* While we're focused on our application, *import* and *export*
is about all we need to know. is about all we need to know.
“模块加载与导入”背后的基础设施，是一个很重要的话题，但它不在Angular简介的范围内。 “模块加载与导入”背后的基础设施是一个很重要的话题，但它不在Angular简介的范围内。
我们目前的焦点是讲解应用，你只要知道*import*和*export*就够了。 只要焦点是我们的应用程序，我们只需要知道*import*和*export*就够了。
:marked :marked
The key take-aways are: The key take-aways are:
@ -247,7 +246,7 @@ figure
The first module we write will most likely export a component. The first module we write will most likely export a component.
我们写的第一个模块很可能是导出一个组件。 我们写的第一个模块将会导出一个组件。
.l-main-section .l-main-section
<a id="component"></a> <a id="component"></a>
@ -261,7 +260,7 @@ figure
The shell at the application root with navigation links, that list of heroes, the hero editor ... The shell at the application root with navigation links, that list of heroes, the hero editor ...
they're all views controlled by Components. they're all views controlled by Components.
**组件**控制屏幕中像补丁那么大的一小块儿地方，这块儿地方我们称之为*视图*。 **组件**控制屏幕中像补丁那么大的一小块地方，这块地方我们称之为*视图*。
应用的“外壳”包括一些导航链接、英雄列表、英雄编辑器…… 它们都是由组件控制的视图。 应用的“外壳”包括一些导航链接、英雄列表、英雄编辑器…… 它们都是由组件控制的视图。
We define a Component's application logic - what it does to support the view - inside a class. We define a Component's application logic - what it does to support the view - inside a class.
@ -271,13 +270,13 @@ figure
组件通过一些由属性和方法组成的API与视图交互。 组件通过一些由属性和方法组成的API与视图交互。
<a id="component-code"></a> <a id="component-code"></a>
A `HeroListComponent`, for example, might have a `heroes` property that returns an array of heroes A `HeroListComponent`, for example, might have a `heroes` property that returns an array of heroes
that it acquired from a service. 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 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: It might be a class like this:
比如，`HeroListComponent`组件，可能有一个`heroes`属性，它返回一个英雄的数组，而这些数据是从服务中取得的。 <a id="component-code"></a>
比如，在`HeroListComponent`组件中，可能有一个`heroes`属性，它返回一个英雄的数组，而这些数据是从服务中取得的。
它可能还有一个`selectHero()`方法，当用户从列表中点击一个英雄时，用它来设置`selectedHero`属性。 它可能还有一个`selectHero()`方法，当用户从列表中点击一个英雄时，用它来设置`selectedHero`属性。
它可能是像这样的一个类： 它可能是像这样的一个类：
@ -300,8 +299,8 @@ figure
For the moment, have faith that Angular will call the constructor and deliver an For the moment, have faith that Angular will call the constructor and deliver an
appropriate `HeroService` when we need it. appropriate `HeroService` when we need it.
我们可能会好奇，谁来调用那个构造函数？谁为服务提供参数？ 你可能会好奇，谁来调用那个构造函数？谁为服务提供参数？
目前，只要信任Angular就行了。它会在合适的时机调用构造函数，并在我们需要的时候给出一个合适的`HeroService`实例。 目前，你只要信任Angular会在合适的时机调用构造函数，并在我们需要的时候给出一个合适的`HeroService`实例。
.l-main-section .l-main-section
<a id="template"></a> <a id="template"></a>
@ -314,7 +313,7 @@ figure
We define a Component's view with its companion **template**. A template is a form of HTML 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. 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 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. template for our `HeroList` component.
@ -328,14 +327,14 @@ figure
What are `*ngFor`, `{{hero.name}}`, `(click)`, `[hero]`, and `<hero-detail>`? What are `*ngFor`, `{{hero.name}}`, `(click)`, `[hero]`, and `<hero-detail>`?
我们认得`<h2>`和`<div>`。 我们认得`<h2>`和`<div>`。
但另外那些标签/属性是我们在学校中从没听过的。 但另外那些标签/属性是我们在学校里从没听过的。
`*ngFor`、`{{hero.name}}`、`(click)`、`[hero]`和`<hero-detail>`都是什么鬼？ `*ngFor`、`{{hero.name}}`、`(click)`、`[hero]`和`<hero-detail>`都是什么东西？
These are examples of Angular's [template syntax](template-syntax.html). 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 will grow accustomed to that syntax and may even learn to love it.
We'll begin to explain it in a moment. 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. We can mix ... and will mix ... our custom components with native HTML in the same layouts.
注意：`<hero-detail>`竟如此和谐的出现在那些已知的HTML元素中。 注意：`<hero-detail>`竟如此和谐的出现在那些已知的HTML元素中。
在同一个设计中，我们能混用……也将继续混用……自定义组件与原生HTML。 在同一个格局中，我们能混用……也将继续混用……自定义组件与原生HTML。
And in this manner we can and will compose complex component trees to build out our richly featured application. And in this manner we can and will compose complex component trees to build out our richly featured application.