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

Commit adb4093

Browse files
kwalrathkwalrath
committed
docs(dart): convert toh-3 to Dart
closes #1071
1 parent cac5c89 commit adb4093

File tree

8 files changed

+433
-9
lines changed

8 files changed

+433
-9
lines changed

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

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

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

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

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

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
// #docplaster
2+
// #docregion
3+
// #docregion v1
4+
import 'package:angular2/core.dart';
5+
6+
// #enddocregion v1
7+
// #docregion hero-import
8+
import 'hero.dart';
9+
// #enddocregion hero-import
10+
11+
// #docregion v1
12+
@Component(
13+
selector: 'my-hero-detail',
14+
// #enddocregion v1
15+
// #docregion template
16+
template: '''
17+
<div *ngIf="hero != null">
18+
<h2>{{hero.name}} details!</h2>
19+
<div><label>id: </label>{{hero.id}}</div>
20+
<div>
21+
<label>name: </label>
22+
<input [(ngModel)]="hero.name" placeholder="name">
23+
</div>
24+
</div>
25+
'''
26+
// #enddocregion template
27+
// #docregion v1
28+
)
29+
class HeroDetailComponent {
30+
// #enddocregion v1
31+
// #docregion inputs
32+
@Input()
33+
// #docregion hero
34+
Hero hero;
35+
// #enddocregion hero
36+
// #enddocregion inputs
37+
// #docregion v1
38+
}
39+
// #enddocregion v1

‎public/docs/_examples/toh-3/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.14
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-3/dart/web/index.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Angular 2 Tour of Heroes</title>
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<link rel="stylesheet" href="styles.css">
7+
8+
<script defer src="main.dart" type="application/dart"></script>
9+
<script defer src="packages/browser/dart.js"></script>
10+
</head>
11+
<body>
12+
<my-app>Loading...</my-app>
13+
</body>
14+
</html>

‎public/docs/_examples/toh-3/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/bootstrap.dart';
3+
4+
import 'package:angular2_tour_of_heroes/app_component.dart';
5+
6+
main() {
7+
bootstrap(AppComponent);
8+
}
9+
// #enddocregion pt1

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ include ../_util-fns
3535
.file main.dart
3636
.file pubspec.yaml
3737
:marked
38-
### Keep the app transpiling and running
38+
### Keep the app compiling and running
3939
We want to start the Dart compiler, have it watch for changes, and start our server. We'll do this by typing
4040

4141
code-example(format="." language="bash").

0 commit comments

Comments
 (0)