convert toh tutorial for dart (except toh-pt5)

Author: kasperpeulen

public/docs/dart/latest/tutorial/index.jade

@@ -24,7 +24,10 @@ include ../../../../_includes/_util-fns
   We'll be covering a lot of ground at an introductory level but we’ll find plenty of links
   to chapters with greater depth.
 
-  [Run the live example](/resources/live-examples/tutorial/ts/plnkr.html)
+  <!--
+    TODO(kasperpeulen): Make a github repo with gh-pages for this:
+    [Run the live example](/resources/live-examples/tutorial/ts/plnkr.html)
+  -->
 
 .l-main-section
 :marked

public/docs/dart/latest/tutorial/toh-pt1.jade

@@ -5,34 +5,41 @@ include ../../../../_includes/_util-fns
 
   Every story starts somewhere. Our story starts where the [QuickStart](../quickstart.html) ends.
 
-  [Run the live example for part 1](/resources/live-examples/toh-1/ts/plnkr.html)
+  <!--
+    TODO(kasperpeulen): Make a github repo with gh-pages for this:
+    [Run the live example for part 1](/resources/live-examples/toh-1/ts/plnkr.html)
+  -->
 
   Follow the "QuickStart" steps. They provide the prerequisites, the folder structure,
   and the core files for our Tour of Heroes.
 
-  Copy the "QuickStart" code to a new folder and rename the folder `angular2-tour-of-heroes`.
+  <!--
+    TODO(kasperpeulen): Recommand stagehand for this
+  -->
+
+  Copy the "QuickStart" code to a new folder and rename the folder `angular2_tour_of_heroes`.
   We should have the following structure:
 
 .filetree
-  .file angular2-tour-of-heroes
+  .file angular2_tour_of_heroes
   .children
-    .file node_modules
-    .file app
+    .file lib
+    .children
+      .file app_component.dart
+    .file web
     .children
-      .file app.component.ts
-      .file boot.ts
-    .file index.html
-    .file package.json
-    .file tsconfig.json
+      .file index.html
+      .file main.dart
+    .file pubspec.yaml
 :marked
   ## Keep the app transpiling and running
-  We want to start the TypeScript 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").
-  npm start
+  pub serve
 
 :marked
-  This command runs the compiler in watch mode, starts the server, launches the app in a browser,
+  This command runs the compiler in watch mode, starts the server,
   and keeps the app running while we continue to build the Tour of Heroes.
 
 .l-main-section
@@ -43,12 +50,12 @@ code-example(format="" language="bash").
     Let's add two properties to our `AppComponent`, a `title` property for the application name and a `hero` property
     for a hero named "Windstorm".
 
-  +makeExample('toh-1/ts-snippets/app.component.snippets.pt1.ts', 'app-component-1', 'app.component.ts (AppComponent class)')(format=".")
+  +makeExample('toh-1/dart-snippets/app_component_snippets_pt1.dart', 'app-component-1', 'app_component.dart (AppComponent class)')(format=".")
 
   :marked
     Now we update the template in the `@Component` decoration with data bindings to these new properties.
 
-  +makeExample('toh-1/ts-snippets/app.component.snippets.pt1.ts', 'show-hero')
+  +makeExample('toh-1/dart-snippets/app_component_snippets_pt1.dart', 'show-hero')
 
   :marked
     The browser should refresh and display our title and hero.
@@ -62,48 +69,32 @@ code-example(format="" language="bash").
   ### Hero object
 
   At the moment, our hero is just a name.  Our hero needs more properties.
-  Let's convert the `hero` from a literal string to an interface.
-
-  Create a `Hero` interface with `id` and `name` properties.
-  Keep this near the top of the `app.component.ts` file for now.
+  Let's convert the `hero` from a literal string to a class.
 
-+makeExample('toh-1/ts/app/app.component.ts', 'hero-interface-1', 'app.component.ts (Hero interface)')(format=".")
+  Create a `Hero` class with `id` and `name` properties.
+  Keep this near the top of the `app_component.dart` file for now.
 
-.l-sub-section
-  :marked
-    #### Interface or Class?
-    Why a `Hero` interface and not a `Hero` class? 
-    We want a strongly typed `Hero`. We get strong typing with either option. 
-    Our choice depends on how we intend to use the `Hero`. 
-    
-    If we need a `Hero` that goes beyond simple properties, a `Hero` with logic and behavior, 
-    we must define a class. 
-    If we only need type checking, the interface is sufficient and lighter weight.
-    
-    Lighter weight? Transpiling a class to JavaScript produces code. 
-    Transpiling an interface produces &mdash; nothing.
-    If the class does nothing (and there is nothing for a `Hero` class to do right now),
-    we prefer an interface.
++makeExample('toh-1/dart/lib/app_component.dart', 'hero-class-1', 'app_component.dart (Hero class)')(format=".")
 
 :marked
-  Now that we have a `Hero` interface, let’s refactor our component’s `hero` property to be of type `Hero`.
+  Now that we have a `Hero` class, let’s refactor our component’s `hero` property to be of type `Hero`.
   Then initialize it with an id of `1` and the name, "Windstorm".
 
-+makeExample('toh-1/ts-snippets/app.component.snippets.pt1.ts', 'hero-property-1', 'app.component.ts (Hero property)')(format=".")
++makeExample('toh-1/dart-snippets/app_component_snippets_pt1.dart', 'hero-property-1', 'app_component.dart (Hero property)')(format=".")
 
 :marked
   Because we changed the hero from a string to an object,
   we update the binding in the template to refer to the hero’s `name` property.
 
-+makeExample('toh-1/ts-snippets/app.component.snippets.pt1.ts', 'show-hero-2')
++makeExample('toh-1/dart-snippets/app_component_snippets_pt1.dart', 'show-hero-2')
 :marked
   The browser refreshes and continues to display our hero’s name.
 
   ### Adding more HTML
   Displaying a name is good, but we want to see all of our hero’s properties.
   We’ll add a `<div>` for our hero’s `id` property and another `<div>` for our hero’s `name`.
 
-+makeExample('toh-1/ts-snippets/app.component.snippets.pt1.ts', 'show-hero-properties')
++makeExample('toh-1/dart-snippets/app_component_snippets_pt1.dart', 'show-hero-properties')
 :marked
   Uh oh, our template string is getting long. We better take care of that to avoid the risk of making a typo in the template.
 
@@ -113,12 +104,12 @@ code-example(format="" language="bash").
   but that gets ugly fast, it is harder to read, and
   it is easy to make a spelling error. Instead,
   let’s take advantage of the template strings feature
-  in ES2015 and TypeScript to maintain our sanity.
+  in Dart to maintain our sanity.
 
-  Change the quotes around the template to back-ticks and
+  Change the quotes around the template to triple quotes and
   put the `<h1>`, `<h2>` and `<div>` elements on their own lines.
 
-+makeExample('toh-1/ts-snippets/app.component.snippets.pt1.ts', 'multi-line-strings', 'app.component.ts (AppComponent\'s template)')
++makeExample('toh-1/dart-snippets/app_component_snippets_pt1.dart', 'multi-line-strings', 'app_component.dart (AppComponent\'s template)')
 
   .callout.is-important
     header A back-tick is not a single quote
@@ -138,7 +129,7 @@ code-example(format="" language="bash").
 
   Refactor the hero name `<label>` with `<label>` and `<input>` elements as shown below:
 
-+makeExample('toh-1/ts-snippets/app.component.snippets.pt1.ts', 'editing-Hero', 'app.component.ts (input element)')
++makeExample('toh-1/dart-snippets/app_component_snippets_pt1.dart', 'editing-Hero', 'app_component.dart (input element)')
 :marked
   We see in the browser that the hero’s name does appear in the `<input>` textbox.
   But something doesn’t feel right.
@@ -176,16 +167,19 @@ code-example(language="html").
 
   * Our Tour of Heroes uses the double curly braces of interpolation (a form of one-way data binding)
   to display the application title and properties of a `Hero` object.
-  * We wrote a multi-line template using ES2015’s template strings to make our template readable.
+  * We wrote a multi-line template using Dart's template strings to make our template readable.
   * We can both display and change the hero’s name after adding a two-way data binding to the `<input>` element
   using the built-in `ngModel` directive.
   * The `ngModel` directive also propagates changes to every other binding of the `hero.name`.
 
-  [Run the live example for part 1](/resources/live-examples/toh-1/ts/plnkr.html)
+  <!--
+    TODO(kasperpeulen): Make a github repo with gh-pages for this:
+    [Run the live example for part 1](/resources/live-examples/toh-1/ts/plnkr.html)
+  -->
 
-  Here's the complete `app.component.ts` as it stands now:
+  Here's the complete `app_component.dart` as it stands now:
 
-+makeExample('toh-1/ts/app/app.component.ts', 'pt1', 'app.component.ts')
++makeExample('toh-1/dart/lib/app_component.dart', 'pt1', 'app_component.dart')
 
 .l-main-section
 :marked

public/docs/dart/latest/tutorial/toh-pt2.jade

@@ -6,7 +6,10 @@ include ../../../../_includes/_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.
 
-  [Run the live example for part 2](/resources/live-examples/toh-2/ts/plnkr.html)
+  <!--
+    TODO(kasperpeulen): Make a github repo with gh-pages for this:
+    [Run the live example for part 2](/resources/live-examples/toh-2/dart/plnkr.html)
+  -->
 
   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,
@@ -20,22 +23,22 @@ include ../../../../_includes/_util-fns
   If not, we’ll need to go back to Part 1 and figure out what we missed.
 
 .filetree
-  .file angular2-tour-of-heroes
+  .file angular2_tour_of_heroes
   .children
-    .file node_modules
-    .file app
+    .file lib
     .children
-      .file app.component.ts
-      .file boot.ts
-    .file index.html
-    .file package.json
-    .file tsconfig.json
+      .file app_component.dart
+    .file web
+    .children
+      .file index.html
+      .file main.dart
+    .file pubspec.yaml
 :marked
   ### Keep the app transpiling and running
-  We want to start the TypeScript 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").
-  npm start
+  pub serve
 
 :marked
   This will keep the application running while we continue to build the Tour of Heroes.
@@ -44,23 +47,21 @@ code-example(format="." language="bash").
 :marked
   ## Displaying Our Heroes
   ### Creating heroes
-  Let’s create an array of ten heroes at the bottom of `app.component.ts`.
+  Let’s create an array of ten heroes at the bottom of `app_component.dart`.
 
-+makeExample('toh-2/ts/app/app.component.ts', 'hero-array', 'app.component.ts (Hero array)')
++makeExample('toh-2/dart/lib/app_component.dart', 'hero-array', 'app_component.dart (Hero list)')
 
 :marked
-  The `HEROES` array is of type `Hero`, the interface defined in part one, 
-  to create an array of heroes.
+  The `mockHeroes` list is of type `Hero`, the class defined in part one,
+  to create an list of heroes.
   We aspire to fetch this list of heroes from a web service, but let’s take small steps
   first and display mock heroes.
 
   ### Exposing heroes
   Let’s create a public property in `AppComponent` that exposes the heroes for binding.
 
-+makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'hero-array-1', 'app.component.ts (Hero array property)')
++makeExample('toh-2/dart-snippets/app_component_snippets_pt2.dart', 'hero-array-1', 'app_component.dart (Hero array property)')
 
-:marked
-  We did not have to define the `heroes` type.  TypeScript can infer it from the `HEROES` array.
 .l-sub-section
   :marked
     We could have defined the heroes list here in this component class.
@@ -72,7 +73,7 @@ code-example(format="." 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/ts-snippets/app.component.snippets.pt2.ts', 'heroes-template-1', 'app.component.ts (Heroes template)')
++makeExample('toh-2/dart-snippets/app_component_snippets_pt2.dart', 'heroes-template-1', 'app_component.dart (Heroes template)')
 
 :marked
   Now we have a template that we can fill with our heroes.
@@ -85,7 +86,7 @@ code-example(format="." language="bash").
 
   First modify the `<li>` tag by adding the built-in directive `*ngFor`.
 
-+makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'heroes-ngfor-1', 'app.component.ts (ngFor)')
++makeExample('toh-2/dart-snippets/app_component_snippets_pt2.dart', 'heroes-ngfor-1', 'app_component.dart (ngFor)')
 
 .alert.is-critical
   :marked
@@ -114,7 +115,7 @@ code-example(format="." language="bash").
   Now we insert some content between the `<li>` tags
   that uses the `hero` template variable to display the hero’s properties.
 
-+makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'ng-for', 'app.component.ts (ngFor template)')(format=".")
++makeExample('toh-2/dart-snippets/app_component_snippets_pt2.dart', 'ng-for', 'app_component.dart (ngFor template)')(format=".")
 
 :marked
   When the browser refreshes, we see a list of heroes!
@@ -126,7 +127,7 @@ code-example(format="." language="bash").
   Let’s add some styles to our component by setting the `styles` property on the `@Component` decorator
   to the following CSS classes:
 
-+makeExample('toh-2/ts/app/app.component.ts', 'styles-1', 'app.component.ts (Styling)')
++makeExample('toh-2/dart/lib/app_component.dart', 'styles-1', 'app_component.dart (Styling)')
 
 :marked
   Notice that we again use the back-tick notation for multi-line strings.
@@ -136,7 +137,7 @@ code-example(format="." language="bash").
 
   Our template for displaying the heroes should now look like this:
 
-+makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'heroes-styled', 'app.component.ts (Styled heroes)')
++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. 
@@ -156,7 +157,7 @@ code-example(format="." language="bash").
     ### Click event
     We modify the `<li>` by inserting an Angular event binding to its click event.
 
-  +makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'selectedHero-click', 'app.component.ts (Capturing the click event)')
+  +makeExample('toh-2/dart-snippets/app_component_snippets_pt2.dart', 'selectedHero-click', 'app_component.dart (Capturing the click event)')
 
   :marked
     Focus on the event binding
@@ -185,21 +186,21 @@ code-example(format="." language="bash").
     We no longer need the static `hero` property of the `AppComponent`.
     **Replace** it with this simple `selectedHero` property:
 
-  +makeExample('toh-2/ts/app/app.component.ts', 'selected-hero-1', 'app.component.ts (selectedHero)')
+  +makeExample('toh-2/dart/lib/app_component.dart', 'selected-hero-1', '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/ts/app/app.component.ts', 'on-select-1', 'app.component.ts (onSelect)')
+  +makeExample('toh-2/dart/lib/app_component.dart', 'on-select-1', 'app_component.dart (onSelect)')
 
   :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/ts-snippets/app.component.snippets.pt2.ts', 'selectedHero-details', 'app.component.ts (Binding to the selectedHero\'s name)')
+  +makeExample('toh-2/dart-snippets/app_component_snippets_pt2.dart', 'selectedHero-details', 'app_component.dart (Binding to the selectedHero\'s name)')
   :marked
     ### Hide the empty detail with ngIf
 
@@ -219,7 +220,7 @@ code-example(format="." language="bash").
     We wrap the HTML hero detail content of our template with a `<div>`.
     Then we add the `ngIf` built-in directive and set it to the `selectedHero` property of our component.
 
-  +makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'ng-if', 'app.component.ts (ngIf)')
+  +makeExample('toh-2/dart-snippets/app_component_snippets_pt2.dart', 'ng-if', 'app_component.dart (ngIf)')
 
   .alert.is-critical
     :marked
@@ -229,7 +230,7 @@ code-example(format="." language="bash").
     When there is no `selectedHero`, the `ngIf` directive removes the hero detail HTML from the DOM.
     There will be no hero detail elements and no bindings to worry about.
 
-    When the user picks a hero, `selectedHero` becomes "truthy" and
+    When the user picks a hero, `selectedHero` isn't `null` anymore and
     `ngIf` puts the hero detail content into the DOM and evaluates the nested bindings.
   .l-sub-section
     :marked
@@ -261,12 +262,12 @@ code-example(format="." 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/ts-snippets/app.component.snippets.pt2.ts', 'class-selected-1', 'app.component.ts (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
     from the data source (the expression `hero === selectedHero`) to a property of `class`.
-  +makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'class-selected-2', 'app.component.ts (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
@@ -283,9 +284,9 @@ code-example(format="." language="bash").
   :marked
     We select a different hero and the tell-tale color switches to that hero.
 
-    Here's the complete `app.component.ts` as it stands now:
+    Here's the complete `app_component.dart` as it stands now:
 
-  +makeExample('toh-2/ts/app/app.component.ts', 'pt2', 'app.component.ts')
+  +makeExample('toh-2/dart/lib/app_component.dart', 'pt2', 'app_component.dart')
 
 .l-main-section
 :marked
@@ -296,7 +297,10 @@ code-example(format="." 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
 
-  [Run the live example for part 2](/resources/live-examples/toh-2/ts/plnkr.html)
+  <!--
+    TODO(kasperpeulen): Make a github repo with gh-pages for this:
+    [Run the live example for part 2](/resources/live-examples/toh-2/dart/plnkr.html)
+  -->
 
   ### The Road Ahead
   Our Tour of Heroes has grown, but it’s far from complete.