docs(toh-6/dart): first edition of prose and example code

public/docs/_examples/toh-6/dart/.docsync.json

@@ -0,0 +1,5 @@
+{
+  "title": "Tour of Heroes: HTTP",
+  "docPart": "tutorial",
+  "docHref": "toh-pt6.html"
+}

public/docs/_examples/toh-6/dart/lib/app_component.css

@@ -0,0 +1,29 @@
+/* #docregion */
+h1 {
+  font-size: 1.2em;
+  color: #999;
+  margin-bottom: 0;
+}
+h2 {
+  font-size: 2em;
+  margin-top: 0;
+  padding-top: 0;
+}
+nav a {
+  padding: 5px 10px;
+  text-decoration: none;
+  margin-top: 10px;
+  display: inline-block;
+  background-color: #eee;
+  border-radius: 4px;
+}
+nav a:visited, a:link {
+  color: #607D8B;
+}
+nav a:hover {
+  color: #039be5;
+  background-color: #CFD8DC;
+}
+nav a.router-link-active {
+  color: #039be5;
+}

public/docs/_examples/toh-6/dart/lib/app_component.dart

@@ -0,0 +1,45 @@
+// #docplaster
+// #docregion
+import 'package:angular2/core.dart';
+import 'package:angular2/router.dart';
+
+import 'package:angular2_tour_of_heroes/heroes_component.dart';
+import 'package:angular2_tour_of_heroes/hero_service.dart';
+import 'package:angular2_tour_of_heroes/dashboard_component.dart';
+// #docregion hero-detail-import
+import 'package:angular2_tour_of_heroes/hero_detail_component.dart';
+// #enddocregion hero-detail-import
+
+@Component(
+    selector: 'my-app',
+    // #docregion template
+    template: '''
+      <h1>{{title}}</h1>
+      <nav>
+        <a [routerLink]="['Dashboard']">Dashboard</a>
+        <a [routerLink]="['Heroes']">Heroes</a>
+      </nav>
+      <router-outlet></router-outlet>''',
+    // #enddocregion template
+    // #docregion style-urls
+    styleUrls: const ['app_component.css'],
+    // #enddocregion style-urls
+    directives: const [ROUTER_DIRECTIVES],
+    providers: const [HeroService, ROUTER_PROVIDERS])
+@RouteConfig(const [
+  // #docregion dashboard-route
+  const Route(
+      path: '/dashboard',
+      name: 'Dashboard',
+      component: DashboardComponent,
+      useAsDefault: true),
+  // #enddocregion dashboard-route
+  // #docregion hero-detail-route
+  const Route(
+      path: '/detail/:id', name: 'HeroDetail', component: HeroDetailComponent),
+  // #enddocregion hero-detail-route
+  const Route(path: '/heroes', name: 'Heroes', component: HeroesComponent)
+])
+class AppComponent {
+  String title = 'Tour of Heroes';
+}

public/docs/_examples/toh-6/dart/lib/dashboard_component.css

@@ -0,0 +1,61 @@
+/* #docregion */
+[class*='col-'] {
+  float: left;
+}
+*, *:after, *:before {
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+}
+h3 {
+  text-align: center; margin-bottom: 0;
+}
+[class*='col-'] {
+  padding-right: 20px;
+  padding-bottom: 20px;
+}
+[class*='col-']:last-of-type {
+  padding-right: 0;
+}
+.grid {
+  margin: 0;
+}
+.col-1-4 {
+  width: 25%;
+}
+.module {
+	padding: 20px;
+	text-align: center;
+	color: #eee;
+	max-height: 120px;
+	min-width: 120px;
+	background-color: #607D8B;
+	border-radius: 2px;
+}
+h4 {
+  position: relative;
+}
+.module:hover {
+  background-color: #EEE;
+  cursor: pointer;
+  color: #607d8b;
+}
+.grid-pad {
+  padding: 10px 0;
+}
+.grid-pad > [class*='col-']:last-of-type {
+  padding-right: 20px;
+}
+@media (max-width: 600px) {
+	.module {
+	  font-size: 10px;
+	  max-height: 75px; }
+}
+@media (max-width: 1024px) {
+	.grid {
+	  margin: 0;
+	}
+	.module {
+	  min-width: 60px;
+	}
+}

public/docs/_examples/toh-6/dart/lib/dashboard_component.dart

@@ -0,0 +1,47 @@
+// #docplaster
+// #docregion
+import 'dart:async';
+
+import 'package:angular2/core.dart';
+// #docregion import-router
+import 'package:angular2/router.dart';
+// #enddocregion import-router
+
+import 'hero.dart';
+import 'hero_service.dart';
+
+@Component(
+    selector: 'my-dashboard',
+    // #docregion template-url
+    templateUrl: 'dashboard_component.html',
+    // #enddocregion template-url
+    // #docregion css
+    styleUrls: const ['dashboard_component.css']
+    // #enddocregion css
+    )
+// #docregion component
+class DashboardComponent implements OnInit {
+  List<Hero> heroes;
+
+  // #docregion ctor
+  final Router _router;
+  final HeroService _heroService;
+
+  DashboardComponent(this._heroService, this._router);
+
+  // #enddocregion ctor
+
+  Future<Null> ngOnInit() async {
+    heroes = (await _heroService.getHeroes()).skip(1).take(4).toList();
+  }
+
+  // #docregion goto-detail
+  void gotoDetail(Hero hero) {
+    var link = [
+      'HeroDetail',
+      {'id': hero.id.toString()}
+    ];
+    _router.navigate(link);
+  }
+// #enddocregion goto-detail
+}

public/docs/_examples/toh-6/dart/lib/dashboard_component.html

@@ -0,0 +1,11 @@
+<!-- #docregion -->
+<h3>Top Heroes</h3>
+<div class="grid grid-pad">
+  <!-- #docregion click -->
+  <div *ngFor="let hero of heroes" (click)="gotoDetail(hero)" class="col-1-4" >
+    <!-- #enddocregion click -->
+    <div class="module hero">
+      <h4>{{hero.name}}</h4>
+    </div>
+  </div>
+</div>

public/docs/_examples/toh-6/dart/lib/hero.dart

@@ -0,0 +1,14 @@
+// #docregion
+class Hero {
+  final int id;
+  String name;
+
+  Hero(this.id, this.name);
+
+  factory Hero.fromJson(Map<String, dynamic> hero) =>
+    new Hero(_toInt(hero['id']), hero['name']);
+
+  Map toJson() => {'id': id, 'name': name};
+}
+
+int _toInt(id) => id is int ? id : int.parse(id);

public/docs/_examples/toh-6/dart/lib/hero_detail_component.css

@@ -0,0 +1,30 @@
+/* #docregion */
+label {
+  display: inline-block;
+  width: 3em;
+  margin: .5em 0;
+  color: #607D8B;
+  font-weight: bold;
+}
+input {
+  height: 2em;
+  font-size: 1em;
+  padding-left: .4em;
+}
+button {
+  margin-top: 20px;
+  font-family: Arial;
+  background-color: #eee;
+  border: none;
+  padding: 5px 10px;
+  border-radius: 4px;
+  cursor: pointer; cursor: hand;
+}
+button:hover {
+  background-color: #cfd8dc;
+}
+button:disabled {
+  background-color: #eee;
+  color: #ccc; 
+  cursor: auto;
+}

public/docs/_examples/toh-6/dart/lib/hero_detail_component.dart

@@ -0,0 +1,61 @@
+// #docplaster
+// #docregion , v2
+import 'dart:async';
+import 'dart:html';
+
+// #docregion import-oninit
+import 'package:angular2/core.dart';
+// #enddocregion import-oninit
+// #docregion import-route-params
+import 'package:angular2/router.dart';
+// #enddocregion import-route-params
+
+import 'hero.dart';
+// #docregion import-hero-service
+import 'hero_service.dart';
+// #enddocregion import-hero-service
+
+// #docregion extract-template
+@Component(
+    selector: 'my-hero-detail',
+    // #docregion template-url
+    templateUrl: 'hero_detail_component.html',
+    // #enddocregion template-url, v2
+    styleUrls: const ['hero_detail_component.css']
+    // #docregion v2
+    )
+// #enddocregion extract-template
+// #docregion implement
+class HeroDetailComponent implements OnInit {
+  // #enddocregion implement
+  Hero hero;
+  // #docregion ctor
+  final HeroService _heroService;
+  final RouteParams _routeParams;
+
+  HeroDetailComponent(this._heroService, this._routeParams);
+  // #enddocregion ctor
+
+  // #docregion ng-oninit
+  Future<Null> ngOnInit() async {
+    // #docregion get-id
+    var idString = _routeParams.get('id');
+    var id = int.parse(idString, onError: (_) => null);
+    // #enddocregion get-id
+    if (id != null) hero = await (_heroService.getHero(id));
+  }
+  // #enddocregion ng-oninit
+
+  // #docregion save
+  Future<Null> save() async {
+    await _heroService.save(hero);
+    goBack();
+  }
+  // #enddocregion save
+
+  // #docregion go-back
+  void goBack() {
+    window.history.back();
+  }
+  // #enddocregion go-back
+}

public/docs/_examples/toh-6/dart/lib/hero_detail_component.html

@@ -0,0 +1,15 @@
+<!-- #docplaster -->
+<!-- #docregion -->
+<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>
+  <button (click)="goBack()">Back</button>
+  <!-- #docregion save -->
+  <button (click)="save()">Save</button>
+  <!-- #enddocregion save -->
+</div>