'''
+)
+class AppComponent {
+ String title = 'Tour of Heroes';
+ Hero hero = new Hero(1, 'Windstorm');
+}
+// #enddocregion pt1
diff --git a/public/docs/_examples/toh-1/dart/pubspec.yaml b/public/docs/_examples/toh-1/dart/pubspec.yaml
new file mode 100644
index 0000000000..50fb62d8d5
--- /dev/null
+++ b/public/docs/_examples/toh-1/dart/pubspec.yaml
@@ -0,0 +1,16 @@
+# #docregion
+name: angular2_tour_of_heroes
+version: 0.0.1
+environment:
+ sdk: '>=1.13.0 <2.0.0'
+dependencies:
+ angular2: 2.0.0-beta.14
+ browser: ^0.10.0
+ dart_to_js_script_rewriter: ^1.0.1
+transformers:
+- angular2:
+ platform_directives:
+ - package:angular2/common.dart#COMMON_DIRECTIVES
+ platform_pipes:
+ - package:angular2/common.dart#COMMON_PIPES
+ entry_points: web/main.dart
diff --git a/public/docs/_examples/toh-1/dart/web/index.html b/public/docs/_examples/toh-1/dart/web/index.html
new file mode 100644
index 0000000000..3c09e8af9d
--- /dev/null
+++ b/public/docs/_examples/toh-1/dart/web/index.html
@@ -0,0 +1,14 @@
+
+
+
+ Angular 2 Tour of Heroes
+
+
+
+
+
+
+
+ Loading...
+
+
diff --git a/public/docs/_examples/toh-1/dart/web/main.dart b/public/docs/_examples/toh-1/dart/web/main.dart
new file mode 100644
index 0000000000..d5b50195c1
--- /dev/null
+++ b/public/docs/_examples/toh-1/dart/web/main.dart
@@ -0,0 +1,9 @@
+// #docregion pt1
+import 'package:angular2/bootstrap.dart';
+
+import 'package:angular2_tour_of_heroes/app_component.dart';
+
+main() {
+ bootstrap(AppComponent);
+}
+// #enddocregion pt1
\ No newline at end of file
diff --git a/public/docs/dart/latest/tutorial/_data.json b/public/docs/dart/latest/tutorial/_data.json
index bf52bf1c4e..fd9b910d46 100644
--- a/public/docs/dart/latest/tutorial/_data.json
+++ b/public/docs/dart/latest/tutorial/_data.json
@@ -2,7 +2,7 @@
"index": {
"title": "Tutorial: Tour of Heroes",
"navTitle": "Introduction",
- "intro": "The Tour of Heroes tutorial takes us through the steps of creating an Angular application in TypeScript.",
+ "intro": "The Tour of Heroes tutorial takes us through the steps of creating an Angular application in Dart.",
"nextable": true
},
"toh-pt1": {
diff --git a/public/docs/dart/latest/tutorial/index.jade b/public/docs/dart/latest/tutorial/index.jade
index 31520de5ac..3959d10676 100644
--- a/public/docs/dart/latest/tutorial/index.jade
+++ b/public/docs/dart/latest/tutorial/index.jade
@@ -1,13 +1,9 @@
include ../_util-fns
++includeShared('{ts}', 'intro')
+
:marked
- We're working on the Dart version of this case study.
- In the meantime, please see these resources:
+ [View the source code](https://github.com/angular/angular.io/tree/master/public/docs/_examples/toh-5/dart)
- * [Introduction](/docs/ts/latest/tutorial/index.html):
- The TypeScript version of this chapter
++includeShared('{ts}', 'main')
- * [Dart source code](https://github.com/angular/angular.io/tree/master/public/docs/_examples/toh-5/dart):
- A preliminary Dart version of the Tour of Heroes app,
- featuring the hero editor, master/detail views,
- multiple components, services, and routing
diff --git a/public/docs/dart/latest/tutorial/toh-pt1.jade b/public/docs/dart/latest/tutorial/toh-pt1.jade
index d15c0fe744..e96613a628 100644
--- a/public/docs/dart/latest/tutorial/toh-pt1.jade
+++ b/public/docs/dart/latest/tutorial/toh-pt1.jade
@@ -1,14 +1,189 @@
include ../_util-fns
:marked
- We're working on the Dart version of this case study.
- In the meantime, please see these resources:
+ # Once Upon a Time
- * [The Hero Editor](/docs/ts/latest/tutorial/toh-pt1.html):
- The TypeScript version of this chapter
+ Every story starts somewhere. Our story starts where the [QuickStart](../quickstart.html) ends.
- * [Dart source code](https://github.com/angular/angular.io/tree/master/public/docs/_examples/toh-5/dart):
- A preliminary Dart version of the Tour of Heroes app,
- featuring the hero editor, a master/detail page,
- multiple components, services, and routing
+:marked
+ 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`.
+ We should have the following structure:
+
+.filetree
+ .file angular2_tour_of_heroes
+ .children
+ .file lib
+ .children
+ .file app_component.dart
+ .file web
+ .children
+ .file index.html
+ .file main.dart
+ .file pubspec.yaml
+
+// Add .file styles.css
+
+.p
+
+.callout.is-helpful
+ header Source code
+ :marked
+ The complete source code for the example app in this chapter is
+ [in GitHub](https://github.com/angular/angular.io/tree/master/public/docs/_examples/toh-1/dart).
+
+: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").
+ pub serve
+
+:marked
+ 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
+ :marked
+ ## Show our Hero
+ We want to display Hero data in our app.
+
+ 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/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` annotation with data bindings to these new properties.
+
+ +makeExample('toh-1/dart-snippets/app_component_snippets_pt1.dart', 'show-hero')
+
+ :marked
+ The browser should refresh and display our title and hero.
+
+ The double curly braces tell our app to read the `title` and `hero` properties from the component and render them.
+ This is the "interpolation" form of one-way data binding.
+.l-sub-section
+ :marked
+ Learn more about interpolation in the [Displaying Data chapter](../guide/displaying-data.html).
+:marked
+ ### 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 a class.
+
+ Create a `Hero` class with `id` and `name` properties.
+ Keep this near the top of the `app_component.dart` file for now.
+
++makeExample('toh-1/dart/lib/app_component.dart', 'hero-class-1', 'app_component.dart (Hero class)')(format=".")
+
+:marked
+ 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/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/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 `
` for our hero’s `id` property and another `
` for our hero’s `name`.
+
++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.
+
+ ### Multi-line template strings
+
+ We could make a more readable template with string concatenation
+ 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 Dart to maintain our sanity.
+
+ Change the quotes around the template to triple quotes and
+ put the `
`, `
` and `
` elements on their own lines.
+
++makeExample('toh-1/dart-snippets/app_component_snippets_pt1.dart', 'multi-line-strings', 'app_component.dart (AppComponent\'s template)')(format=".")
+
+// omit back-tick warning
+
+.l-main-section
+:marked
+ ## Editing Our Hero
+
+ We want to be able to edit the hero name in a textbox.
+
+ Refactor the hero name `