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
commit
b5f0eadfa0
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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' -->
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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' };
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,4 +5,3 @@ class Hero {
|
|||
|
||||
Hero(this.id, this.name);
|
||||
}
|
||||
// #enddocregion
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -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')
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
.callout.is-helpful
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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": {
|
||||
|
|
|
|||
|
|
@ -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": {
|
||||
|
|
|
|||
|
|
@ -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`.
|
||||
|
||||
|
|
@ -587,11 +587,11 @@ 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`。
|
||||
|
||||
|
|
@ -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>'
|
||||
|
|
@ -839,6 +839,7 @@ include _util-fns
|
|||
|
||||
<a id="S"></a>
|
||||
.l-main-section
|
||||
// #enddocregion n-s-1
|
||||
:marked
|
||||
## Scoped Package
|
||||
## 范围化包(Scoped Package)
|
||||
|
|
@ -860,7 +861,7 @@ include _util-fns
|
|||
|
||||
我们使用和导入*普通*包相同的方式导入范围化包。
|
||||
从消费者的视角看，唯一的不同是那些包的名字是用Angular的*范围名*`@angular`开头儿的。
|
||||
// #enddocregion n-s
|
||||
|
||||
+makeExample('../docs/_fragments/architecture/ts/app/app.component.ts', 'import')(format=".")
|
||||
// #docregion n-s
|
||||
|
||||
|
|
@ -880,7 +881,7 @@ include _util-fns
|
|||
|
||||
`ngIf`"条件化元素"指令和`ngFor`"重复器(repeater)"指令就是结构型指令的优秀代表。
|
||||
|
||||
// #enddocregion n-s
|
||||
// #enddocregion n-s-2
|
||||
|
||||
// #docregion t1
|
||||
<a id="T"></a>
|
||||
|
|
|
|||
Loading…
Reference in New Issue