From 1cc5284cc2049d58563bc598c4807f7e593ab99c Mon Sep 17 00:00:00 2001 From: Patrice Chalin Date: Wed, 8 Jun 2016 16:24:56 -0700 Subject: [PATCH] docs(toh-2/dart): copyedits (#1621) --- .../toh-2/dart/lib/app_component.dart | 19 ++++---- .../docs/_examples/toh-2/dart/web/main.dart | 4 +- public/docs/dart/latest/tutorial/toh-pt2.jade | 45 +++++++++---------- 3 files changed, 31 insertions(+), 37 deletions(-) diff --git a/public/docs/_examples/toh-2/dart/lib/app_component.dart b/public/docs/_examples/toh-2/dart/lib/app_component.dart index 4959afe753..66268118dc 100644 --- a/public/docs/_examples/toh-2/dart/lib/app_component.dart +++ b/public/docs/_examples/toh-2/dart/lib/app_component.dart @@ -1,4 +1,4 @@ -// #docregion pt2 +// #docregion import 'package:angular2/core.dart'; class Hero { @@ -29,7 +29,7 @@ class Hero { ''', -// #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 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 mockHeroes = [ @@ -109,6 +109,3 @@ final List mockHeroes = [ new Hero(19, 'Magma'), new Hero(20, 'Tornado') ]; -// #enddocregion hero-array - -// #enddocregion pt2 diff --git a/public/docs/_examples/toh-2/dart/web/main.dart b/public/docs/_examples/toh-2/dart/web/main.dart index 129bd9620b..ed2bb7156f 100644 --- a/public/docs/_examples/toh-2/dart/web/main.dart +++ b/public/docs/_examples/toh-2/dart/web/main.dart @@ -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 diff --git a/public/docs/dart/latest/tutorial/toh-pt2.jade b/public/docs/dart/latest/tutorial/toh-pt2.jade index 1c563e9100..6127079ab1 100644 --- a/public/docs/dart/latest/tutorial/toh-pt2.jade +++ b/public/docs/dart/latest/tutorial/toh-pt2.jade @@ -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 `
  • ` 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.