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
commit b5f0eadfa0
23 changed files with 253 additions and 239 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -39,7 +39,7 @@
// Bundled (~40 requests): // Bundled (~40 requests):
function packUmd(pkgName) { 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 // Most environments should use UMD; some (Karma) need the individual index files

View File

@ -5,7 +5,7 @@
*/ */
(function(global) { (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 //map tells the System loader where to look for things
var map = { var map = {
@ -47,7 +47,7 @@
ngPackageNames.forEach(function(pkgName) { ngPackageNames.forEach(function(pkgName) {
// Bundled (~40 requests): // 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): // Individual files (~300 requests):
//packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' }; //packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };

View File

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

View File

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

View File

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

View File

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

View File

@ -40,8 +40,8 @@
// Bundled (~40 requests): // Bundled (~40 requests):
function packUmd(pkgName) { 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; var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;

View File

@ -40,8 +40,8 @@
// Bundled (~40 requests): // Bundled (~40 requests):
function packUmd(pkgName) { 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; var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;

View File

@ -12,7 +12,19 @@ include _util-fns
!=partial('../../ts/latest/_fragments/glossary-f-l') !=partial('../../ts/latest/_fragments/glossary-f-l')
!=partial('../../ts/latest/_fragments/glossary-m1') !=partial('../../ts/latest/_fragments/glossary-m1')
//!=partial('../../ts/latest/_fragments/glossary-m2') not needed in dart //!=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-t1')
//!=partial('../../ts/latest/_fragments/glossary-t2') notneeded in dart //!=partial('../../ts/latest/_fragments/glossary-t2') notneeded in dart
!=partial('../../ts/latest/_fragments/glossary-u-z') !=partial('../../ts/latest/_fragments/glossary-u-z')

View File

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

View File

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

View File

@ -21,12 +21,13 @@ p Run the #[+liveExampleLink2('', 'toh-3')] for this part.
.children .children
.file index.html .file index.html
.file main.dart .file main.dart
.file styles.css
.file pubspec.yaml .file pubspec.yaml
:marked :marked
### Keep the app compiling and running ### 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 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 pub serve
:marked :marked
@ -50,7 +51,7 @@ code-example(format="." language="bash").
### Separating the Hero Detail Component ### Separating the Hero Detail Component
Add a new file named `hero_detail_component.dart` to the `lib` folder and create `HeroDetailComponent` as follows. 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 .l-sub-section
:marked :marked
### Naming conventions ### 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". 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. case sensitivity on the server or in source control.
<!-- TODO <!-- 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. So we replace `selectedHero` with `hero` everywhere in our new template. That's our only change.
The result looks like this: 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 :marked
Now our hero detail layout exists only in the `HeroDetailComponent`. Now our hero detail layout exists only in the `HeroDetailComponent`.
#### Add the *hero* property #### Add the *hero* property
Lets add that `hero` property we were talking about to the component class. Lets 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 :marked
Uh oh. We declared the `hero` property as type `Hero` but our `Hero` class is over in the `app_component.dart` file. 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 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. 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 :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 :marked
#### The *hero* property is an ***input*** #### The *hero* property is an ***input***
@ -167,7 +169,7 @@ code-example(format=".")
:marked :marked
The `AppComponent`s template should now look like this 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 :marked
Thanks to the binding, the `HeroDetailComponent` should receive the hero from the `AppComponent` and display that hero's detail beneath the list. 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. The detail should update every time the user picks a new hero.
@ -213,6 +215,7 @@ code-example(format=".")
.children .children
.file index.html .file index.html
.file main.dart .file main.dart
.file styles.css
.file pubspec.yaml .file pubspec.yaml
:marked :marked
Here are the code files we discussed in this chapter. 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 bind a parent component to a child component.
* We learned to declare the application directives we need in a `directives` list. * 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 .l-main-section
:marked :marked
## The Road Ahead ## The Road Ahead

View File

@ -3,7 +3,7 @@
"icon": "home", "icon": "home",
"title": "Angular Docs", "title": "Angular Docs",
"menuTitle": "Docs Home", "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": { "quickstart": {

View File

@ -3,7 +3,7 @@
"icon": "home", "icon": "home",
"title": "Angular文档", "title": "Angular文档",
"menuTitle": "文档首页", "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": { "cli-quickstart": {

View File

@ -213,7 +213,7 @@ include _util-fns
:marked :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 dash-case. Examples include: `my-app` and the `hero-list.component.ts`. Directive selectors and the root of filenames are often spelled in dash-case. Examples include: `my-app` and the `hero-list.component.ts`.
@ -587,11 +587,11 @@ include _util-fns
## 烤串命名法(kebab-case) ## 烤串命名法(kebab-case)
.l-sub-section .l-sub-section
:marked :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`。 指令选择器和文件名等一般都用烤串命名法。比如`my-app`和`hero-list.component.ts`。
@ -705,7 +705,7 @@ include _util-fns
// #enddocregion m2 // #enddocregion m2
// #docregion n-s // #docregion n-s-1
- var lang = current.path[1] - var lang = current.path[1]
- var decorator = lang === 'dart' ? 'annotation' : '<a href="#decorator">decorator</a>' - var decorator = lang === 'dart' ? 'annotation' : '<a href="#decorator">decorator</a>'
- var decoratorCn = lang === 'dart' ? '注解' : '<a href="#decorator">装饰器</a>' - var decoratorCn = lang === 'dart' ? '注解' : '<a href="#decorator">装饰器</a>'
@ -839,6 +839,7 @@ include _util-fns
<a id="S"></a> <a id="S"></a>
.l-main-section .l-main-section
// #enddocregion n-s-1
:marked :marked
## Scoped Package ## Scoped Package
## 范围化包(Scoped Package) ## 范围化包(Scoped Package)
@ -860,7 +861,7 @@ include _util-fns
我们使用和导入*普通*包相同的方式导入范围化包。 我们使用和导入*普通*包相同的方式导入范围化包。
从消费者的视角看唯一的不同是那些包的名字是用Angular的*范围名*`@angular`开头儿的。 从消费者的视角看唯一的不同是那些包的名字是用Angular的*范围名*`@angular`开头儿的。
// #enddocregion n-s
+makeExample('../docs/_fragments/architecture/ts/app/app.component.ts', 'import')(format=".") +makeExample('../docs/_fragments/architecture/ts/app/app.component.ts', 'import')(format=".")
// #docregion n-s // #docregion n-s
@ -880,7 +881,7 @@ include _util-fns
`ngIf`"条件化元素"指令和`ngFor`"重复器(repeater)"指令就是结构型指令的优秀代表。 `ngIf`"条件化元素"指令和`ngFor`"重复器(repeater)"指令就是结构型指令的优秀代表。
// #enddocregion n-s // #enddocregion n-s-2
// #docregion t1 // #docregion t1
<a id="T"></a> <a id="T"></a>