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

Merge remote-tracking branch 'remotes/angular.io/master' 

# Conflicts:
#	public/docs/ts/latest/_data.json
#	public/docs/ts/latest/glossary.jade
This commit is contained in:
Zhimin(Rex) YE 2016-06-15 21:58:10 +01:00
parent 3271bdff60 e9cf2a539f
commit b5f0eadfa0
23 changed files with 253 additions and 239 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
public/docs/_examples/cb-ts-to-js/js/index.html
View File

@ -11,12 +11,12 @@
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/rxjs/bundles/Rx.umd.js"></script>
<script src="node_modules/@angular/core/core.umd.js"></script>
<script src="node_modules/@angular/common/common.umd.js"></script>
<script src="node_modules/@angular/compiler/compiler.umd.js"></script>
<script src="node_modules/@angular/platform-browser/platform-browser.umd.js"></script>
<script src="node_modules/@angular/platform-browser-dynamic/platform-browser-dynamic.umd.js"></script>
<script src="node_modules/@angular/router-deprecated/router-deprecated.umd.js"></script>
<script src="node_modules/@angular/core/bundles/core.umd.js"></script>
<script src="node_modules/@angular/common/bundles/common.umd.js"></script>
<script src="node_modules/@angular/compiler/bundles/compiler.umd.js"></script>
<script src="node_modules/@angular/platform-browser/bundles/platform-browser.umd.js"></script>
<script src="node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js"></script>
<script src="node_modules/@angular/router-deprecated/bundles/router-deprecated.umd.js"></script>
<script src="app/data.service.js"></script>
<script src="app/hero.component.js"></script>

10
public/docs/_examples/forms/js/index.html
View File

@ -21,11 +21,11 @@
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/rxjs/bundles/Rx.umd.js"></script>
<script src="node_modules/@angular/core/core.umd.js"></script>
<script src="node_modules/@angular/common/common.umd.js"></script>
<script src="node_modules/@angular/compiler/compiler.umd.js"></script>
<script src="node_modules/@angular/platform-browser/platform-browser.umd.js"></script>
<script src="node_modules/@angular/platform-browser-dynamic/platform-browser-dynamic.umd.js"></script>
<script src="node_modules/@angular/core/bundles/core.umd.js"></script>
<script src="node_modules/@angular/common/bundles/common.umd.js"></script>
<script src="node_modules/@angular/compiler/bundles/compiler.umd.js"></script>
<script src="node_modules/@angular/platform-browser/bundles/platform-browser.umd.js"></script>
<script src="node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js"></script>
<!-- #docregion scripts-hero, scripts-hero-form -->
<script src='app/hero.js'></script>

10
public/docs/_examples/lifecycle-hooks/e2e-spec.ts
View File

@ -74,15 +74,15 @@ describe('Lifecycle hooks', function () {
expect(titleEle.getText()).toContain('Windstorm-foo- can sing');
return changeLogEles.count();
}).then(function (count) {
// two more for each keystroke except the 1st
expect(count).toEqual(logCount + 9, 'should add 9 more messages');
// one more for each keystroke
expect(count).toEqual(logCount + 5, 'should add 5 more messages');
logCount = count;
// return powerInputEle.sendKeys('-bar-');
return sendKeys(powerInputEle, '-bar-');
}).then(function () {
expect(titleEle.getText()).toContain('Windstorm-foo- can sing-bar-');
// 7 == 2 previously + length of '-bar-'
expect(changeLogEles.count()).toEqual(logCount + 15, 'should add 15 more messages');
expect(changeLogEles.count()).toEqual(logCount + 11, 'should add 11 more messages');
});
});
@ -106,7 +106,7 @@ describe('Lifecycle hooks', function () {
expect(commentEle.getText()).toContain('long name');
return logEles.count();
}).then(function(count) {
expect(logCount + 10).toEqual(count, '10 additional log messages should have been added');
expect(logCount + 6).toEqual(count, '6 additional log messages should have been added');
logCount = count;
return buttonEle.click();
}).then(function() {
@ -135,7 +135,7 @@ describe('Lifecycle hooks', function () {
expect(commentEle.getText()).toContain('long name');
return logEles.count();
}).then(function(count) {
expect(logCount + 10).toEqual(count, '10 additional log messages should have been added');
expect(logCount + 5).toEqual(count, '5 additional log messages should have been added');
logCount = count;
return buttonEle.click();
}).then(function() {

26
public/docs/_examples/package.json
View File

@ -25,22 +25,22 @@
"author": "",
"license": "ISC",
"dependencies": {
"@angular/common": "2.0.0-rc.1",
"@angular/compiler": "2.0.0-rc.1",
"@angular/core": "2.0.0-rc.1",
"@angular/http": "2.0.0-rc.1",
"@angular/platform-browser": "2.0.0-rc.1",
"@angular/platform-browser-dynamic": "2.0.0-rc.1",
"@angular/router": "2.0.0-rc.1",
"@angular/router-deprecated": "2.0.0-rc.1",
"@angular/upgrade": "2.0.0-rc.1",
"systemjs": "0.19.27",
"@angular/common": "2.0.0-rc.2",
"@angular/compiler": "2.0.0-rc.2",
"@angular/core": "2.0.0-rc.2",
"@angular/http": "2.0.0-rc.2",
"@angular/platform-browser": "2.0.0-rc.2",
"@angular/platform-browser-dynamic": "2.0.0-rc.2",
"@angular/router": "2.0.0-rc.2",
"@angular/router-deprecated": "2.0.0-rc.2",
"@angular/upgrade": "2.0.0-rc.2",
"angular2-in-memory-web-api": "0.0.11",
"bootstrap": "^3.3.6",
"core-js": "^2.4.0",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"zone.js": "^0.6.12",
"angular2-in-memory-web-api": "0.0.11",
"bootstrap": "^3.3.6"
"systemjs": "0.19.27",
"zone.js": "^0.6.12"
},
"devDependencies": {
"angular-cli": "^1.0.0-beta.5",

10
public/docs/_examples/quickstart/js/index.html
View File

@ -17,11 +17,11 @@
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/rxjs/bundles/Rx.umd.js"></script>
<script src="node_modules/@angular/core/core.umd.js"></script>
<script src="node_modules/@angular/common/common.umd.js"></script>
<script src="node_modules/@angular/compiler/compiler.umd.js"></script>
<script src="node_modules/@angular/platform-browser/platform-browser.umd.js"></script>
<script src="node_modules/@angular/platform-browser-dynamic/platform-browser-dynamic.umd.js"></script>
<script src="node_modules/@angular/core/bundles/core.umd.js"></script>
<script src="node_modules/@angular/common/bundles/common.umd.js"></script>
<script src="node_modules/@angular/compiler/bundles/compiler.umd.js"></script>
<script src="node_modules/@angular/platform-browser/bundles/platform-browser.umd.js"></script>
<script src="node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js"></script>
<!-- #enddocregion libraries -->
<!-- 2. Load our 'modules' -->

18
public/docs/_examples/quickstart/js/package.1.json
View File

@ -7,15 +7,15 @@
},
"license": "ISC",
"dependencies": {
"@angular/common": "2.0.0-rc.1",
"@angular/compiler": "2.0.0-rc.1",
"@angular/core": "2.0.0-rc.1",
"@angular/http": "2.0.0-rc.1",
"@angular/platform-browser": "2.0.0-rc.1",
"@angular/platform-browser-dynamic": "2.0.0-rc.1",
"@angular/router": "2.0.0-rc.1",
"@angular/router-deprecated": "2.0.0-rc.1",
"@angular/upgrade": "2.0.0-rc.1",
"@angular/common": "2.0.0-rc.2",
"@angular/compiler": "2.0.0-rc.2",
"@angular/core": "2.0.0-rc.2",
"@angular/http": "2.0.0-rc.2",
"@angular/platform-browser": "2.0.0-rc.2",
"@angular/platform-browser-dynamic": "2.0.0-rc.2",
"@angular/router": "2.0.0-rc.2",
"@angular/router-deprecated": "2.0.0-rc.2",
"@angular/upgrade": "2.0.0-rc.2",
"core-js": "^2.4.0",
"reflect-metadata": "0.1.3",

18
public/docs/_examples/quickstart/ts/package.1.json
View File

@ -11,15 +11,15 @@
},
"license": "ISC",
"dependencies": {
"@angular/common": "2.0.0-rc.1",
"@angular/compiler": "2.0.0-rc.1",
"@angular/core": "2.0.0-rc.1",
"@angular/http": "2.0.0-rc.1",
"@angular/platform-browser": "2.0.0-rc.1",
"@angular/platform-browser-dynamic": "2.0.0-rc.1",
"@angular/router": "2.0.0-rc.1",
"@angular/router-deprecated": "2.0.0-rc.1",
"@angular/upgrade": "2.0.0-rc.1",
"@angular/common": "2.0.0-rc.2",
"@angular/compiler": "2.0.0-rc.2",
"@angular/core": "2.0.0-rc.2",
"@angular/http": "2.0.0-rc.2",
"@angular/platform-browser": "2.0.0-rc.2",
"@angular/platform-browser-dynamic": "2.0.0-rc.2",
"@angular/router": "2.0.0-rc.2",
"@angular/router-deprecated": "2.0.0-rc.2",
"@angular/upgrade": "2.0.0-rc.2",
"systemjs": "0.19.27",
"core-js": "^2.4.0",

10
public/docs/_examples/styleguide/js/index.html
View File

@ -11,11 +11,11 @@
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/rxjs/bundles/Rx.umd.js"></script>
<script src="node_modules/@angular/core/core.umd.js"></script>
<script src="node_modules/@angular/common/common.umd.js"></script>
<script src="node_modules/@angular/compiler/compiler.umd.js"></script>
<script src="node_modules/@angular/platform-browser/platform-browser.umd.js"></script>
<script src="node_modules/@angular/platform-browser-dynamic/platform-browser-dynamic.umd.js"></script>
<script src="node_modules/@angular/core/bundles/core.umd.js"></script>
<script src="node_modules/@angular/common/bundles/common.umd.js"></script>
<script src="node_modules/@angular/compiler/bundles/compiler.umd.js"></script>
<script src="node_modules/@angular/platform-browser/bundles/platform-browser.umd.js"></script>
<script src="node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js"></script>
<script src='app.js'></script>
</head>

2
public/docs/_examples/systemjs.config.js
View File

@ -39,7 +39,7 @@
// Bundled (~40 requests):
function packUmd(pkgName) {
packages['@angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' };
packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
}
// Most environments should use UMD; some (Karma) need the individual index files

4
public/docs/_examples/systemjs.config.plunker.js
View File

@ -5,7 +5,7 @@
*/
(function(global) {
var ngVer = '@2.0.0-rc.1'; // lock in the angular package version; do not let it float to current!
var ngVer = '@2.0.0-rc.2'; // lock in the angular package version; do not let it float to current!
//map tells the System loader where to look for things
var map = {
@ -47,7 +47,7 @@
ngPackageNames.forEach(function(pkgName) {
// Bundled (~40 requests):
packages['@angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' };
packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
// Individual files (~300 requests):
//packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };

2
public/docs/_examples/template-syntax/ts/app/app.component.html
View File

@ -585,7 +585,7 @@ bindon-ngModel
</div>
<p>with trackBy and <i>space</i> separator</p>
<div #withTrackBy class="box">
<div class="box">
<div *ngFor="let hero of heroes trackBy:trackByHeroes">({{hero.id}}) {{hero.fullName}}</div>
</div>

18
public/docs/_examples/toh-3/dart/lib/app_component.dart
View File

@ -10,7 +10,7 @@ import 'hero_detail_component.dart';
@Component(
selector: 'my-app',
// #docregion hero-detail-template
// #docregion hero-detail-template
template: '''
<h1>{{title}}</h1>
<h2>My Heroes</h2>
@ -23,8 +23,9 @@ import 'hero_detail_component.dart';
</ul>
<my-hero-detail [hero]="selectedHero"></my-hero-detail>
''',
// #enddocregion hero-detail-template
styles: const ['''
// #enddocregion hero-detail-template
styles: const [
'''
.selected {
background-color: #CFD8DC !important;
color: white;
@ -73,17 +74,16 @@ import 'hero_detail_component.dart';
}
'''
],
// #docregion directives
directives: const [
HeroDetailComponent
])
// #enddocregion directives
// #docregion directives
directives: const [HeroDetailComponent]
// #enddocregion directives
)
class AppComponent {
final String title = 'Tour of Heroes';
final List<Hero> heroes = mockHeroes;
Hero selectedHero;
onSelect(Hero hero) {
void onSelect(Hero hero) {
selectedHero = hero;
}
}

1
public/docs/_examples/toh-3/dart/lib/hero.dart
View File

@ -5,4 +5,3 @@ class Hero {
Hero(this.id, this.name);
}
// #enddocregion

33
public/docs/_examples/toh-3/dart/lib/hero_detail_component.dart
View File

@ -11,29 +11,26 @@ import 'hero.dart';
// #docregion v1
@Component(
selector: 'my-hero-detail',
// #enddocregion v1
// #enddocregion v1
// #docregion template
template: '''
<div *ngIf="hero != null">
<h2>{{hero.name}} details!</h2>
<div><label>id: </label>{{hero.id}}</div>
<div>
<label>name: </label>
<input [(ngModel)]="hero.name" placeholder="name">
</div>
</div>
'''
<div *ngIf="hero != null">
<h2>{{hero.name}} details!</h2>
<div><label>id: </label>{{hero.id}}</div>
<div>
<label>name: </label>
<input [(ngModel)]="hero.name" placeholder="name">
</div>
</div>'''
// #enddocregion template
// #docregion v1
// #docregion v1
)
class HeroDetailComponent {
// #enddocregion v1
// #docregion inputs
// #enddocregion v1
// #docregion inputs
@Input()
// #docregion hero
// #docregion hero
Hero hero;
// #enddocregion hero
// #enddocregion inputs
// #docregion v1
// #enddocregion hero, inputs
// #docregion v1
}
// #enddocregion v1

4
public/docs/_examples/upgrade-phonecat-2-hybrid/ts/systemjs.config.1.js
View File

@ -40,8 +40,8 @@
// Bundled (~40 requests):
function packUmd(pkgName) {
packages['@angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' };
};
packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
}
var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;

4
public/docs/_examples/upgrade-phonecat-3-final/ts/systemjs.config.1.js
View File

@ -40,8 +40,8 @@
// Bundled (~40 requests):
function packUmd(pkgName) {
packages['@angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' };
};
packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
}
var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;

14
public/docs/dart/latest/glossary.jade
View File

@ -12,7 +12,19 @@ include _util-fns
!=partial('../../ts/latest/_fragments/glossary-f-l')
!=partial('../../ts/latest/_fragments/glossary-m1')
//!=partial('../../ts/latest/_fragments/glossary-m2') not needed in dart
!=partial('../../ts/latest/_fragments/glossary-n-s')
!=partial('../../ts/latest/_fragments/glossary-n-s-1')
:marked
## snake_case
.l-sub-section
:marked
The practice of writing compound words or phrases such that each word is separated by an underscore (`_`).
Library and file names are often spelled in snake_case. Examples include: `angular2_tour_of_heroes` and `app_component.dart`.
This form is also known as **underscore case**.
!=partial('../../ts/latest/_fragments/glossary-n-s-2')
!=partial('../../ts/latest/_fragments/glossary-t1')
//!=partial('../../ts/latest/_fragments/glossary-t2') notneeded in dart
!=partial('../../ts/latest/_fragments/glossary-u-z')

3
public/docs/dart/latest/tutorial/toh-pt1.jade
View File

@ -26,10 +26,9 @@ include ../_util-fns
.children
.file index.html
.file main.dart
.file styles.css
.file pubspec.yaml
// Add .file styles.css
.p &nbsp;
.callout.is-helpful

1
public/docs/dart/latest/tutorial/toh-pt2.jade
View File

@ -29,6 +29,7 @@ p Run the #[+liveExampleLink2('', 'toh-2')] for this part.
.children
.file index.html
.file main.dart
.file styles.css
.file pubspec.yaml
:marked
### Keep the app compiling and running

23
public/docs/dart/latest/tutorial/toh-pt3.jade
View File

@ -21,12 +21,13 @@ p Run the #[+liveExampleLink2('', 'toh-3')] for this part.
.children
.file index.html
.file main.dart
.file styles.css
.file pubspec.yaml
:marked
### Keep the app compiling and running
We want to start the Dart compiler, have it watch for changes, and start our server. We'll do this by typing
code-example(format="." language="bash").
code-example(language="bash").
pub serve
:marked
@ -50,7 +51,7 @@ code-example(format="." language="bash").
### Separating the Hero Detail Component
Add a new file named `hero_detail_component.dart` to the `lib` folder and create `HeroDetailComponent` as follows.
+makeExample('toh-3/dart/lib/hero_detail_component.dart', 'v1', 'hero_detail_component.dart (initial version)')(format=".")
+makeExample('toh-3/dart/lib/hero_detail_component.dart', 'v1', 'lib/hero_detail_component.dart (initial version)')(format=".")
.l-sub-section
:marked
### Naming conventions
@ -61,7 +62,8 @@ code-example(format="." language="bash").
All of our component names end in "Component". All of our component file names end in "_component".
We spell our filenames in lower underscore case (AKA "snake_case") so we don't worry about
We spell our filenames in lower **underscore case**
(AKA **[snake_case](../guide/glossary.html#!#snake_case)**) so we don't worry about
case sensitivity on the server or in source control.
<!-- TODO
@ -89,26 +91,26 @@ code-example(format="." language="bash").
So we replace `selectedHero` with `hero` everywhere in our new template. That's our only change.
The result looks like this:
+makeExample('toh-3/dart/lib/hero_detail_component.dart', 'template', 'hero_detail_component.dart (template)')(format=".")
+makeExample('toh-3/dart/lib/hero_detail_component.dart', 'template', 'lib/hero_detail_component.dart (template)')(format=".")
:marked
Now our hero detail layout exists only in the `HeroDetailComponent`.
#### Add the *hero* property
Let’s add that `hero` property we were talking about to the component class.
+makeExample('toh-3/dart/lib/hero_detail_component.dart', 'hero')(format=".")
+makeExample('toh-3/dart/lib/hero_detail_component.dart', 'hero')
:marked
Uh oh. We declared the `hero` property as type `Hero` but our `Hero` class is over in the `app_component.dart` file.
We have two components, each in their own file, that need to reference the `Hero` class.
We solve the problem by relocating the `Hero` class from `app_component.dart` to its own `hero.dart` file.
+makeExample('toh-3/dart/lib/hero.dart', null, 'hero.dart (Exported Hero class)')(format=".")
+makeExample('toh-3/dart/lib/hero.dart', '', 'lib/hero.dart')(format=".")
:marked
Add the following import statement near the top of both `app_component.dart` and `hero_detail_component.dart`.
Add the following import statement near the top of **both `app_component.dart` and `hero_detail_component.dart`**.
+makeExample('toh-3/dart/lib/hero_detail_component.dart', 'hero-import', 'hero_detail_component.dart and app_component.dart (Import the Hero class)')(format=".")
+makeExample('toh-3/dart/lib/hero_detail_component.dart', 'hero-import')
:marked
#### The *hero* property is an ***input***
@ -167,7 +169,7 @@ code-example(format=".")
:marked
The `AppComponent`’s template should now look like this
+makeExample('toh-3/dart/lib/app_component.dart', 'hero-detail-template', 'app_component.dart (Template)')(format=".")
+makeExample('toh-3/dart/lib/app_component.dart', 'hero-detail-template', 'app_component.dart (template)')(format=".")
:marked
Thanks to the binding, the `HeroDetailComponent` should receive the hero from the `AppComponent` and display that hero's detail beneath the list.
The detail should update every time the user picks a new hero.
@ -213,6 +215,7 @@ code-example(format=".")
.children
.file index.html
.file main.dart
.file styles.css
.file pubspec.yaml
:marked
Here are the code files we discussed in this chapter.
@ -237,6 +240,8 @@ code-example(format=".")
* We learned to bind a parent component to a child component.
* We learned to declare the application directives we need in a `directives` list.
p Run the #[+liveExampleLink2('', 'toh-3')] for this part.
.l-main-section
:marked
## The Road Ahead

2
public/docs/js/latest/_data.json
View File

@ -3,7 +3,7 @@
"icon": "home",
"title": "Angular Docs",
"menuTitle": "Docs Home",
"banner": "Welcome to <b>Angular in JavaScript</b>! The current Angular 2 release is <b>rc.1</b>. Please consult the <a href='https://github.com/angular/angular/blob/master/CHANGELOG.md' target='_blank'> Change Log</a> about recent enhancements, fixes, and breaking changes."
"banner": "Welcome to <b>Angular in JavaScript</b>! The current Angular 2 release is <b>rc.2</b>. Please consult the <a href='https://github.com/angular/angular/blob/master/CHANGELOG.md' target='_blank'> Change Log</a> about recent enhancements, fixes, and breaking changes."
},
"quickstart": {

2
public/docs/ts/latest/_data.json
View File

@ -3,7 +3,7 @@
"icon": "home",
"title": "Angular文档",
"menuTitle": "文档首页",
"banner": "欢迎来到 <b>Angular in TypeScript</b>! 当前的Angular版本是 <b>rc.1</b>。请参考<a href='https://github.com/angular/angular/blob/master/CHANGELOG.md' target='_blank'>变更记录</a>。"
"banner": "欢迎来到 <b>Angular in TypeScript</b>! 当前的Angular版本是 <b>rc.2</b>。请参考<a href='https://github.com/angular/angular/blob/master/CHANGELOG.md' target='_blank'>变更记录</a>，以及最新功能，修复和重大打破性变化。"
},
"cli-quickstart": {

265
public/docs/ts/latest/glossary.jade
View File

@ -32,7 +32,7 @@ include _util-fns
.l-sub-section
:marked
In practice a synonym for [Decoration](#decorator).
[装饰器(Decoration)](#decorator)在实践中的同义词。
// #enddocregion a-1
// #docregion a-2
@ -46,10 +46,10 @@ include _util-fns
as HTML attributes, hence the name.
[指令(Directive)](#directive)分类中的一种。它允许监听或修改其它HTML元素、属性、组件的行为。它们通常用作HTML属性，就像它的名字所暗示的那样。
The `ngClass` directive for adding and removing CSS class names is a good example of
an Attribute Directive.
`ngClass`指令就是典型的属性型指令。它可以添加或移除CSS类名。
// #enddocregion a-2
@ -69,9 +69,9 @@ include _util-fns
封装桶是把一系列模块中的*导出结果*归纳进一个单一的快捷模块的一种方式。
封装桶本身是一个模块文件，它重新导出*选中的*导出，这些导入来自其它文件。
Imagine three modules in a `heroes` folder:
设想在`heroes`目录下有三个模块：
code-example(format='').
// heroes/hero.component.ts
@ -84,7 +84,7 @@ include _util-fns
export class HeroService {}
:marked
Without a barrel, a consumer would need three import statements:
假如没有封装桶，消费者就需要三条import语句：
code-example(format='').
import { HeroComponent } from '../heroes/hero.component.ts';
@ -92,7 +92,7 @@ include _util-fns
import { HeroService } from '../heroes/hero.service.ts';
:marked
We can add a barrel to the `heroes` folder (called `index` by convention) that exports all of these items:
我们可以在`heroes`目录下添加一个封装桶(按规约叫做`index`)，它导出所有这三条：
code-example(format='').
export * from './hero.model.ts'; // re-export all of its exports
@ -100,18 +100,18 @@ include _util-fns
export { HeroComponent } from './hero.component.ts'; // re-export the named thing
:marked
Now a consumer can import what it needs from the barrel.
现在，消费者就就可以从这个封装桶中导入它需要的东西了。
code-example(format='').
import { Hero, HeroService } from '../heroes'; // index is implied
:marked
The Angular [scoped packages](#scoped-package) each have a barrel named `index`.
Angular的每个[范围化包(Scoped Package)](#scoped-package)都有一个叫做`index`的封装桶。
// #enddocregion b-c
:marked
That's why we can write this:
这就是为什么我们可以这样写的原因：
+makeExample('../docs/_fragments/quickstart/ts/app/app.component.ts', 'import')(format=".")
// #docregion b-c
@ -147,7 +147,7 @@ include _util-fns
并可能通过[依赖注入体系(Dependency Injection System)](#dependency-injection)注册服务的[供应商(Provider)](#provider)。
One can bootstrap multiple apps in the same `index.html`, each with its own top level root.
你可以在同一个`index.html`中引导多个应用，每个应用都有它自己的顶级根组件。
<a id="C"></a>
@ -213,7 +213,7 @@ include _util-fns
:marked
The practice of writing compound words or phrases such that each word is separated by a dash or hyphen (-).
使用中线(-)分隔每个单词来书写词汇或短语的方法叫做中线命名法。
使用中线(`-`)分隔每个单词来书写词汇或短语的方法叫做中线命名法。
Directive selectors and the root of filenames are often spelled in dash-case. Examples include: `my-app` and the `hero-list.component.ts`.
@ -232,23 +232,23 @@ include _util-fns
actions (clicks, touches, keystrokes).
应用程序会将数据展示给用户，并对用户的操作(点击、触屏、按键)做出回应。
We could push application data values into HTML, attach
event listeners, pull changed values from the screen, and
update application data values ... all by hand.
我们当然也可以自己处理这些操作：将数据显示到HTML网页，添加事件监听器，从屏幕获取数据变化，然后更新数据等等……
Or we could declare the relationship between an HTML widget
and an application data source ... and let a data binding
framework handle the details.
或者，我们也可以声明HTML小部件和数据源的关系……，让一个数据绑定框架来处理所有细节。
Data Binding is that second approach. Angular has a rich
data binding framework with a variety of data binding
operations and supporting declaration syntax.
这第二种方法就是数据绑定。Angular有一个非常强大的数据绑定框架，具有多种用来进行数据绑定的操作，并能支持特定的语法。
The many forms of binding include:
@ -267,11 +267,11 @@ include _util-fns
* [样式绑定(Style Binding)](/docs/ts/latest/guide/template-syntax.html#style-binding)
* [Two-way data binding with ngModel](/docs/ts/latest/guide/template-syntax.html#ng-model)
* [基于ngModel的双向数据绑定(Two-way data binding with ngModel)](/docs/ts/latest/guide/template-syntax.html#ng-model)
Learn more about data binding in the
[Template Syntax](/docs/ts/latest/guide/template-syntax.html#data-binding) chapter.
要了解关于数据绑定的更多知识，请参见[模板语法](guide/template-syntax.html#data-binding)一章。
要了解关于数据绑定的更多知识，请参见[模板语法](guide/template-syntax.html#data-binding)一章。
// #enddocregion d1
<a id="decorator"></a> <a id="decoration"></a>
@ -281,30 +281,30 @@ include _util-fns
.l-sub-section
:marked
A Decorator is a **function** that adds metadata to a class, its members (properties, methods) and function arguments.
装饰器是一个**函数**，这个函数将元数据添加到类、类成员(属性、方法)和函数上。
Decorators are a JavaScript language [feature](https://github.com/wycats/javascript-decorators), implemented in TypeScript and proposed for ES2016 (AKA ES7).
装饰器是一个JavaScript的语言[特性](https://github.com/wycats/javascript-decorators)，装饰器在TypeScript里面已经采纳并实现了，并被推荐到了ES2016(也就是ES7)。
We apply a decorator by positioning it
immediately above or to the left of the thing it decorates.
我们应用装饰器的方法是把装饰器放到被装饰对象的上面或左边。
Angular has its own set of decorators to help it interoperate with our application parts.
Here is an example of a `@Component` decorator that identifies a
class as an Angular [Component](#component) and an `@Input` decorator applied to a property
of that component.
Angular使用自己的一套装饰器来实现应用程序各部分之间的相互操作。
下面的例子中使用了`@Component`装饰器来将一个类标记为一个Angular[组件(Component)](#component)，并用`@Input`装饰器来装饰该组件的一个属性。
The elided object argument to the `@Component` decorator would contain the pertinent component metadata.
`@Component`装饰器中被省略的参数对象还可以包含和组件有关的元数据。
```
@Component({...})
export class AppComponent {
@ -312,18 +312,18 @@ include _util-fns
@Input() name:string;
}
```
The scope of a decorator is limited to the language feature
that it decorates. None of the decorations shown here will "leak" to other
classes appearing below it in the file.
一个装饰器的作用范围会被限制在它所装饰的东西上，这是一个语言级特性。在上面这个例子中，就算别的类在同一个文件中紧跟着上面的类也不会有任何装饰器“泄露”到其它类。
.alert.is-important
:marked
Always include the parentheses `()` when applying a decorator.
A decorator is a **function** that must be called when applied.
永远别忘了在装饰器后面加括号`()`。因为装饰器是 **函数** ，在应用它的时候一定要被调用。
// #docregion d2
@ -335,82 +335,82 @@ include _util-fns
Dependency Injection is both a design pattern and a mechanism
for creating and delivering parts of an application to other
parts of an application that request them.
依赖注入既是设计模式，同时又是一种机制：当应用程序的一些部件需要另一些部件的时候，使用依赖注入机制来创建被请求的部件并将其注入到发出请求的部件中。
Angular developers prefer to build applications by defining many simple parts
that each do one thing well and then wire them together at runtime.
Angular开发者构建应用程序时的首选方法是：定义许多精简的小部件，每个小部件只做一件事并做好它，然后在运行期把这些精简小部件装配在一起组成应用程序。
These parts often rely on other parts. An Angular [Component](#component)
part might rely on a service part to get data or perform a calculation. When a
part "A" relies on another part "B", we say that "A" depends on "B" and
that "B" is a dependency of "A".
这些小部件通常会依赖其它小部件。一个Angular[组件(Component)](#component)可能依赖一个“服务”部件来获取数据或处理运算。当部件A要靠另一个部件B才能工作，我们就说A“依赖于”B，B是A的“依赖”。
We can ask a "Dependency Injection System" to create "A"
for us and handle all the dependencies.
If "A" needs "B" and "B" needs "C", the system resolves that chain of dependencies
and returns a fully prepared instance of "A".
我们可以要求“依赖注入系统”为我们创建一个部件A并处理所有A的“依赖”。如果A需要B，B需要C，这个系统便解析这个依赖链，给我们返回一个完全准备好的A实例。
Angular provides and relies upon its own sophisticated
[Dependency Injection](dependency-injection.html) system
to assemble and run applications by "injecting" application parts
into other application parts where and when needed.
Angular提供并使用自己精心设计的[依赖注入(Dependency Injection)](dependency-injection.html)系统来组装和运行应用程序：在要用时，将一些部件“注入”到另一些部件里面。
At the core is an [`Injector`](#injector) that returns dependency values on request.
The expression `injector.get(token)` returns the value associated with the given token.
依赖注入的核心是一个[注入器(Injector)](#injector)，这个注入器根据需要返回被依赖部件。`injector.get(token)`方法返回与该token(令牌)参数相关的依赖部件。
A token is an Angular type (`OpaqueToken`). We rarely deal with tokens directly; most
methods accept a class name (`Foo`) or a string ("foo") and Angular converts it
to a token. When we write `injector.get(Foo)`, the injector returns
the value associated with the token for the `Foo` class, typically an instance of `Foo` itself.
令牌是一个Angular中的类型(`OpaqueToken`)。我们很少需要直接接触令牌。绝大多数类方法都接受类名(`Foo`)或字符串("foo")，Angular会把这些类名称和字符串转换成令牌。
当我们调用`injector.get(Foo)`时，注入器返回用`Foo`类生成的令牌所对应的依赖值，该依赖值通常是`Foo`类的实例。
Angular makes similar requests internally during many of its operations
as when it creates a [`Component`](#AppComponent) for display.
Angular在创建[组件(Component)](#AppComponent)以供显示的过程中，会在内部执行很多类似的依赖注入请求。
The `Injector` maintains an internal map of tokens to dependency values.
If the `Injector` can't find a value for a given token, it creates
a new value using a `Provider` for that token.
注入器(`Injector`)维护一个令牌与相应依赖值的对照表(map)。如果注入器不能找到一个令牌对应的依赖值，它就会使用供应商(`Provider`)来创建一个依赖值。
A [Provider](#provider) is a recipe for
creating new instances of a dependency value associated with a particular token.
[供应商(Provider)](#provider)是创建依赖实例的“菜谱”之一，这个实例会与一个特定的令牌关联起来。
An injector can only create a value for a given token if it has
a `Provider` for that token in its internal provider registry.
Registering providers is a critical preparatory step.
只有当注入器内部的供应商注册表中存在与令牌对应的供应商时，注入器才能为这个令牌创建一个依赖值。所以注册供应商是一个非常关键的准备步骤。
Angular registers some of its own providers with every injector.
We can register our own providers. Quite often the best time to register a `Provider`
is when we [bootstrap](#bootstrap) the application.
There are other opportunities to register as well.
Angular会为每个注册器注册很多Angular内建供应商。我们也可以注册自己的供应商。通常注册供应商的最佳时间是在应用程序开始[引导(Bootstrap)](#bootstrap)的时候。
当然，我们也有其它很多机会注册供应商。
Learn more in the [Dependency Injection](/docs/ts/latest/guide/dependency-injection.html) chapter.
要了解关于依赖注入的更多知识，请参见[依赖注入(Dependency Injection)](guide/dependency-injection.html)一章。
:marked
## Directive
## 指令(Directive)
@ -426,7 +426,7 @@ include _util-fns
When Angular finds a directive in an HTML template,
it creates the matching directive class instance
and gives that instance control over that portion of the browser DOM.
指令几乎都是关联到HTML元素或属性(Attribute)的。我们通常把这些关联到的HTML元素或者属性(Attribute)当做指令本身。
当Angular在HTML模板中遇到一个指令的时候，它就会找出一个与该指令相匹配的类，创建此类的实例，然后把浏览器中这部分DOM的控制权交给它。
@ -434,18 +434,18 @@ include _util-fns
associate with their custom directives. They add this custom markup to HTML templates
as if they were writing native HTML. In this way, directives become extensions of
HTML itself.
开发人员可以为自定义指令指定自定义的HTML标签(比如`<my-directive>`)，然后，他们就可以像写原生HTML一样把这些自定义标签放到HTML模板里了。
这样，指令就变成了HTML本身的拓展。
Directives fall into one of three categories:
指令包括了一下三个类别：
1. [Components](#component) that combine application logic with an HTML template to
render application [views]. Components are usually represented as HTML elements.
They are the building blocks of an Angular application and the
developer can expect to write a lot of them.
developer can expect to write a lot of them.
1. [组件(Component)](#component): 用来把程序逻辑和HTML模板组合起来，渲染出应用程序的视图。组件一般表示成HTML元素的形式，它们是构建Angular应用程序的基本单元。可以预见，开发人员将会写很多很多组件。
1. [Attribute Directives](#attribute-directive) that can listen to and modify the behavior of
@ -465,39 +465,39 @@ include _util-fns
// #docregion e2
.l-main-section
:marked
## ECMAScript
## ECMAScript
.l-sub-section
:marked
The [official JavaScript language specification](https://en.wikipedia.org/wiki/ECMAScript).
[官方JavaScript语言规范](https://en.wikipedia.org/wiki/ECMAScript)
The latest approved version of JavaScript is
[ECMAScript 2015](http://www.ecma-international.org/ecma-262/6.0/)
(AKA "ES2015" or "ES6") and many Angular 2 developers will write their applications
either in this version of the language or a dialect that strives to be
compatible with it such as [TypeScript](#typesScript).
最新的被认可的JavaScript版本是[ECMAScript 2015](http://www.ecma-international.org/ecma-262/6.0/)，(也叫“ES2015”或“ES6”)。Angular 2的开发者要么使用这个版本的JavaScript，要么使用与这个版本兼容的语言，比如[TypeScript](#typesScript)。
Most modern browsers today only support the prior "ECMAScript 5" (AKA ES5) standard.
Applications written in ES2015 or one of its dialects must be "[transpiled](#transpile)"
to ES5 JavaScript.
目前，几乎所有现代游览器都只支持上一个版本的“ECMAScript 5” (也就是ES5)标准。使用ES2015或者其它兼容语言开发的应用程序，都必须被“[转译(Transpile)](#transpile)”成ES5 JavaScript。
Angular 2 developers may choose to write in ES5 directly.
Angular 2的开发者也可以选择直接使用ES5编程。
:marked
## ECMAScript 2015
## ECMAScript 2015
.l-sub-section
:marked
The latest released version of JavaScript,
[ECMAScript 2015](http://www.ecma-international.org/ecma-262/6.0/)
(AKA "ES2015" or "ES6")
最新发布的JavaScript版本，[ECMAScript 2015](http://www.ecma-international.org/ecma-262/6.0/)
(即 "ES2015" 或 "ES6")。
:marked
@ -505,14 +505,14 @@ include _util-fns
.l-sub-section
:marked
Short hand for "[ECMAScript 2015](#ecmascript=2015)".
“[ECMAScript 2015](#ecmascript=2015)”的简写。
:marked
## ES6
.l-sub-section
:marked
Short hand for "[ECMAScript 2015](#ecmascript=2015)".
[ECMAScript 2015](#ecmascript=2015)的简写。
:marked
## ES5
@ -520,7 +520,7 @@ include _util-fns
:marked
Short hand for "ECMAScript 5", the version of JavaScript run by most modern browsers.
See [ECMAScript](#ecmascript).
“ECMAScript 5”的简写，大部分现代浏览器使用的JavaScript版本。参见[ECMAScript](#ecmascript)。
// #enddocregion e2
@ -549,11 +549,11 @@ include _util-fns
[Property Binding](/docs/ts/latest/guide/template-syntax.html#property-binding).
Data values flow *into* this property from the data source identified
in the template expression to the right of the equal sign.
指令属性可以作为[属性绑定](/docs/ts/latest/guide/template-syntax.html#property-binding)的目标。数据值会从模板表达式等号右侧的数据源中，流入这个属性。
See the [Template Syntax](/docs/ts/latest/guide/template-syntax.html#inputs-outputs) chapter.
参见[模板语法](/docs/ts/latest/guide/template-syntax.html#inputs-outputs)一章。
:marked
@ -566,7 +566,7 @@ include _util-fns
renders as text. That text may be concatenated with neighboring text
before it is assigned to an element property
or displayed between element tags as in this example.
[属性数据绑定(Property Data Binding)](#data-binding) 的形式之一：位于双大括号中的[模板表达式(Template Expression)](#template-expression)会被渲染成文本。在被赋值给元素属性或者显示在元素标签中之前，这些文本可能会先与周边的文本合并，参见下面的例子。
code-example(language="html" escape="html").
@ -575,7 +575,7 @@ include _util-fns
:marked
Learn more about interpolation in the
[Template Syntax](/docs/ts/latest/guide/template-syntax.html#interpolation) chapter.
要学习关于插值表达式的更多知识，参见[模板语法](/docs/ts/latest/guide/template-syntax.html#interpolation)一章。
<a id="J"></a>
@ -587,16 +587,16 @@ include _util-fns
## 烤串命名法(kebab-case)
.l-sub-section
:marked
The practice of writing compound words or phrases such that each word is separated by a dash or hyphen (-).
使用中线(-)分隔每个单词来书写复合词或短语的命名方法。
The practice of writing compound words or phrases such that each word is separated by a dash or hyphen (`-`).
使用中线(`-`)分隔每个单词来书写复合词或短语的命名方法。
Directive selectors and the root of filenames are often spelled in kebab-case. Examples include: `my-app` and the `hero-list.component.ts`.
Directive selectors and the root of filenames are often spelled in kebab-case. Examples include: `my-app` and `hero-list.component.ts`.
指令选择器和文件名等一般都用烤串命名法。比如`my-app`和`hero-list.component.ts`。
This form is also known as [dash-case](#dash-case).
这种形式也叫[中线命名法(dash-case)](#dash-case)。
<a id="L"></a>
@ -608,23 +608,23 @@ include _util-fns
:marked
[Directives](#directive) and [Components](#component) have a lifecycle
managed by Angular as it creates, updates and destroys them.
[指令(Directive)](#directive)和[组件(Component)](#component)具有生命周期，它们由Angular在创建、更新和销毁它们的过程中进行管理。
Developers can tap into key moments in that lifecycle by implementing
one or more of the "Lifecycle Hook" interfaces.
开发者可以通过实现一个或多个“生命周期钩子”接口，切入到生命周期中的关键时间点。
Each interface has a single hook method whose name is the interface name prefixed with `ng`.
For example, the `OnInit` interface has a hook method names `ngOnInit`.
每个接口只有一个钩子方法，方法名一般是接口的名字加前缀 `ng`。比如，`OnInit`接口的钩子类的方法名为 `ngOnInit`。
Angular calls these hook methods in the following order:
Angular会按照下面的顺序调用钩子类方法：
* `ngOnChanges` - called when an [input](#input)/[output](#output) binding values change
* `ngOnChanges` - 在[输入属性(Input)](#input)/[输出属性(Output)](#output)的绑定值发生变化的时候调用。
* `ngOnInit` - after the first `ngOnChanges`
@ -643,8 +643,8 @@ include _util-fns
* `ngOnDestroy` - 在指令销毁前调用。
Learn more in the [Lifecycle Hooks](/docs/ts/latest/guide/lifecycle-hooks.html) chapter.
要了解更多，参见[生命周期钩子(Lifecycle Hook)](/docs/ts/latest/guide/lifecycle-hooks.html)一章。
要了解更多，参见[生命周期钩子(Lifecycle Hook)](/docs/ts/latest/guide/lifecycle-hooks.html)一章。
// #enddocregion f-l
// #docregion m1
@ -658,28 +658,28 @@ include _util-fns
.l-sub-section
:marked
Angular apps are modular.
Angular应用程序是模块化的。
In general, we assemble our application from many modules, both the ones we write ourselves
and the ones we acquire from others.
一般来说，我们用模块来组装我们的应用程序，这些模块包含我们自己编写的模块和从其它地方获取的模块。
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 that needs that thing, **imports** it.
模块代码中通常会**导出(export)**一些东西，最典型的就是类。
模块如果需要什么东西，那就**导入(import)**它。
The structure of Angular modules and the import/export syntax
is based on the [ES2015](#es2015) module standard
described [here](http://www.2ality.com/2014/09/es6-modules-final.html).
Angular的模块结构和输出/导入语法是基于[ES2015](#es2015)模块化标准的，参见[这里](http://www.2ality.com/2014/09/es6-modules-final.html)。
An application that adheres to this standard requires a module loader to
@ -687,7 +687,7 @@ include _util-fns
Angular does not ship with a module loader and does not have a preference
for any particular 3rd party library (although most samples use SystemJS).
Application developers may pick any module library that conforms to the standard
采用这个标准的应用程序需要一个模块加载器来按需加载模块并解析模块的依赖关系。Angular不包含任何模块加载器，也不偏爱哪一个第三方库(虽然几乎所有例子都使用SystemJS)。
应用程序开发者可以自行选择任何与这个标准兼容的模块化库。
@ -696,7 +696,7 @@ include _util-fns
class belongs to a feature module named `date_pipe` in the file `date_pipe.ts`.
模块一般与它定义导出物的文件同名。比如, Angular的[日期管道(DatePipe)](https://github.com/angular/angular/blob/master/modules/angular2/src/common/pipes/date_pipe.ts)类属于名叫`date_pipe`的特性模块，位于文件`date_pipe.ts`中。
Developers rarely access Angular feature modules directly.
We usually import them from one of the Angular [scoped packages](#scoped-package) such as `@angular/core`.
@ -705,7 +705,7 @@ include _util-fns
// #enddocregion m2
// #docregion n-s
// #docregion n-s-1
- var lang = current.path[1]
- var decorator = lang === 'dart' ? 'annotation' : '<a href="#decorator">decorator</a>'
- var decoratorCn = lang === 'dart' ? '注解' : '<a href="#decorator">装饰器</a>'
@ -722,12 +722,12 @@ include _util-fns
[Event Binding](/docs/ts/latest/guide/template-syntax.html#property-binding).
Events stream *out* of this property to the receiver identified
in the template expression to the right of the equal sign.
输出属性是指令的一种属性，它可作为[事件绑定](/docs/ts/latest/guide/template-syntax.html#property-binding)的 **目标** 。
事件流可以通过这个属性，流出到接收者(模板表达式等号的右边就是接收者)。
See the [Template Syntax](/docs/ts/latest/guide/template-syntax.html#inputs-outputs) chapter.
参见[模板语法](/docs/ts/latest/guide/template-syntax.html#inputs-outputs)一章。
.l-main-section
@ -741,10 +741,10 @@ include _util-fns
Class names are typically spelled in PascalCase. Examples include: `Person` and `Customer`.
遵循“每个单词都用大写开头”的规则的书写复合词或短语的命名方法叫做Pascal命名法。类名一般都采用Pascal命名法。比如`Person`和`Customer`
This form is also known as **upper camel case**, to distinguish it from **lower camel case** which we simply call [camelCase](#camelcase).
In this documentation, "PascalCase" means *upper camel case* and "camelCase" means *lower camel case*.
这种命名法也叫**大驼峰式命名法**，以区别于 **小驼峰式命名法”或[驼峰式命名法(camelCase)](#camelCase)** 。
在本教程中，“Pascal命名法”都是指的*大驼峰式命名法”，“驼峰式命名法”指的都是“小驼峰式命名法”
@ -757,20 +757,20 @@ include _util-fns
display in a [view](#view). We use the `#{atSym}Pipe` !{decorator}
to associate the pipe function with a name. We then can use that
name in our HTML to declaratively transform values on screen.
Angular的管道是一个函数，用于把输入值转换成输出值以供[视图(View)](#view)显示。我们使用`#{atSym}Pipe`!{decoratorCn}来把管道函数关联到它的名字上。
然后，我们就可以在HTML中用它的名字来声明该如何把输入值转换为显示值了。
Here's an example that uses the built-in `currency` pipe to display
a numeric value in the local currency.
下面这个例子中就用内建的`currency`管道把数字值显示成了本地货币格式。
code-example(language="html" escape="html").
<label>Price: </label>{{product.price | currency}}
:marked
Learn more in the chapter on [pipes](/docs/ts/latest/guide/pipes.html) .
要了解更多，参见[管道](/docs/ts/latest/guide/pipes.html)一章。
:marked
@ -780,19 +780,19 @@ include _util-fns
:marked
A Provider creates a new instance of a dependency for the Dependency Injection system.
It relates a lookup token to code - sometimes called a "recipe" - that can create a dependency value.
依赖注入系统依靠供应商来创建依赖的实例。它把一个供查阅用的令牌和代码(有时也叫“配方”)关联到一起，以便创建依赖值。
For example, `new Provider(Foo, {useClass: Foo})` creates a `Provider`
that relates the `Foo` token to a function that creates a new instance of the `Foo` class.
比如，`new Provider(Foo, {useClass: Foo})`创建一个`Provider`，把令牌`Foo`联系到一个函数，该函数会创建一个`Foo`类的实例。
There are other ways to create tokens and recipes.
See [Dependency Injection](#dependency-injection) chapter to learn more.
还有其它一些方法创建令牌和配方。
参见[依赖注入(Dependency Injection)](#dependency-injection)以获取更多信息。
参见[依赖注入(Dependency Injection)](#dependency-injection)以获取更多信息。
.l-main-section
<a id="Q"></a>
@ -806,15 +806,15 @@ include _util-fns
The user navigates among them by clicking links and buttons
and taking other similar actions that cause the application to
replace one view with another.
大部分应用程序包含多个屏或[视图(View)](#view)。用户通过点击链接、按钮和其它类似动作，在它们之间穿梭，这样应用程序就会从一个视图变换到另一个视图。
The Angular [Component Router](/docs/ts/latest/guide/router.html) is a richly featured mechanism for configuring
and managing the entire view navigation process including the creation and destruction
of views.
Angular的[组件路由器(Component Router)](guide/router.html)是一个特性丰富的机制，它可以配置和管理整个导航过程，包括建立和销毁视图。
:marked
## Routing Component
## 路由组件(Routing Component)
@ -826,19 +826,20 @@ include _util-fns
In most cases, the component became attached to a [router](#router) by means
of a `#{atSym}RouterConfig` #{decorator} that defined routes to views controlled by this component.
在大部分情况下，通过`#{atSym}RouterConfig`装饰器，该组件就会被附加上一个[路由器(Router)](#router)，用以定义该组件控制下的多个视图的路由。
The component's template has a `RouterOutlet` element where it can display views produced by the router.
该组件的模板有一个`路由出口(RouterOutlet)`元素，用于显示由路由器生成的视图。
It likely has anchor tags or buttons with `RouterLink` directives that users can click to navigate.
很可能还会有一些带`RouterLink`指令的a标签或按钮，让用户可以点击它们进行导航。
<a id="S"></a>
.l-main-section
// #enddocregion n-s-1
:marked
## Scoped Package
## 范围化包(Scoped Package)
@ -846,21 +847,21 @@ include _util-fns
:marked
Angular modules are delivered within *scoped packages* such as `@angular/core`, `@angular/common`, `@angular/platform-browser-dynamic`,
`@angular/http`, and `@angular/router`.
Angular模块是用一系列*范围化包*的形式发布的，比如`@angular/core`、`@angular/common`、`@angular/platform-browser-dynamic`、
`@angular/http`和`@angular/router`。
A [*scoped package*](https://docs.npmjs.com/misc/scope) is a way to group related *npm* packages.
[*范围化包(Scoped Package)*](https://docs.npmjs.com/misc/scope)是对相关*npm*包进行分组的一种方式。
We import a scoped package the same way we'd import a *normal* package.
We import a scoped package the same way we'd import a *normal* package.
The only difference, from a consumer perspective,
is that the package name begins with the Angular *scope name*, `@angular`.
我们使用和导入*普通*包相同的方式导入范围化包。
从消费者的视角看，唯一的不同是那些包的名字是用Angular的*范围名*`@angular`开头儿的。
// #enddocregion n-s
+makeExample('../docs/_fragments/architecture/ts/app/app.component.ts', 'import')(format=".")
// #docregion n-s
@ -874,13 +875,13 @@ include _util-fns
elements and their children.
结构型指令是一种可以通过添加、删除或操作元素和其各级子元素来塑造或重塑HTML布局的[指令(Directive)](#directive)，
The `ngIf` "conditional element" directive and the `ngFor` "repeater" directive are
good examples in this category.
`ngIf`"条件化元素"指令和`ngFor`"重复器(repeater)"指令就是结构型指令的优秀代表。
// #enddocregion n-s
// #enddocregion n-s-2
// #docregion t1
<a id="T"></a>
@ -895,9 +896,9 @@ include _util-fns
most notably a [Component](#component).
模板是一大块儿HTML。Angular会在[指令(Directive)](#directive)特别是[组件(Component)](#component)的支持和持续指导下，用它来渲染[视图(View)](#view)。
We write templates in a special [Template Syntax](/docs/ts/latest/guide/template-syntax.html).
我们使用特殊的[模板语法](/docs/ts/latest/guide/template-syntax.html)来编写模板。
:marked
@ -928,29 +929,29 @@ include _util-fns
A version of JavaScript that supports most [ECMAScript 2015](#ecmascript=2015)
language features and many features that may arrive in future versions
of JavaScript such as [Decorators](#decorator).
一种支持了几乎所有[ECMAScript 2015](#ecmascript=2015)语言特性和一些未来版本可能有的特性(比如[装饰器(Decorator)](#decorator))的JavaScript语言。
TypeScript is also noteable for its optional typing system which gives
us compile-time type-checking and strong tooling support (e.g. "intellisense",
code completion, refactoring, and intelligent search). Many code editors
and IDEs support TypeScript either natively or with plugins.
TypeScript还以它的可选类型系统而著称。该类型系统给我们提供了编译期类型检查和强大的工具支持(比如“Intellisense”， 自动代码补齐，重构和智能搜索等)。许多程序编辑器和开发环境都自带了TypeScript支持或通过插件提供支持。
TypeScript is the preferred language for Angular 2 development although
we are welcome to write in other JavaScript dialects such as [ES5](#es5).
TypeScript是Angular 2的首选语言，当然，我们也欢迎你使用其它JavaScript语言，比如[ES5](#es5)。
Angular 2 itself is written in TypeScript.
Angular 2本身是用TypeScript编写的。
Learn more about TypeScript on its [website](http://www.typescriptlang.org/).
到TypeScript[官方网站](http://www.typescriptlang.org/)了解更多知识。
// #enddocregion t2
// #docregion u-z
@ -971,14 +972,14 @@ include _util-fns
especially [Component](#component) directives and their companion [Templates](#template).
The Component plays such a prominent role that we often
find it convenient to refer to a component as a view.
Angular在一个或多个[指令(Directive)](#directive)的控制下渲染视图，尤其是[组件(Component)](#component)型指令及其[模板(Template)](#template)。
组件扮演着非常重要的角色，甚至我们经常会为了方便而直接用“视图”作为组件的代名词。
Views often contain other views and any view might be loaded and unloaded
dynamically as the user navigates through the application, typically
under the control of a [router](#router).
视图一般包含其它视图，在用户在应用程序中导航的时候，任何视图都可能被动态加载或卸载，这一般会在[路由器(Router)](#router)的控制下进行。
.l-main-section
@ -993,7 +994,7 @@ include _util-fns
:marked
Zones are a mechanism for encapsulating and intercepting
a JavaScript application's asynchronous activity.
区域是一种用来封装和截听JavaScript应用程序异步动作的机制。
The browser DOM and JavaScript have a limited number
@ -1001,23 +1002,23 @@ include _util-fns
[promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise), and
[XHR](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest)
calls to remote servers.
浏览器中的DOM和JavaScript之间常会有一些数量有限的异步活动，比如DOM事件(如点击)、[承诺(Promise)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/
Promise)、和通过[XHR](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest)查询远程服务等。
Zones intercept all of these activities and give a "zone client" the opportunity
to take action before and after the async activity completes.
区域能截听所有这些活动，并让“区域的客户”有机会在异步活动完成之前和之后采取行动。
Angular runs our application in a zone where it can respond to
asynchronous events by checking for data changes and updating
the information it displays via [data binding](#data-binding).
Angular会在一个区域中运行我们的应用程序，在这个区域中，它可以对异步事件做出反应，可以通过检查数据变更、利用[数据绑定(Data Binding)](#data-binding)来更新信息显示。
Learn more about zones in this
[Brian Ford video](https://www.youtube.com/watch?v=3IqtmUscE_U).
到[Brian Ford的视频](https://www.youtube.com/watch?v=3IqtmUscE_U)学习更多关于区域的知识。
// #enddocregion u-z