added scrollRestoreTechnique:'cookie' in the browsersync init config, potentially solve refresh position lost bug.
This commit is contained in:
Zhimin YE (Rex)
parent
e1a273a986
commit
562ddeab94
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
||||
典型的组件是一个内聚的代码块，用以实现单一的目的。
|
||||
典型的模块是一个内聚的代码块，用以实现单一的目的。
|
||||
在这些代码中，模块会*导出*一些东西，最典型的就是类。
|
||||
<br clear="all"><br>
|
||||
.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模块库，从这里我们能获得大部分需要的东西。
|
||||
<br clear="all">
|
||||
|
||||
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
|
||||
<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 ...
|
||||
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 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:
|
||||
|
||||
比如，`HeroListComponent`组件，可能有一个`heroes`属性，它返回一个英雄的数组，而这些数据是从服务中取得的。
|
||||
<a id="component-code"></a>
|
||||
比如，在`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
|
||||
<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
|
||||
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 `<hero-detail>`?
|
||||
|
||||
我们认得`<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).
|
||||
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.
|
||||
|
||||
注意：`<hero-detail>`竟如此和谐的出现在那些已知的HTML元素中。
|
||||
在同一个设计中，我们能混用……也将继续混用……自定义组件与原生HTML。
|
||||
在同一个格局中，我们能混用……也将继续混用……自定义组件与原生HTML。
|
||||
|
||||
And in this manner we can and will compose complex component trees to build out our richly featured application.
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue