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

docs(toh-5): TS/Dart review, and Dart resync #2115

Merged
merged 5 commits into from
Aug 17, 2016
Merged

docs(toh-5): TS/Dart review, and Dart resync #2115

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c52f4bb
docs(toh-5): review and update/resync Dart
chalin Aug 13, 2016
647e721
docs(toh-5): edits after doing tutorial
chalin Aug 13, 2016
b22d186
post-review changes
chalin Aug 15, 2016
e9681e7
more post-review changes
chalin Aug 17, 2016
9b079b7
toh-6 cache update
chalin Aug 17, 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
4 changes: 2 additions & 2 deletions public/_includes/_util-fns.jade
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -222,8 +222,8 @@ script.
- // E.g. of a project relative path is 'app/main.ts'
- if (ex.title === null || ex.title === undefined) {
- // Title is not given so take it to be ex.filePath.
- // Is title like styles.1.css? Then drop the '.1' qualifier:
- var matches = ex.filePath.match(/^(.*)\.\d(\.\w+)$/);
- // Title like styles.1.css or foo_1.dart? Then drop the '.1' or '_1' qualifier:
- var matches = ex.filePath.match(/^(.*)[\._]\d(\.\w+)$/);
- ex.title = matches ? matches[1] + matches[2] : ex.filePath;
- }
- ex.filePath = getExampleName() + '/' + _docsFor + '/' + ex.filePath;
Expand Down
5 changes: 3 additions & 2 deletions public/docs/_examples/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
/* #docregion , quickstart */
/* #docregion , quickstart, toh */
/* Master Styles */
h1 {
color: #369;
Expand All @@ -18,6 +18,7 @@ body, input[text], button {
color: #888;
font-family: Cambria, Georgia;
}
/* #enddocregion toh */
a {
cursor: pointer;
cursor: hand;
Expand Down Expand Up @@ -137,7 +138,7 @@ nav a.active {
margin-right: .8em;
border-radius: 4px 0 0 4px;
}

/* #docregion toh */
/* everywhere else */
* {
font-family: Arial, Helvetica, sans-serif;
Expand Down
34 changes: 20 additions & 14 deletions public/docs/_examples/toh-5/dart/lib/app_component.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,45 +1,51 @@
// #docplaster
// #docregion
import 'package:angular2/core.dart';
// #docregion import-router
import 'package:angular2/router.dart';
// #enddocregion import-router

import 'package:angular2_tour_of_heroes/heroes_component.dart';
import 'package:angular2_tour_of_heroes/hero_service.dart';
import 'package:angular2_tour_of_heroes/dashboard_component.dart';
// #docregion hero-detail-import
import 'package:angular2_tour_of_heroes/hero_detail_component.dart';
// #enddocregion hero-detail-import
import 'dashboard_component.dart';
import 'hero_detail_component.dart';
import 'hero_service.dart';
import 'heroes_component.dart';

@Component(
selector: 'my-app',
// #docregion template
// #docregion template, template-v3
template: '''
<h1>{{title}}</h1>
<nav>
<a [routerLink]="['Dashboard']">Dashboard</a>
<a [routerLink]="['Heroes']">Heroes</a>
</nav>
<router-outlet></router-outlet>''',
// #enddocregion template
// #docregion style-urls
// #enddocregion template, template-v3
// #docregion styleUrls
styleUrls: const ['app_component.css'],
// #enddocregion style-urls
// #enddocregion styleUrls
// #docregion directives-and-providers
directives: const [ROUTER_DIRECTIVES],
providers: const [HeroService, ROUTER_PROVIDERS])
// #enddocregion directives-and-providers
// #docregion heroes
@RouteConfig(const [
// #docregion dashboard-route
// #enddocregion heroes
// #docregion dashboard
const Route(
path: '/dashboard',
name: 'Dashboard',
component: DashboardComponent,
useAsDefault: true),
// #enddocregion dashboard-route
// #docregion hero-detail-route
// #enddocregion dashboard
// #docregion hero-detail
const Route(
path: '/detail/:id', name: 'HeroDetail', component: HeroDetailComponent),
// #enddocregion hero-detail-route
// #enddocregion hero-detail
// #docregion heroes
const Route(path: '/heroes', name: 'Heroes', component: HeroesComponent)
])
// #enddocregion heroes
class AppComponent {
String title = 'Tour of Heroes';
}
33 changes: 24 additions & 9 deletions public/docs/_examples/toh-5/dart/lib/app_component_1.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,40 @@
// #docplaster
// #docregion
// #docregion , v2
import 'package:angular2/core.dart';
// #enddocregion
import 'package:angular2/router.dart'; // for testing only
// #enddocregion ,
// #docregion v2
import 'package:angular2/router.dart';
// #docregion

import 'hero_service.dart';
import 'heroes_component.dart';

// #enddocregion v2
@Component(
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wondered about having two @Component annotations for a single class. Sure enough, when I try to pub serve or pub build this, I get a build error:

Build error:
Transform DirectiveProcessor on angular2_tour_of_heroes|lib/app_component_1.dart threw error: Only one Directive is allowed per class. Found unexpected "@Component(selector: 'my-app', template: '''
      <h1>{{title}}</h1>
      <a [routerLink]="['Heroes']">Heroes</a>
      <router-outlet></router-outlet>''', directives: const [HeroesComponent], providers: const [HeroService])".
@Component(selector: 'my-app', template: '''
      <h1>{{title}}</h1>
     ...

Does the serve/build work without errors for you?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixing that now.

selector: 'my-app',
template: '''
<h1>{{title}}</h1>
<my-heroes></my-heroes>''',
directives: const [HeroesComponent],
providers: const [
// #enddocregion
ROUTER_PROVIDERS,
// #docregion
HeroService
])
providers: const [HeroService])
// #enddocregion ,
class Bogus {}

// #docregion v2
@Component(
selector: 'my-app',
// #docregion template-v2
template: '''
<h1>{{title}}</h1>
<a [routerLink]="['Heroes']">Heroes</a>
<router-outlet></router-outlet>''',
// #enddocregion template-v2
directives: const [ROUTER_DIRECTIVES],
providers: const [HeroService, ROUTER_PROVIDERS])
@RouteConfig(const [
const Route(path: '/heroes', name: 'Heroes', component: HeroesComponent)
])
// #docregion ,
class AppComponent {
String title = 'Tour of Heroes';
}
31 changes: 0 additions & 31 deletions public/docs/_examples/toh-5/dart/lib/app_component_2.dart
View file
Open in desktop

This file was deleted.

8 changes: 4 additions & 4 deletions public/docs/_examples/toh-5/dart/lib/dashboard_component.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,9 @@ import 'hero_service.dart';

@Component(
selector: 'my-dashboard',
// #docregion template-url
// #docregion templateUrl
templateUrl: 'dashboard_component.html',
// #enddocregion template-url
// #enddocregion templateUrl
// #docregion css
styleUrls: const ['dashboard_component.css']
// #enddocregion css
Expand All @@ -35,13 +35,13 @@ class DashboardComponent implements OnInit {
heroes = (await _heroService.getHeroes()).skip(1).take(4).toList();
}

// #docregion goto-detail
// #docregion gotoDetail
void gotoDetail(Hero hero) {
var link = [
'HeroDetail',
{'id': hero.id.toString()}
];
_router.navigate(link);
}
// #enddocregion goto-detail
// #enddocregion gotoDetail
}
2 changes: 1 addition & 1 deletion public/docs/_examples/toh-5/dart/lib/dashboard_component_2.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,5 +22,5 @@ class DashboardComponent implements OnInit {
heroes = (await _heroService.getHeroes()).skip(1).take(4).toList();
}

gotoDetail() {/* not implemented yet */}
gotoDetail(Hero hero) {/* not implemented yet */}
}
32 changes: 14 additions & 18 deletions public/docs/_examples/toh-5/dart/lib/hero_detail_component.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,30 +1,28 @@
// #docplaster
// #docregion , v2
// #docregion added-imports
import 'dart:async';
import 'dart:html';
import 'dart:html' show window;

// #docregion import-oninit
// #enddocregion added-imports
import 'package:angular2/core.dart';
// #enddocregion import-oninit
// #docregion import-route-params
// #docregion added-imports
import 'package:angular2/router.dart';
// #enddocregion import-route-params

// #enddocregion added-imports
import 'hero.dart';
// #docregion import-hero-service
// #docregion added-imports
import 'hero_service.dart';
// #enddocregion import-hero-service
// #enddocregion added-imports

// #docregion extract-template
@Component(
selector: 'my-hero-detail',
// #docregion template-url
// #docregion templateUrl
templateUrl: 'hero_detail_component.html',
// #enddocregion template-url, v2
// #enddocregion templateUrl, v2
styleUrls: const ['hero_detail_component.css']
// #docregion v2
)
// #enddocregion extract-template
// #docregion implement
class HeroDetailComponent implements OnInit {
// #enddocregion implement
Expand All @@ -36,19 +34,17 @@ class HeroDetailComponent implements OnInit {
HeroDetailComponent(this._heroService, this._routeParams);
// #enddocregion ctor

// #docregion ng-oninit
// #docregion ngOnInit
Future<Null> ngOnInit() async {
// #docregion get-id
var idString = _routeParams.get('id');
var id = int.parse(idString, onError: (_) => null);
// #enddocregion get-id
var id = int.parse(idString ?? '', onError: (_) => null);
if (id != null) hero = await (_heroService.getHero(id));
}
// #enddocregion ng-oninit
// #enddocregion ngOnInit

// #docregion go-back
// #docregion goBack
void goBack() {
window.history.back();
}
// #enddocregion go-back
// #enddocregion goBack
}
4 changes: 2 additions & 2 deletions public/docs/_examples/toh-5/dart/lib/hero_service.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,8 @@ class HeroService {
const Duration(seconds: 2), () => mockHeroes);
}

// #docregion get-hero
// #docregion getHero
Future<Hero> getHero(int id) async =>
(await getHeroes()).firstWhere((hero) => hero.id == id);
// #enddocregion get-hero
// #enddocregion getHero
}
21 changes: 11 additions & 10 deletions public/docs/_examples/toh-5/dart/lib/heroes_component.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,27 +6,28 @@ import 'package:angular2/core.dart';
import 'package:angular2/router.dart';

import 'hero.dart';
import 'hero_detail_component.dart';
import 'hero_service.dart';

// #docregion metadata, heroes-component-renaming
// #docregion metadata, renaming
@Component(
selector: 'my-heroes',
// #enddocregion heroes-component-renaming
// #enddocregion renaming
templateUrl: 'heroes_component.html',
styleUrls: const ['heroes_component.css'],
directives: const [HeroDetailComponent])
// #docregion heroes-component-renaming
// #enddocregion heroes-component-renaming, metadata
// #docregion class, heroes-component-renaming
styleUrls: const ['heroes_component.css']
// #docregion renaming
)
// #enddocregion metadata
// #docregion class
class HeroesComponent implements OnInit {
// #enddocregion heroes-component-renaming
// #enddocregion renaming
final Router _router;
final HeroService _heroService;
List<Hero> heroes;
Hero selectedHero;

// #docregion renaming
HeroesComponent(this._heroService, this._router);
// #enddocregion renaming

Future<Null> getHeroes() async {
heroes = await _heroService.getHeroes();
Expand All @@ -44,5 +45,5 @@ class HeroesComponent implements OnInit {
'HeroDetail',
{'id': selectedHero.id.toString()}
]);
// #docregion heroes-component-renaming
// #docregion renaming
}
24 changes: 0 additions & 24 deletions public/docs/_examples/toh-5/dart/web/styles_1.css
View file
Open in desktop

This file was deleted.

Loading