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

docs(toh-2/dart): copyedits (#1621)

This commit is contained in:
Patrice Chalin 2016-06-08 16:24:56 -07:00 committed by Kathy Walrath
parent 3c77a7fcd1
commit 1cc5284cc2
3 changed files with 31 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
public/docs/_examples/toh-2/dart/lib/app_component.dart
View File

@ -1,4 +1,4 @@
// #docregion pt2
// #docregion
import 'package:angular2/core.dart';
class Hero {
@ -29,7 +29,7 @@ class Hero {
</div>
</div>
''',
// #docregion styles-1
// #docregion styles
styles: const [
'''
.selected {
@ -80,21 +80,21 @@ class Hero {
}
'''
])
// #enddocregion styles-1
// #enddocregion styles
class AppComponent {
final String title = 'Tour of Heroes';
final List<Hero> heroes = mockHeroes;
// #docregion selected-hero-1
// #docregion selected-hero
Hero selectedHero;
// #enddocregion selected-hero-1
// #enddocregion selected-hero
// #docregion on-select-1
// #docregion on-select
onSelect(Hero hero) {
selectedHero = hero;
}
// #enddocregion on-select-1
// #enddocregion on-select
}
// #enddocregion pt2
// #enddocregion
// #docregion hero-array
final List<Hero> mockHeroes = [
@ -109,6 +109,3 @@ final List<Hero> mockHeroes = [
new Hero(19, 'Magma'),
new Hero(20, 'Tornado')
];
// #enddocregion hero-array
// #enddocregion pt2

4
public/docs/_examples/toh-2/dart/web/main.dart
View File

@ -1,9 +1,7 @@
// #docregion pt2
import 'package:angular2/platform/browser.dart';
import 'package:angular2_tour_of_heroes/app_component.dart';
main() {
void main() {
bootstrap(AppComponent);
}
// #enddocregion pt2

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

@ -6,14 +6,12 @@ include ../_util-fns
We’ll expand our Tour of Heroes app to display a list of heroes,
allow the user to select a hero, and display the hero’s details.
p Run the #[+liveExampleLink2('', 'toh-2')] for this part.
:marked
Let’s take stock of what we’ll need to display a list of heroes.
First, we need a list of heroes. We want to display those heroes in the view’s template,
so we’ll need a way to do that.
.callout.is-helpful
header Source code
p Run the #[+liveExampleLink2('', 'toh-2')] for this part.
.l-main-section
:marked
## Where We Left Off
@ -48,7 +46,7 @@ code-example(language="bash").
### Creating heroes
Let’s create a list of ten heroes at the bottom of `app_component.dart`.
+makeExample('toh-2/dart/lib/app_component.dart', 'hero-array', 'app_component.dart (Hero list)')(format=".")
+makeExample('toh-2/dart/lib/app_component.dart', 'hero-array', 'app_component.dart (hero list)')(format=".")
:marked
The `mockHeroes` list is of type `Hero`, the class defined in part one,
@ -59,7 +57,7 @@ code-example(language="bash").
### Exposing heroes
Let’s create a public property in `AppComponent` that exposes the heroes for binding.
+makeExample('toh-2/dart-snippets/app_component_snippets_pt2.dart', 'hero-array-1', 'app_component.dart (Hero list property)')
+makeExample('toh-2/dart-snippets/app_component_snippets_pt2.dart', 'hero-array-1', 'app_component.dart (hero list property)')
.l-sub-section
:marked
@ -72,7 +70,7 @@ code-example(language="bash").
Our component has `heroes`. Let’s create an unordered list in our template to display them.
We’ll insert the following chunk of HTML below the title and above the hero details.
+makeExample('toh-2/dart-snippets/app_component_snippets_pt2.dart', 'heroes-template-1', 'app_component.dart (Heroes template)')(format=".")
+makeExample('toh-2/dart-snippets/app_component_snippets_pt2.dart', 'heroes-template-1', 'app_component.dart (heroes template)')(format=".")
:marked
Now we have a template that we can fill with our heroes.
@ -103,7 +101,7 @@ code-example(language="bash").
“*take each hero in the `heroes` list, store it in the local `hero` variable,
and make it available to the corresponding template instance*”.
The `let` keyword before "hero" identifies the `hero` as a template input variable.
The `let` keyword before "hero" identifies `hero` as a template input variable.
We can reference this variable within the template to access a hero’s properties.
Learn more about `ngFor` and template input variables in the
@ -126,21 +124,20 @@ code-example(language="bash").
Let’s add some styles to our component by setting the `styles` argument of the `@Component` annotation
to the following CSS classes:
+makeExample('toh-2/dart/lib/app_component.dart', 'styles-1', 'app_component.dart (Styling)')(format=".")
+makeExample('toh-2/dart/lib/app_component.dart', 'styles', 'app_component.dart (styles)')(format=".")
:marked
Notice that we again use the triple-quote notation for multi-line strings.
That's a lot of styles! We can put them inline as shown here, or we can move them out to their own file which will make it easier to code our component.
We'll do this in a later chapter. For now let's keep rolling.
When we assign styles to a component they are scoped to that specific component.
Our styles will only apply to our `AppComponent` and won't "leak" to the outer HTML.
Our template for displaying the heroes should now look like this:
+makeExample('toh-2/dart-snippets/app_component_snippets_pt2.dart', 'heroes-styled', 'app_component.dart (Styled heroes)')
:marked
That's a lot of styles! We can put them inline as shown here, or we can move them out to their own file which will make it easier to code our component.
We'll do this in a later chapter. For now let's keep rolling.
+makeExample('toh-2/dart-snippets/app_component_snippets_pt2.dart', 'heroes-styled', 'app_component.dart (styled heroes)')
.l-main-section
:marked
@ -156,7 +153,7 @@ code-example(language="bash").
### Click event
We modify the `<li>` by inserting an Angular event binding to its click event.
+makeExample('toh-2/dart-snippets/app_component_snippets_pt2.dart', 'selectedHero-click', 'app_component.dart (Capturing the click event)')(format=".")
+makeExample('toh-2/dart-snippets/app_component_snippets_pt2.dart', 'selectedHero-click', 'app_component.dart (template excerpt)')(format=".")
:marked
Focus on the event binding
@ -185,21 +182,21 @@ code-example(language="bash").
We no longer need the static `hero` property of the `AppComponent`.
**Replace** it with this simple `selectedHero` property:
+makeExample('toh-2/dart/lib/app_component.dart', 'selected-hero-1', 'app_component.dart (selectedHero)')
+makeExample('toh-2/dart/lib/app_component.dart', 'selected-hero', 'app_component.dart (selectedHero)')
:marked
We’ve decided that none of the heroes should be selected before the user picks a hero so
we won’t initialize the `selectedHero` as we were doing with `hero`.
Now **add an `onSelect` method** that sets the `selectedHero` property to the `hero` the user clicked.
+makeExample('toh-2/dart/lib/app_component.dart', 'on-select-1', 'app_component.dart (onSelect)')(format=".")
+makeExample('toh-2/dart/lib/app_component.dart', 'on-select', 'app_component.dart (onSelect)')(format=".")
:marked
We will be showing the selected hero's details in our template.
At the moment, it is still referring to the old `hero` property.
Let’s fix the template to bind to the new `selectedHero` property.
+makeExample('toh-2/dart-snippets/app_component_snippets_pt2.dart', 'selectedHero-details', 'app_component.dart (Binding to the selectedHero\'s name)')(format=".")
+makeExample('toh-2/dart-snippets/app_component_snippets_pt2.dart', 'selectedHero-details', 'app_component.dart (template excerpt)')(format=".")
:marked
### Hide the empty detail with ngIf
@ -261,16 +258,16 @@ code-example(language="bash").
The key is the name of the CSS class (`selected`). The value is `true` if the two heroes match and `false` otherwise.
We’re saying “*apply the `selected` class if the heroes match, remove it if they don’t*”.
+makeExample('toh-2/dart-snippets/app_component_snippets_pt2.dart', 'class-selected-1', 'app_component.dart (Setting the CSS class)')(format=".")
+makeExample('toh-2/dart-snippets/app_component_snippets_pt2.dart', 'class-selected-1', 'app_component.dart (setting the CSS class)')(format=".")
:marked
Notice in the template that the `class.selected` is surrounded in square brackets (`[]`).
This is the syntax for a Property Binding, a binding in which data flows one way
This is the syntax for a **property binding**, a binding in which data flows one way
from the data source (the expression `hero == selectedHero`) to a property of `class`.
+makeExample('toh-2/dart-snippets/app_component_snippets_pt2.dart', 'class-selected-2', 'app_component.dart (Styling each hero)')(format=".")
+makeExample('toh-2/dart-snippets/app_component_snippets_pt2.dart', 'class-selected-2', 'app_component.dart (styling each hero)')(format=".")
.l-sub-section
:marked
Learn more about [Property Binding](../guide/template-syntax.html#property-binding)
Learn more about [property bindings](../guide/template-syntax.html#property-binding)
in the Template Syntax chapter.
:marked
@ -285,7 +282,7 @@ code-example(language="bash").
Here's the complete `app_component.dart` as it stands now:
+makeExample('toh-2/dart/lib/app_component.dart', 'pt2', 'app_component.dart')
+makeExample('toh-2/dart/lib/app_component.dart', '', 'app_component.dart')
.l-main-section
:marked
@ -296,6 +293,8 @@ code-example(language="bash").
* We added the ability to select a hero and show the hero’s details
* We learned how to use the built-in directives `ngIf` and `ngFor` in a component’s template
p Run the #[+liveExampleLink2('', 'toh-2')] for this part.
:marked
### The Road Ahead
Our Tour of Heroes has grown, but it’s far from complete.
We can't put the entire app into a single component.