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

Commit 3547e4c

Browse files
kwalrathkwalrath
committed
docs(toh/dart): convert toh-4 to Dart
closes #1091
1 parent e552239 commit 3547e4c

File tree

12 files changed

+699
-8
lines changed

12 files changed

+699
-8
lines changed

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

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
// #docplaster
2+
// #docregion
3+
import 'dart:async';
4+
5+
import 'package:angular2/core.dart';
6+
7+
import 'hero.dart';
8+
import 'hero_detail_component.dart';
9+
// #docregion hero-service-import
10+
import 'hero_service.dart';
11+
12+
// #enddocregion hero-service-import
13+
14+
@Component(
15+
selector: 'my-app',
16+
template: '''
17+
<h1>{{title}}</h1>
18+
<h2>My Heroes</h2>
19+
<ul class="heroes">
20+
<li *ngFor="#hero of heroes"
21+
[class.selected]="hero == selectedHero"
22+
(click)="onSelect(hero)">
23+
<span class="badge">{{hero.id}}</span> {{hero.name}}
24+
</li>
25+
</ul>
26+
<my-hero-detail [hero]="selectedHero"></my-hero-detail>
27+
''',
28+
styles: const [
29+
'''
30+
.selected {
31+
background-color: #CFD8DC !important;
32+
color: white;
33+
}
34+
.heroes {
35+
margin: 0 0 2em 0;
36+
list-style-type: none;
37+
padding: 0;
38+
width: 10em;
39+
}
40+
.heroes li {
41+
cursor: pointer;
42+
position: relative;
43+
left: 0;
44+
background-color: #EEE;
45+
margin: .5em;
46+
padding: .3em 0em;
47+
height: 1.6em;
48+
border-radius: 4px;
49+
}
50+
.heroes li.selected:hover {
51+
color: white;
52+
}
53+
.heroes li:hover {
54+
color: #607D8B;
55+
background-color: #EEE;
56+
left: .1em;
57+
}
58+
.heroes .text {
59+
position: relative;
60+
top: -3px;
61+
}
62+
.heroes .badge {
63+
display: inline-block;
64+
font-size: small;
65+
color: white;
66+
padding: 0.8em 0.7em 0em 0.7em;
67+
background-color: #607D8B;
68+
line-height: 1em;
69+
position: relative;
70+
left: -1px;
71+
top: -4px;
72+
height: 1.8em;
73+
margin-right: .8em;
74+
border-radius: 4px 0px 0px 4px;
75+
}
76+
'''
77+
],
78+
directives: const [
79+
HeroDetailComponent
80+
],
81+
providers: const [
82+
HeroService
83+
])
84+
class AppComponent implements OnInit {
85+
String title = 'Tour of Heroes';
86+
List<Hero> heroes;
87+
Hero selectedHero;
88+
89+
final HeroService _heroService;
90+
91+
AppComponent(this._heroService);
92+
93+
// #docregion get-heroes
94+
getHeroes() async {
95+
heroes = await _heroService.getHeroes();
96+
}
97+
// #enddocregion get-heroes
98+
99+
ngOnInit() {
100+
getHeroes();
101+
}
102+
103+
onSelect(Hero hero) {
104+
selectedHero = hero;
105+
}
106+
}

‎public/docs/_examples/toh-4/dart/lib/app_component_1.dart‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
// #docplaster
2+
// #docregion on-init
3+
import 'package:angular2/core.dart';
4+
5+
// #enddocregion on-init
6+
import 'hero.dart';
7+
import 'hero_detail_component.dart';
8+
// #docregion hero-service-import
9+
import 'hero_service_1.dart';
10+
// #enddocregion hero-service-import
11+
12+
// Testable but never shown
13+
@Component(
14+
selector: 'my-app',
15+
template: '''
16+
<div *ngFor="#hero of heroes" (click)="onSelect(hero)">
17+
{{hero.name}}
18+
</div>
19+
<my-hero-detail [hero]="selectedHero"></my-hero-detail>
20+
''',
21+
directives: const [HeroDetailComponent],
22+
// #docregion providers
23+
providers: const [HeroService])
24+
// #enddocregion providers
25+
// #docregion on-init
26+
class AppComponent implements OnInit {
27+
// #enddocregion on-init
28+
String title = 'Tour of Heroes';
29+
// #docregion heroes-prop
30+
List<Hero> heroes;
31+
// #enddocregion heroes-prop
32+
Hero selectedHero;
33+
34+
// #docregion new-service
35+
HeroService heroService = new HeroService(); // don't do this
36+
// #enddocregion new-service
37+
// #docregion ctor
38+
final HeroService _heroService;
39+
AppComponent(this._heroService);
40+
// #enddocregion ctor
41+
// #docregion getHeroes
42+
getHeroes() {
43+
//#docregion get-heroes
44+
heroes = _heroService.getHeroes();
45+
// #enddocregion get-heroes
46+
}
47+
// #enddocregion getHeroes
48+
49+
// #docregion ng-on-init
50+
// #docregion on-init
51+
ngOnInit() {
52+
// #enddocregion on-init
53+
getHeroes();
54+
// #docregion on-init
55+
}
56+
// #enddocregion on-init
57+
// #enddocregion ng-on-init
58+
59+
onSelect(Hero hero) {
60+
selectedHero = hero;
61+
}
62+
// #docregion on-init
63+
}
64+
// #enddocregion on-init

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
class Hero {
2+
final int id;
3+
String name;
4+
5+
Hero(this.id, this.name);
6+
}

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import 'package:angular2/core.dart';
2+
3+
import 'hero.dart';
4+
5+
@Component(
6+
selector: 'my-hero-detail',
7+
template: '''
8+
<div *ngIf="hero != null">
9+
<h2>{{hero.name}} details!</h2>
10+
<div><label>id: </label>{{hero.id}}</div>
11+
<div>
12+
<label>name: </label>
13+
<input [(ngModel)]="hero.name" placeholder="name"/>
14+
</div>
15+
</div>
16+
''',
17+
inputs: const ['hero'])
18+
class HeroDetailComponent {
19+
Hero hero;
20+
}

‎public/docs/_examples/toh-4/dart/lib/hero_service.dart‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
// #docplaster
2+
// #docregion
3+
import 'dart:async';
4+
5+
import 'package:angular2/core.dart';
6+
7+
import 'hero.dart';
8+
import 'mock_heroes.dart';
9+
10+
@Injectable()
11+
class HeroService {
12+
//#docregion get-heroes
13+
Future<List<Hero>> getHeroes() async => mockHeroes;
14+
//#enddocregion get-heroes
15+
16+
// See the "Take it slow" appendix
17+
//#docregion get-heroes-slowly
18+
Future<List<Hero>> getHeroesSlowly() {
19+
return new Future.delayed(const Duration(seconds: 2), () => mockHeroes);
20+
}
21+
//#enddocregion get-heroes-slowly
22+
}
23+
// #enddocregion

‎public/docs/_examples/toh-4/dart/lib/hero_service_1.dart‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
// #docplaster
2+
// #docregion final
3+
// #docregion empty-class
4+
import 'package:angular2/core.dart';
5+
6+
// #enddocregion empty-class
7+
import 'hero.dart';
8+
import 'mock_heroes.dart';
9+
10+
// #docregion getHeroes-stub
11+
@Injectable()
12+
class HeroService {
13+
// #enddocregion getHeroes-stub
14+
// #enddocregion empty-class
15+
// #enddocregion final
16+
/*
17+
// #docregion getHeroes-stub
18+
List<Hero> getHeroes() {}
19+
// #enddocregion getHeroes-stub
20+
*/
21+
// #docregion final
22+
List<Hero> getHeroes() => mockHeroes;
23+
// #docregion empty-class
24+
// #docregion getHeroes-stub
25+
}
26+
// #enddocregion getHeroes-stub
27+
// #enddocregion empty-class
28+
// #enddocregion final

‎public/docs/_examples/toh-4/dart/lib/mock_heroes.dart‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
// #docregion
2+
import 'hero.dart';
3+
4+
final List<Hero> mockHeroes = [
5+
new Hero(11, "Mr. Nice"),
6+
new Hero(12, "Narco"),
7+
new Hero(13, "Bombasto"),
8+
new Hero(14, "Celeritas"),
9+
new Hero(15, "Magneta"),
10+
new Hero(16, "RubberMan"),
11+
new Hero(17, "Dynama"),
12+
new Hero(18, "Dr IQ"),
13+
new Hero(19, "Magma"),
14+
new Hero(20, "Tornado")
15+
];
16+
// #enddocregion

‎public/docs/_examples/toh-4/dart/pubspec.yaml‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
name: angular2_tour_of_heroes
2+
version: 0.0.1
3+
environment:
4+
sdk: '>=1.13.0 <2.0.0'
5+
dependencies:
6+
angular2: 2.0.0-beta.15
7+
browser: ^0.10.0
8+
dart_to_js_script_rewriter: ^1.0.1
9+
transformers:
10+
- angular2:
11+
platform_directives:
12+
- package:angular2/common.dart#COMMON_DIRECTIVES
13+
platform_pipes:
14+
- package:angular2/common.dart#COMMON_PIPES
15+
entry_points: web/main.dart

‎public/docs/_examples/toh-4/dart/web/index.html‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<script defer src="main.dart" type="application/dart"></script>
5+
<script defer src="packages/browser/dart.js"></script>
6+
</head>
7+
<body>
8+
<my-app>Loading...</my-app>
9+
</body>
10+
</html>

‎public/docs/_examples/toh-4/dart/web/main.dart‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
// #docregion pt1
2+
import 'package:angular2/platform/browser.dart';
3+
4+
import 'package:angular2_tour_of_heroes/app_component.dart';
5+
6+
main() {
7+
bootstrap(AppComponent);
8+
}
9+
// #enddocregion pt1

0 commit comments

Comments
 (0)