honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

docs(toh-5/dart): review edits and code cleanup (#1643)

This commit is contained in:
Patrice Chalin 2016-06-15 07:46:26 -07:00 committed by Kathy Walrath
parent 7ee6e63a6f
commit 6e5d8e6491
19 changed files with 526 additions and 502 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/docs/_examples/toh-4/dart/lib/app_component.dart
View File

@ -13,6 +13,7 @@ import 'hero_service.dart';
@Component(
selector: 'my-app',
// #docregion template
template: '''
<h1>{{title}}</h1>
<h2>My Heroes</h2>
@ -25,6 +26,7 @@ import 'hero_service.dart';
</ul>
<my-hero-detail [hero]="selectedHero"></my-hero-detail>
''',
// #enddocregion template
styles: const [
'''
.selected {

4
public/docs/_examples/toh-5/dart/lib/app_component.css
View File

@ -1,5 +1,4 @@
/* #docplaster */
/* #docregion css */
/* #docregion */
h1 {
font-size: 1.2em;
color: #999;
@ -28,4 +27,3 @@ nav a:hover {
nav a.router-link-active {
color: #039be5;
}
/* #enddocregion css */

9
public/docs/_examples/toh-5/dart/lib/app_component.dart
View File

@ -27,20 +27,19 @@ import 'package:angular2_tour_of_heroes/hero_detail_component.dart';
directives: const [ROUTER_DIRECTIVES],
providers: const [HeroService, ROUTER_PROVIDERS])
@RouteConfig(const [
// #docregion dashboard-route
// #docregion dashboard-route
const Route(
path: '/dashboard',
name: 'Dashboard',
component: DashboardComponent,
useAsDefault: true),
// #enddocregion dashboard-route
// #docregion hero-detail-route
// #enddocregion dashboard-route
// #docregion hero-detail-route
const Route(
path: '/detail/:id', name: 'HeroDetail', component: HeroDetailComponent),
// #enddocregion hero-detail-route
// #enddocregion hero-detail-route
const Route(path: '/heroes', name: 'Heroes', component: HeroesComponent)
])
class AppComponent {
String title = 'Tour of Heroes';
}
// #enddocregion

5
public/docs/_examples/toh-5/dart/lib/app_component_1.dart
View File

@ -15,12 +15,11 @@ import 'heroes_component.dart';
<my-heroes></my-heroes>''',
directives: const [HeroesComponent],
providers: const [
// #enddocregion
// #enddocregion
ROUTER_PROVIDERS,
// #docregion
// #docregion
HeroService
])
class AppComponent {
String title = 'Tour of Heroes';
}
// #enddocregion

5
public/docs/_examples/toh-5/dart/lib/app_component_2.dart
View File

@ -10,12 +10,12 @@ import 'heroes_component.dart';
@Component(
selector: 'my-app',
// #docregion template
// #docregion template
template: '''
<h1>{{title}}</h1>
<a [routerLink]="['Heroes']">Heroes</a>
<router-outlet></router-outlet>''',
// #enddocregion template
// #enddocregion template
// #docregion directives-and-providers
directives: const [ROUTER_DIRECTIVES],
providers: const [ROUTER_PROVIDERS, HeroService]
@ -29,4 +29,3 @@ import 'heroes_component.dart';
class AppComponent {
String title = 'Tour of Heroes';
}
// #enddocregion

2
public/docs/_examples/toh-5/dart/lib/dashboard_component.css
View File

@ -1,4 +1,3 @@
/* #docplaster */
/* #docregion */
[class*='col-'] {
float: left;
@ -60,4 +59,3 @@ h4 {
min-width: 60px;
}
}
/* #enddocregion */

18
public/docs/_examples/toh-5/dart/lib/dashboard_component.dart
View File

@ -1,5 +1,7 @@
// #docplaster
// #docregion
import 'dart:async';
import 'package:angular2/core.dart';
// #docregion import-router
import 'package:angular2/router.dart';
@ -16,22 +18,25 @@ import 'hero_service.dart';
// #docregion css
styleUrls: const ['dashboard_component.css']
// #enddocregion css
)
)
// #docregion component
class DashboardComponent implements OnInit {
List<Hero> heroes;
// #docregion ctor
// #docregion ctor
final Router _router;
final HeroService _heroService;
DashboardComponent(this._heroService, this._router);
// #enddocregion ctor
ngOnInit() async =>
heroes = (await _heroService.getHeroes()).getRange(1, 5).toList();
// #enddocregion ctor
Future<Null> ngOnInit() async {
heroes = (await _heroService.getHeroes()).getRange(1, 5).toList();
}
// #docregion goto-detail
gotoDetail(Hero hero) {
void gotoDetail(Hero hero) {
var link = [
'HeroDetail',
{'id': hero.id.toString()}
@ -40,4 +45,3 @@ class DashboardComponent implements OnInit {
}
// #enddocregion goto-detail
}
// #enddocregion

4
public/docs/_examples/toh-5/dart/lib/dashboard_component.html
View File

@ -1,9 +1,9 @@
<!-- #docregion -->
<h3>Top Heroes</h3>
<div class="grid grid-pad">
<!-- #docregion click -->
<!-- #docregion click -->
<div *ngFor="let hero of heroes" (click)="gotoDetail(hero)" class="col-1-4" >
<!-- #enddocregion click -->
<!-- #enddocregion click -->
<div class="module hero">
<h4>{{hero.name}}</h4>
</div>

13
public/docs/_examples/toh-5/dart/lib/dashboard_component_2.dart
View File

@ -1,5 +1,7 @@
// #docplaster
// #docregion imports
import 'dart:async';
import 'package:angular2/core.dart';
import 'hero.dart';
@ -9,17 +11,16 @@ import 'hero_service.dart';
// #docregion component
@Component(
selector: 'my-dashboard',
templateUrl: 'dashboard_component.html'
)
templateUrl: 'dashboard_component.html')
class DashboardComponent implements OnInit {
List<Hero> heroes;
final HeroService _heroService;
DashboardComponent(this._heroService);
ngOnInit() async =>
heroes = (await _heroService.getHeroes()).getRange(1, 5).toList();
Future<Null> ngOnInit() async {
heroes = (await _heroService.getHeroes()).getRange(1, 5).toList();
}
gotoDetail(){ /* not implemented yet */}
gotoDetail() {/* not implemented yet */}
}
// #enddocregion component

33
public/docs/_examples/toh-5/dart/lib/hero_detail_component.dart
View File

@ -1,6 +1,7 @@
// #docplaster
// #docregion
// #docregion v2
import 'dart:async';
import 'dart:html';
// #docregion import-oninit
@ -20,37 +21,35 @@ import 'hero_service.dart';
selector: 'my-hero-detail',
// #docregion template-url
templateUrl: 'hero_detail_component.html',
// #enddocregion template-url
// #enddocregion v2
// #enddocregion template-url, v2
styleUrls: const ['hero_detail_component.css']
// #docregion v2
)
// #docregion v2
)
// #enddocregion extract-template
// #docregion implement
class HeroDetailComponent implements OnInit {
// #enddocregion implement
// #enddocregion implement
Hero hero;
// #docregion ctor
// #docregion ctor
final HeroService _heroService;
final RouteParams _routeParams;
HeroDetailComponent(this._heroService, this._routeParams);
// #enddocregion ctor
// #enddocregion ctor
// #docregion ng-oninit
ngOnInit() async {
// #docregion ng-oninit
Future<Null> ngOnInit() async {
// #docregion get-id
var id = int.parse(_routeParams.get('id'));
var idString = _routeParams.get('id');
var id = int.parse(idString, onError: (_) => null);
// #enddocregion get-id
hero = await (_heroService.getHero(id));
if (id != null) hero = await (_heroService.getHero(id));
}
// #enddocregion ng-oninit
// #enddocregion ng-oninit
// #docregion go-back
goBack() {
// #docregion go-back
void goBack() {
window.history.back();
}
// #enddocregion go-back
// #enddocregion go-back
}
// #enddocregion v2
// #enddocregion

14
public/docs/_examples/toh-5/dart/lib/hero_service.dart
View File

@ -1,5 +1,3 @@
// #docplaster
// #docregion
import 'dart:async';
@ -10,18 +8,16 @@ import 'mock_heroes.dart';
@Injectable()
class HeroService {
Future<List<Hero>> getHeroes() async => HEROES;
Future<List<Hero>> getHeroes() async => mockHeroes;
// See the "Take it slow" appendix
Future<List<Hero>> getHeroesSlowly() {
return new Future<List<Hero>>.delayed(
const Duration(seconds: 2), () => HEROES // 2 seconds
);
const Duration(seconds: 2), () => mockHeroes);
}
//#docregion get-hero
// #docregion get-hero
Future<Hero> getHero(int id) async =>
HEROES.where((hero) => hero.id == id).first;
//#enddocregion get-hero
(await getHeroes()).firstWhere((hero) => hero.id == id);
// #enddocregion get-hero
}
// #enddocregion

24
public/docs/_examples/toh-5/dart/lib/heroes_component.dart
View File

@ -9,22 +9,19 @@ import 'hero.dart';
import 'hero_detail_component.dart';
import 'hero_service.dart';
// #docregion metadata
// #docregion heroes-component-renaming
// #docregion metadata, heroes-component-renaming
@Component(
selector: 'my-heroes',
// #enddocregion heroes-component-renaming
// #enddocregion heroes-component-renaming
templateUrl: 'heroes_component.html',
styleUrls: const ['heroes_component.css'],
directives: const [HeroDetailComponent]
// #docregion heroes-component-renaming
// #docregion heroes-component-renaming
)
// #enddocregion heroes-component-renaming
// #enddocregion metadata
// #docregion class
// #docregion heroes-component-renaming
// #enddocregion heroes-component-renaming, metadata
// #docregion class, heroes-component-renaming
class HeroesComponent implements OnInit {
// #enddocregion heroes-component-renaming
// #enddocregion heroes-component-renaming
final Router _router;
final HeroService _heroService;
List<Hero> heroes;
@ -32,7 +29,7 @@ class HeroesComponent implements OnInit {
HeroesComponent(this._heroService, this._router);
Future getHeroes() async {
Future<Null> getHeroes() async {
heroes = await _heroService.getHeroes();
}
@ -42,10 +39,7 @@ class HeroesComponent implements OnInit {
void onSelect(Hero hero) { selectedHero = hero; }
Future gotoDetail() =>
Future<Null> gotoDetail() =>
_router.navigate(['HeroDetail', {'id': selectedHero.id.toString()}]);
// #docregion heroes-component-renaming
// #docregion heroes-component-renaming
}
// #enddocregion heroes-component-renaming
// #enddocregion class
// #enddocregion

2
public/docs/_examples/toh-5/dart/lib/heroes_component.html
View File

@ -17,5 +17,3 @@
</h2>
<button (click)="gotoDetail()">View Details</button>
</div>
<!-- #enddocregion mini-detail -->
<!-- #enddocregion -->

2
public/docs/_examples/toh-5/dart/lib/mock_heroes.dart
View File

@ -1,6 +1,6 @@
import 'hero.dart';
final List<Hero> HEROES = [
final List<Hero> mockHeroes = [
new Hero(11, 'Mr. Nice'),
new Hero(12, 'Narco'),
new Hero(13, 'Bombasto'),

9
public/docs/_examples/toh-5/dart/web/index.html
View File

@ -1,10 +1,11 @@
<!DOCTYPE html>
<html>
<!-- #docregion head -->
<!-- #docregion base-href -->
<!-- #docregion head, base-href -->
<head>
<base href="/"> <!-- For testing using pub serve directly -->
<!-- base href="/dart/web/" --> <!-- For testing in WebStorm -->
<!-- For testing using pub serve directly use: -->
<base href="/">
<!-- For testing in WebStorm use: -->
<!-- base href="/dart/web/" -->
<!-- #enddocregion base-href -->
<title>Angular 2 Tour of Heroes</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

2
public/docs/_examples/toh-5/dart/web/main.dart
View File

@ -2,6 +2,6 @@ import 'package:angular2/platform/browser.dart';
import 'package:angular2_tour_of_heroes/app_component.dart';
main() {
void main() {
bootstrap(AppComponent);
}

24
public/docs/_examples/toh-5/dart/web/styles_1.css Normal file
View File

@ -0,0 +1,24 @@
/* #docregion toh-excerpt */
/* Master Styles */
h1 {
color: #369;
font-family: Arial, Helvetica, sans-serif;
font-size: 250%;
}
h2, h3 {
color: #444;
font-family: Arial, Helvetica, sans-serif;
font-weight: lighter;
}
body {
margin: 2em;
}
body, input[text], button {
color: #888;
font-family: Cambria, Georgia;
}
/* . . . */
/* everywhere else */
* {
font-family: Arial, Helvetica, sans-serif;
}

821
public/docs/dart/latest/tutorial/toh-pt5.jade
View File

File diff suppressed because it is too large Load Diff

35
public/docs/ts/latest/tutorial/toh-pt5.jade
View File

@ -63,13 +63,13 @@ code-example(language="bash").
The application runs and updates automatically as we continue to build the Tour of Heroes.
## Action plan
Here's our plan
Here's our plan:
* turn `AppComponent` into an application shell that only handles navigation,
* relocate the *Heroes* concerns within the current `AppComponent` to a separate `HeroesComponent`,
* add routing,
* create a new `DashboardComponent`,
* tie the *Dashboard* into the navigation structure.
* Turn `AppComponent` into an application shell that only handles navigation
* Relocate the *Heroes* concerns within the current `AppComponent` to a separate `HeroesComponent`
* Add routing
* Create a new `DashboardComponent`
* Tie the *Dashboard* into the navigation structure
.l-sub-section
:marked
@ -91,10 +91,10 @@ code-example(language="bash").
Instead of moving anything out of `AppComponent`, we'll just rename it `HeroesComponent`
and create a new `AppComponent` shell separately.
The steps are: rename the
* `app.component.ts` file to `heroes.component.ts`,
* `AppComponent` class to `HeroesComponent`,
* selector `my-app` to `my-heroes`.
The steps are to rename:
* `app.component.ts` file to `heroes.component.ts`
* `AppComponent` class to `HeroesComponent`
* Selector `my-app` to `my-heroes`
:marked
+makeExample('toh-5/ts/app/heroes.component.ts', 'heroes-component-renaming', 'app/heroes.component.ts (showing renamings only)')(format=".")
@ -545,11 +545,12 @@ figure.image-display
1. *Cut-and-paste* the styles contents into a new `heroes.component.css` file.
1. *Set* the component metadata's `templateUrl` and `styleUrls` properties to refer to both files.
We no longer display the `HeroDetailComponent` in the `HeroesComponent` template because we're navigating to it.
So we can remove it from the metadata `directives` array. The `directives` array is now empty so we delete it.
We might as well delete the `HeroDetailComponent` import statement too.
The revised `@Component` looks like this:
Because the template for `HeroesComponent` no longer uses `HeroDetailComponent`
directly &mdash; instead using the router to _navigate_ to it &mdash; we can
remove `HeroDetailComponent` from the directives list. That
list is now empty, so we can remove the `directives` property. The revised
`@Component` looks like this:
+makeExample('toh-5/ts/app/heroes.component.ts', 'metadata', 'app/heroes.component.ts (revised metadata)')(format=".")
:marked
Now we can see what's going on as we update the component class along the same lines as the dashboard:
@ -643,7 +644,7 @@ figure.image-display
Add a new file named `styles.css` in the root folder, if there isn't one already.
Ensure that it contains the [master styles given here](!{styles_css}).
Also ensure this stylesheet is referenced in the traditional manner within `index.html`.
If necessary, also edit `index.html` to refer to this stylesheet.
+makeExample('toh-5/ts/index.html','css', 'index.html (link ref)')(format=".")
:marked
Look at the app now. Our dashboard, heroes, and navigation links are styling!
@ -655,7 +656,7 @@ figure.image-display
:marked
## Application structure and code
p.
Review the sample source code in the #[+liveExampleLink2('', 'toh-5')] for this part.
Review the sample source code in the #[+liveExampleLink2('', 'toh-5')] for this chapter.
Verify that we have the following structure:
:marked