Skip to content
This repository was archived by the owner on Dec 4, 2017. It is now read-only.

Commit f06398c

Browse files
chalinkwalrath
chalin
authored and
kwalrath
committed
docs(toh-6/dart): first edition of prose and example code (#1687)
* docs(toh-6/dart): first edition of prose and example code NOTE: this PR depends on #1686. Dart prose and example match TS except that: - No child-to-parent event emission occurs. - Support for Add Hero is added as an unconditional feature of the Heroes view. - http `_post` takes only a name - http `delete` takes only a hero id. - The Dart in-memory-data-service has been dropped in favor of an implementation based on the "standard" `http.testing.MockClient` class. * post-review changes
1 parent 97fbda0 commit f06398c

20 files changed

+855
-1
lines changed

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

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"title": "Tour of Heroes: HTTP",
3+
"docPart": "tutorial",
4+
"docHref": "toh-pt6.html"
5+
}

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

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
/* #docregion */
2+
h1 {
3+
font-size: 1.2em;
4+
color: #999;
5+
margin-bottom: 0;
6+
}
7+
h2 {
8+
font-size: 2em;
9+
margin-top: 0;
10+
padding-top: 0;
11+
}
12+
nav a {
13+
padding: 5px 10px;
14+
text-decoration: none;
15+
margin-top: 10px;
16+
display: inline-block;
17+
background-color: #eee;
18+
border-radius: 4px;
19+
}
20+
nav a:visited, a:link {
21+
color: #607D8B;
22+
}
23+
nav a:hover {
24+
color: #039be5;
25+
background-color: #CFD8DC;
26+
}
27+
nav a.router-link-active {
28+
color: #039be5;
29+
}

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

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
// #docplaster
2+
// #docregion
3+
import 'package:angular2/core.dart';
4+
import 'package:angular2/router.dart';
5+
6+
import 'package:angular2_tour_of_heroes/heroes_component.dart';
7+
import 'package:angular2_tour_of_heroes/hero_service.dart';
8+
import 'package:angular2_tour_of_heroes/dashboard_component.dart';
9+
// #docregion hero-detail-import
10+
import 'package:angular2_tour_of_heroes/hero_detail_component.dart';
11+
// #enddocregion hero-detail-import
12+
13+
@Component(
14+
selector: 'my-app',
15+
// #docregion template
16+
template: '''
17+
<h1>{{title}}</h1>
18+
<nav>
19+
<a [routerLink]="['Dashboard']">Dashboard</a>
20+
<a [routerLink]="['Heroes']">Heroes</a>
21+
</nav>
22+
<router-outlet></router-outlet>''',
23+
// #enddocregion template
24+
// #docregion style-urls
25+
styleUrls: const ['app_component.css'],
26+
// #enddocregion style-urls
27+
directives: const [ROUTER_DIRECTIVES],
28+
providers: const [HeroService, ROUTER_PROVIDERS])
29+
@RouteConfig(const [
30+
// #docregion dashboard-route
31+
const Route(
32+
path: '/dashboard',
33+
name: 'Dashboard',
34+
component: DashboardComponent,
35+
useAsDefault: true),
36+
// #enddocregion dashboard-route
37+
// #docregion hero-detail-route
38+
const Route(
39+
path: '/detail/:id', name: 'HeroDetail', component: HeroDetailComponent),
40+
// #enddocregion hero-detail-route
41+
const Route(path: '/heroes', name: 'Heroes', component: HeroesComponent)
42+
])
43+
class AppComponent {
44+
String title = 'Tour of Heroes';
45+
}

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

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
/* #docregion */
2+
[class*='col-'] {
3+
float: left;
4+
}
5+
*, *:after, *:before {
6+
-webkit-box-sizing: border-box;
7+
-moz-box-sizing: border-box;
8+
box-sizing: border-box;
9+
}
10+
h3 {
11+
text-align: center; margin-bottom: 0;
12+
}
13+
[class*='col-'] {
14+
padding-right: 20px;
15+
padding-bottom: 20px;
16+
}
17+
[class*='col-']:last-of-type {
18+
padding-right: 0;
19+
}
20+
.grid {
21+
margin: 0;
22+
}
23+
.col-1-4 {
24+
width: 25%;
25+
}
26+
.module {
27+
padding: 20px;
28+
text-align: center;
29+
color: #eee;
30+
max-height: 120px;
31+
min-width: 120px;
32+
background-color: #607D8B;
33+
border-radius: 2px;
34+
}
35+
h4 {
36+
position: relative;
37+
}
38+
.module:hover {
39+
background-color: #EEE;
40+
cursor: pointer;
41+
color: #607d8b;
42+
}
43+
.grid-pad {
44+
padding: 10px 0;
45+
}
46+
.grid-pad > [class*='col-']:last-of-type {
47+
padding-right: 20px;
48+
}
49+
@media (max-width: 600px) {
50+
.module {
51+
font-size: 10px;
52+
max-height: 75px; }
53+
}
54+
@media (max-width: 1024px) {
55+
.grid {
56+
margin: 0;
57+
}
58+
.module {
59+
min-width: 60px;
60+
}
61+
}

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

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
// #docplaster
2+
// #docregion
3+
import 'dart:async';
4+
5+
import 'package:angular2/core.dart';
6+
// #docregion import-router
7+
import 'package:angular2/router.dart';
8+
// #enddocregion import-router
9+
10+
import 'hero.dart';
11+
import 'hero_service.dart';
12+
13+
@Component(
14+
selector: 'my-dashboard',
15+
// #docregion template-url
16+
templateUrl: 'dashboard_component.html',
17+
// #enddocregion template-url
18+
// #docregion css
19+
styleUrls: const ['dashboard_component.css']
20+
// #enddocregion css
21+
)
22+
// #docregion component
23+
class DashboardComponent implements OnInit {
24+
List<Hero> heroes;
25+
26+
// #docregion ctor
27+
final Router _router;
28+
final HeroService _heroService;
29+
30+
DashboardComponent(this._heroService, this._router);
31+
32+
// #enddocregion ctor
33+
34+
Future<Null> ngOnInit() async {
35+
heroes = (await _heroService.getHeroes()).skip(1).take(4).toList();
36+
}
37+
38+
// #docregion goto-detail
39+
void gotoDetail(Hero hero) {
40+
var link = [
41+
'HeroDetail',
42+
{'id': hero.id.toString()}
43+
];
44+
_router.navigate(link);
45+
}
46+
// #enddocregion goto-detail
47+
}

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

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!-- #docregion -->
2+
<h3>Top Heroes</h3>
3+
<div class="grid grid-pad">
4+
<!-- #docregion click -->
5+
<div *ngFor="let hero of heroes" (click)="gotoDetail(hero)" class="col-1-4" >
6+
<!-- #enddocregion click -->
7+
<div class="module hero">
8+
<h4>{{hero.name}}</h4>
9+
</div>
10+
</div>
11+
</div>

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

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
// #docregion
2+
class Hero {
3+
final int id;
4+
String name;
5+
6+
Hero(this.id, this.name);
7+
8+
factory Hero.fromJson(Map<String, dynamic> hero) =>
9+
new Hero(_toInt(hero['id']), hero['name']);
10+
11+
Map toJson() => {'id': id, 'name': name};
12+
}
13+
14+
int _toInt(id) => id is int ? id : int.parse(id);

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

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
/* #docregion */
2+
label {
3+
display: inline-block;
4+
width: 3em;
5+
margin: .5em 0;
6+
color: #607D8B;
7+
font-weight: bold;
8+
}
9+
input {
10+
height: 2em;
11+
font-size: 1em;
12+
padding-left: .4em;
13+
}
14+
button {
15+
margin-top: 20px;
16+
font-family: Arial;
17+
background-color: #eee;
18+
border: none;
19+
padding: 5px 10px;
20+
border-radius: 4px;
21+
cursor: pointer; cursor: hand;
22+
}
23+
button:hover {
24+
background-color: #cfd8dc;
25+
}
26+
button:disabled {
27+
background-color: #eee;
28+
color: #ccc;
29+
cursor: auto;
30+
}

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

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
// #docplaster
2+
// #docregion , v2
3+
import 'dart:async';
4+
import 'dart:html';
5+
6+
// #docregion import-oninit
7+
import 'package:angular2/core.dart';
8+
// #enddocregion import-oninit
9+
// #docregion import-route-params
10+
import 'package:angular2/router.dart';
11+
// #enddocregion import-route-params
12+
13+
import 'hero.dart';
14+
// #docregion import-hero-service
15+
import 'hero_service.dart';
16+
// #enddocregion import-hero-service
17+
18+
// #docregion extract-template
19+
@Component(
20+
selector: 'my-hero-detail',
21+
// #docregion template-url
22+
templateUrl: 'hero_detail_component.html',
23+
// #enddocregion template-url, v2
24+
styleUrls: const ['hero_detail_component.css']
25+
// #docregion v2
26+
)
27+
// #enddocregion extract-template
28+
// #docregion implement
29+
class HeroDetailComponent implements OnInit {
30+
// #enddocregion implement
31+
Hero hero;
32+
// #docregion ctor
33+
final HeroService _heroService;
34+
final RouteParams _routeParams;
35+
36+
HeroDetailComponent(this._heroService, this._routeParams);
37+
// #enddocregion ctor
38+
39+
// #docregion ng-oninit
40+
Future<Null> ngOnInit() async {
41+
// #docregion get-id
42+
var idString = _routeParams.get('id');
43+
var id = int.parse(idString, onError: (_) => null);
44+
// #enddocregion get-id
45+
if (id != null) hero = await (_heroService.getHero(id));
46+
}
47+
// #enddocregion ng-oninit
48+
49+
// #docregion save
50+
Future<Null> save() async {
51+
await _heroService.save(hero);
52+
goBack();
53+
}
54+
// #enddocregion save
55+
56+
// #docregion go-back
57+
void goBack() {
58+
window.history.back();
59+
}
60+
// #enddocregion go-back
61+
}

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

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!-- #docplaster -->
2+
<!-- #docregion -->
3+
<div *ngIf="hero != null">
4+
<h2>{{hero.name}} details!</h2>
5+
<div>
6+
<label>id: </label>{{hero.id}}</div>
7+
<div>
8+
<label>name: </label>
9+
<input [(ngModel)]="hero.name" placeholder="name" />
10+
</div>
11+
<button (click)="goBack()">Back</button>
12+
<!-- #docregion save -->
13+
<button (click)="save()">Save</button>
14+
<!-- #enddocregion save -->
15+
</div>

0 commit comments

Comments
 (0)