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

docs(tutorial): add dart version of toh tutorial #700

Closed
wants to merge 6 commits into from
Closed

docs(tutorial): add dart version of toh tutorial #700

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
dc54a03
move ts sources of toh tutorial to dart directory
kasperpeulen Jan 14, 2016
b20a451
convert ts toh snippets to dart snippets
kasperpeulen Jan 14, 2016
58113ec
convert toh tutorial for dart (except toh-pt5)
kasperpeulen Jan 14, 2016
ebb411d
remove files that are not used in tutorial
kasperpeulen Jan 15, 2016
8f3964b
review comments zoechi
kasperpeulen Jan 15, 2016
4b3bfa3
serve live examples using a firebase app
kasperpeulen Jan 21, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 43 additions & 0 deletions public/docs/_examples/toh-1/dart-snippets/app_component_snippets_pt1.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
// #docregion show-hero
template: '<h1>{{title}}</h1><h2>{{hero}} details!</h2>'
// #enddocregion show-hero

// #docregion show-hero-2
template: '<h1>{{title}}</h1><h2>{{hero.name}} details!</h2>'
// #enddocregion show-hero-2

// #docregion show-hero-properties
template: '<h1>{{title}}</h1><h2>{{hero.name}} details!</h2><div><label>id: </label>{{hero.id}}</div><div><label>name: </label>{{hero.name}}</div>'
// #enddocregion show-hero-properties

// #docregion multi-line-strings
template: '''
<h1>{{title}}</h1>
<h2>{{hero.name}} details!</h2>
<div><label>id: </label>{{hero.id}}</div>
<div><label>name: </label>{{hero.name}}</div>
'''
// #enddocregion multi-line-strings

// #docregion editing-Hero
template:'''
<h1>{{title}}</h1>
<h2>{{hero.name}} details!</h2>
<div><label>id: </label>{{hero.id}}</div>
<div>
<label>name: </label>
<div><input value="{{hero.name}}" placeholder="name"></div>
</div>
'''
// #enddocregion editing-Hero

// #docregion app-component-1
class AppComponent {
String title = 'Tour of Heroes';
Hero hero = 'Windstorm';
}
// #enddocregion app-component-1

// #docregion hero-property-1
Hero hero = new Hero(1, 'Windstorm');
// #enddocregion hero-property-1
29 changes: 29 additions & 0 deletions public/docs/_examples/toh-1/dart/lib/app_component.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
// #docregion pt1
import 'package:angular2/core.dart';

// #docregion hero-class-1
class Hero {
final int id;
String name;

Hero(this.id, this.name);
}
// #enddocregion hero-class-1

@Component(
selector: 'my-app',
template: '''
<h1>{{title}}</h1>
<h2>{{hero.name}} details!</h2>
<div><label>id: </label>{{hero.id}}</div>
<div>
<label>name: </label>
<div><input [(ngModel)]="hero.name" placeholder="name"></div>
</div>
''')
class AppComponent {
String title = 'Tour of Heroes';
Hero hero = new Hero(1, 'Windstorm');
}

// #enddocregion pt1
15 changes: 15 additions & 0 deletions public/docs/_examples/toh-1/dart/pubspec.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
name: angular2_tour_of_heroes
version: 0.0.1
environment:
sdk: '>=1.13.0 <2.0.0'
dependencies:
angular2: 2.0.0-beta.1
browser: ^0.10.0
dart_to_js_script_rewriter: ^0.1.0+4
transformers:
- angular2:
platform_directives:
- package:angular2/common.dart#COMMON_DIRECTIVES
platform_pipes:
- package:angular2/common.dart#COMMON_PIPES
entry_points: web/main.dart
10 changes: 10 additions & 0 deletions public/docs/_examples/toh-1/dart/web/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<!DOCTYPE html>
<html>
<head>
<script defer src="main.dart" type="application/dart"></script>
<script defer src="packages/browser/dart.js"></script>
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>
9 changes: 9 additions & 0 deletions public/docs/_examples/toh-1/dart/web/main.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
// #docregion pt1
import 'package:angular2/bootstrap.dart';

import 'package:angular2_tour_of_heroes/app_component.dart';

main() {
bootstrap(AppComponent);
}
// #enddocregion pt1
69 changes: 69 additions & 0 deletions public/docs/_examples/toh-2/dart-snippets/app_component_snippets_pt2.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
// #docregion ng-for
<li *ngFor="#hero of heroes">
<span class="badge">{{hero.id}}</span> {{hero.name}}
</li>
// #enddocregion ng-for

// #docregion heroes-styled
<h2>My Heroes</h2>
<ul class="heroes">
<li *ngFor="#hero of heroes">
<span class="badge">{{hero.id}}</span> {{hero.name}}
</li>
</ul>
// #enddocregion heroes-styled

// #docregion selectedHero-click
<li *ngFor="#hero of heroes" (click)="onSelect(hero)">
<span class="badge">{{hero.id}}</span> {{hero.name}}
</li>
// #enddocregion selectedHero-click

// #docregion selectedHero-details
<h2>{{selectedHero.name}} details!</h2>
<div><label>id: </label>{{selectedHero.id}}</div>
<div>
<label>name: </label>
<input [(ngModel)]="selectedHero.name" placeholder="name">
</div>
// #enddocregion selectedHero-details

// #docregion ng-if
<div *ngIf="selectedHero != null">
<h2>{{selectedHero.name}} details!</h2>
<div><label>id: </label>{{selectedHero.id}}</div>
<div>
<label>name: </label>
<input [(ngModel)]="selectedHero.name" placeholder="name">
</div>
</div>
// #enddocregion ng-if

// #docregion hero-array-1
final List<Hero> heroes = mockHeroes;
// #enddocregion hero-array-1

// #docregion heroes-template-1
<h2>My Heroes</h2>
<ul class="heroes">
<li>
<!-- each hero goes here -->
</li>
</ul>
// #enddocregion heroes-template-1

// #docregion heroes-ngfor-1
<li *ngFor="#hero of heroes">
// #enddocregion heroes-ngfor-1

// #docregion class-selected-1
[class.selected]="hero == selectedHero"
// #enddocregion class-selected-1

// #docregion class-selected-2
<li *ngFor="#hero of heroes"
[class.selected]="hero == selectedHero"
(click)="onSelect(hero)">
<span class="badge">{{hero.id}}</span> {{hero.name}}
</li>
// #enddocregion class-selected-2
114 changes: 114 additions & 0 deletions public/docs/_examples/toh-2/dart/lib/app_component.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,114 @@
// #docregion pt2
import 'package:angular2/core.dart';

class Hero {
final int id;
String name;

Hero(this.id, this.name);
}

@Component(
selector: 'my-app',
template: '''
<h1>{{title}}</h1>
<h2>My Heroes</h2>
<ul class="heroes">
<li *ngFor="#hero of heroes"
[class.selected]="hero == selectedHero"
(click)="onSelect(hero)">
<span class="badge">{{hero.id}}</span> {{hero.name}}
</li>
</ul>
<div *ngIf="selectedHero != null">
<h2>{{selectedHero.name}} details!</h2>
<div><label>id: </label>{{selectedHero.id}}</div>
<div>
<label>name: </label>
<input [(ngModel)]="selectedHero.name" placeholder="name"/>
</div>
</div>
''',
// #docregion styles-1
styles: const [
'''
.selected {
background-color: #CFD8DC !important;
color: white;
}
.heroes {
margin: 0 0 2em 0;
list-style-type: none;
padding: 0;
width: 10em;
}
.heroes li {
cursor: pointer;
position: relative;
left: 0;
background-color: #EEE;
margin: .5em;
padding: .3em 0em;
height: 1.6em;
border-radius: 4px;
}
.heroes li.selected:hover {
color: white;
}
.heroes li:hover {
color: #607D8B;
background-color: #EEE;
left: .1em;
}
.heroes .text {
position: relative;
top: -3px;
}
.heroes .badge {
display: inline-block;
font-size: small;
color: white;
padding: 0.8em 0.7em 0em 0.7em;
background-color: #607D8B;
line-height: 1em;
position: relative;
left: -1px;
top: -4px;
height: 1.8em;
margin-right: .8em;
border-radius: 4px 0px 0px 4px;
}
'''
])
// #enddocregion styles-1
class AppComponent {
final String title = 'Tour of Heroes';
final List<Hero> heroes = mockHeroes;
// #docregion selected-hero-1
Hero selectedHero;
// #enddocregion selected-hero-1

// #docregion on-select-1
onSelect(Hero hero) {
selectedHero = hero;
}
// #enddocregion on-select-1
}
// #enddocregion pt2

// #docregion hero-array
final List<Hero> mockHeroes = [
new Hero(11, "Mr. Nice"),
new Hero(12, "Narco"),
new Hero(13, "Bombasto"),
new Hero(14, "Celeritas"),
new Hero(15, "Magneta"),
new Hero(16, "RubberMan"),
new Hero(17, "Dynama"),
new Hero(18, "Dr IQ"),
new Hero(19, "Magma"),
new Hero(20, "Tornado")
];
// #enddocregion hero-array

// #enddocregion pt2
15 changes: 15 additions & 0 deletions public/docs/_examples/toh-2/dart/pubspec.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
name: angular2_tour_of_heroes
version: 0.0.1
environment:
sdk: '>=1.13.0 <2.0.0'
dependencies:
angular2: 2.0.0-beta.1
browser: ^0.10.0
dart_to_js_script_rewriter: ^0.1.0+4
transformers:
- angular2:
platform_directives:
- package:angular2/common.dart#COMMON_DIRECTIVES
platform_pipes:
- package:angular2/common.dart#COMMON_PIPES
entry_points: web/main.dart
10 changes: 10 additions & 0 deletions public/docs/_examples/toh-2/dart/web/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<!DOCTYPE html>
<html>
<head>
<script defer src="main.dart" type="application/dart"></script>
<script defer src="packages/browser/dart.js"></script>
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>
9 changes: 9 additions & 0 deletions public/docs/_examples/toh-2/dart/web/main.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
// #docregion pt2
import 'package:angular2/bootstrap.dart';

import 'package:angular2_tour_of_heroes/app_component.dart';

main() {
bootstrap(AppComponent);
}
// #enddocregion pt2
Loading