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

Commit cac5c89

Browse files
kwalrathkwalrath
committed
docs(toh/dart): convert toh-2 to dart (#1065)
1 parent b3d5f2b commit cac5c89

File tree

6 files changed

+520
-8
lines changed

6 files changed

+520
-8
lines changed

‎public/docs/_examples/toh-2/dart-snippets/app_component_snippets_pt2.dart

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
// #docregion ng-for
2+
<li *ngFor="#hero of heroes">
3+
<span class="badge">{{hero.id}}</span> {{hero.name}}
4+
</li>
5+
// #enddocregion ng-for
6+
7+
// #docregion heroes-styled
8+
<h2>My Heroes</h2>
9+
<ul class="heroes">
10+
<li *ngFor="#hero of heroes">
11+
<span class="badge">{{hero.id}}</span> {{hero.name}}
12+
</li>
13+
</ul>
14+
// #enddocregion heroes-styled
15+
16+
// #docregion selectedHero-click
17+
<li *ngFor="#hero of heroes" (click)="onSelect(hero)">
18+
<span class="badge">{{hero.id}}</span> {{hero.name}}
19+
</li>
20+
// #enddocregion selectedHero-click
21+
22+
// #docregion selectedHero-details
23+
<h2>{{selectedHero.name}} details!</h2>
24+
<div><label>id: </label>{{selectedHero.id}}</div>
25+
<div>
26+
<label>name: </label>
27+
<input [(ngModel)]="selectedHero.name" placeholder="name">
28+
</div>
29+
// #enddocregion selectedHero-details
30+
31+
// #docregion ng-if
32+
<div *ngIf="selectedHero != null">
33+
<h2>{{selectedHero.name}} details!</h2>
34+
<div><label>id: </label>{{selectedHero.id}}</div>
35+
<div>
36+
<label>name: </label>
37+
<input [(ngModel)]="selectedHero.name" placeholder="name">
38+
</div>
39+
</div>
40+
// #enddocregion ng-if
41+
42+
// #docregion hero-array-1
43+
final List<Hero> heroes = mockHeroes;
44+
// #enddocregion hero-array-1
45+
46+
// #docregion heroes-template-1
47+
<h2>My Heroes</h2>
48+
<ul class="heroes">
49+
<li>
50+
<!-- each hero goes here -->
51+
</li>
52+
</ul>
53+
// #enddocregion heroes-template-1
54+
55+
// #docregion heroes-ngfor-1
56+
<li *ngFor="#hero of heroes">
57+
// #enddocregion heroes-ngfor-1
58+
59+
// #docregion class-selected-1
60+
[class.selected]="hero == selectedHero"
61+
// #enddocregion class-selected-1
62+
63+
// #docregion class-selected-2
64+
<li *ngFor="#hero of heroes"
65+
[class.selected]="hero == selectedHero"
66+
(click)="onSelect(hero)">
67+
<span class="badge">{{hero.id}}</span> {{hero.name}}
68+
</li>
69+
// #enddocregion class-selected-2

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

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

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

+15
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.1
7+
browser: ^0.10.0
8+
dart_to_js_script_rewriter: ^0.1.0+4
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-2/dart/web/index.html

+14
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-2/dart/web/main.dart

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
// #docregion pt2
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 pt2

0 commit comments

Comments
 (0)