docs(toh-5/dart): review edits and code cleanup (#1643)
This commit is contained in:
Patrice Chalin
Kathy Walrath
parent
7ee6e63a6f
commit
6e5d8e6491
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
/* #docplaster */
|
||||
/* #docregion */
|
||||
[class*='col-'] {
|
||||
float: left;
|
||||
|
|
@ -60,4 +59,3 @@ h4 {
|
|||
min-width: 60px;
|
||||
}
|
||||
}
|
||||
/* #enddocregion */
|
||||
|
|
|
|||
|
|
@ -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 =>
|
||||
// #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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 =>
|
||||
Future<Null> ngOnInit() async {
|
||||
heroes = (await _heroService.getHeroes()).getRange(1, 5).toList();
|
||||
}
|
||||
|
||||
gotoDetail(){ /* not implemented yet */}
|
||||
gotoDetail() {/* not implemented yet */}
|
||||
}
|
||||
// #enddocregion component
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -17,5 +17,3 @@
|
|||
</h2>
|
||||
<button (click)="gotoDetail()">View Details</button>
|
||||
</div>
|
||||
<!-- #enddocregion mini-detail -->
|
||||
<!-- #enddocregion -->
|
||||
|
|
|
|||
|
|
@ -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'),
|
||||
|
|
|
|||
|
|
@ -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,6 +2,6 @@ import 'package:angular2/platform/browser.dart';
|
|||
|
||||
import 'package:angular2_tour_of_heroes/app_component.dart';
|
||||
|
||||
main() {
|
||||
void main() {
|
||||
bootstrap(AppComponent);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -3,10 +3,10 @@ include ../_util-fns
|
|||
:marked
|
||||
# Routing Around the App
|
||||
We received new requirements for our Tour of Heroes application:
|
||||
* add a *Dashboard* view.
|
||||
* navigate between the *Heroes* and *Dashboard* views.
|
||||
* clicking on a hero in either view navigates to a detail view of the selected hero.
|
||||
* clicking a *deep link* in an email opens the detail view for a particular hero.
|
||||
* Add a *Dashboard* view.
|
||||
* Navigate between the *Heroes* and *Dashboard* views.
|
||||
* Clicking on a hero in either view navigates to a detail view of the selected hero.
|
||||
* Clicking a *deep link* in an email opens the detail view for a particular hero.
|
||||
|
||||
When we’re done, users will be able to navigate the app like this:
|
||||
figure.image-display
|
||||
|
|
@ -16,7 +16,7 @@ figure.image-display
|
|||
.l-sub-section
|
||||
:marked
|
||||
The [Routing and Navigation](../guide/router.html) chapter covers the router in more detail
|
||||
than we will in this tour.
|
||||
than we will in this tutorial.
|
||||
|
||||
p Run the #[+liveExampleLink2('', 'toh-5')] for this part.
|
||||
|
||||
|
|
@ -54,13 +54,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
|
||||
|
|
@ -82,13 +82,13 @@ 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 `app_component.dart` file to `heroes_component.dart`.
|
||||
* rename the `AppComponent` class to `HeroesComponent`.
|
||||
* rename the selector `my-app` to `my-heroes`.
|
||||
The steps are to rename:
|
||||
* `app_component.dart` file to `heroes_component.dart`
|
||||
* `AppComponent` class to `HeroesComponent`
|
||||
* Selector `my-app` to `my-heroes`
|
||||
|
||||
:marked
|
||||
+makeExample('toh-5/dart/lib/heroes_component.dart', 'heroes-component-renaming', 'lib/heroes_component.dart (renaming)')(format=".")
|
||||
+makeExample('toh-5/dart/lib/heroes_component.dart', 'heroes-component-renaming', 'lib/heroes_component.dart (showing renamings only)')(format=".")
|
||||
|
||||
:marked
|
||||
## Create *AppComponent*
|
||||
|
|
@ -149,14 +149,14 @@ code-example(language="bash").
|
|||
|
||||
The Angular router is a combination of multiple services (`ROUTER_PROVIDERS`), multiple directives (`ROUTER_DIRECTIVES`),
|
||||
and a configuration annotation (`RouteConfig`). We'll get them all by importing `router.dart`:
|
||||
+makeExample('toh-5/dart/lib/app_component_2.dart', 'import-router', 'app_component.dart (router imports)')(format=".")
|
||||
+makeExample('toh-5/dart/lib/app_component_2.dart', 'import-router', 'lib/app_component.dart (router imports)')(format=".")
|
||||
|
||||
:marked
|
||||
The *Component Router* is a service. Like any service, we have to make it
|
||||
available to the application by adding it to the `providers` list.
|
||||
|
||||
Let's update the `directives` and `providers` metadata lists to *include* the router assets.
|
||||
+makeExample('toh-5/dart/lib/app_component_2.dart', 'directives-and-providers', 'app_component.dart (directives and providers)')(format=".")
|
||||
+makeExample('toh-5/dart/lib/app_component_2.dart', 'directives-and-providers', 'lib/app_component.dart (directives and providers)')(format=".")
|
||||
:marked
|
||||
Notice that we also removed the `HeroesComponent` from the `directives` list.
|
||||
`AppComponent` no longer shows heroes; that will be the router's job.
|
||||
|
|
@ -171,7 +171,7 @@ code-example(language="bash").
|
|||
pastes a URL into the browser address bar.
|
||||
|
||||
Let's define our first route, a route to the `HeroesComponent`.
|
||||
+makeExample('toh-5/dart/lib/app_component_2.dart', 'route-config', 'app_component.dart (RouteConfig for heroes)')(format=".")
|
||||
+makeExample('toh-5/dart/lib/app_component_2.dart', 'route-config', 'lib/app_component.dart (RouteConfig for heroes)')(format=".")
|
||||
:marked
|
||||
`@RouteConfig` takes a list of *route definitions*.
|
||||
We have only one route definition at the moment but rest assured, we'll add more.
|
||||
|
|
@ -202,7 +202,7 @@ code-example(language="bash").
|
|||
We add an anchor tag to the template which, when clicked, triggers navigation to the `HeroesComponent`.
|
||||
|
||||
The revised template looks like this:
|
||||
+makeExample('toh-5/dart/lib/app_component_2.dart', 'template', 'app_component.dart (template for Heroes)')(format=".")
|
||||
+makeExample('toh-5/dart/lib/app_component_2.dart', 'template', 'lib/app_component.dart (template v1)')(format=".")
|
||||
:marked
|
||||
Notice the `[routerLink]` binding in the anchor tag.
|
||||
We bind the `RouterLink` directive (another of the `ROUTER_DIRECTIVES`) to a list
|
||||
|
|
@ -249,7 +249,7 @@ code-example(language="bash").
|
|||
Import the `DashboardComponent` so we can reference it in the dashboard route definition.
|
||||
|
||||
Add the following `'Dashboard'` route definition to the `@RouteConfig` list of definitions.
|
||||
+makeExample('toh-5/dart/lib/app_component.dart','dashboard-route', 'app_component.dart (Dashboard Route)')(format=".")
|
||||
+makeExample('toh-5/dart/lib/app_component.dart','dashboard-route', 'lib/app_component.dart (Dashboard route)')(format=".")
|
||||
.l-sub-section
|
||||
:marked
|
||||
**useAsDefault**
|
||||
|
|
@ -264,7 +264,7 @@ code-example(language="bash").
|
|||
:marked
|
||||
Finally, add a dashboard navigation link to the template, just above the *Heroes* link.
|
||||
|
||||
+makeExample('toh-5/dart/lib/app_component.dart','template', 'app_component.dart (template)')(format=".")
|
||||
+makeExample('toh-5/dart/lib/app_component.dart','template', 'lib/app_component.dart (template)')(format=".")
|
||||
.l-sub-section
|
||||
:marked
|
||||
We nestled the two links within `<nav>` tags.
|
||||
|
|
@ -282,10 +282,12 @@ code-example(language="bash").
|
|||
+makeExample('toh-5/dart/lib/dashboard_component.dart', 'template-url', 'lib/dashboard_component.dart (templateUrl)')(format=".")
|
||||
.l-sub-section
|
||||
:marked
|
||||
We specify the path _all the way back to the application root_. Angular doesn't support module-relative paths.
|
||||
We specify the path _all the way back to the application root_ —
|
||||
because Angular doesn't support relative paths _by default_.
|
||||
We _can_ switch to [component-relative paths](../cookbook/component-relative-paths.html) if we prefer.
|
||||
:marked
|
||||
Create that file with these contents:
|
||||
+makeExample('toh-5/dart/lib/dashboard_component.html', null, 'dashboard_component.html')(format=".")
|
||||
+makeExample('toh-5/dart/lib/dashboard_component.html', null, 'lib/dashboard_component.html')(format=".")
|
||||
:marked
|
||||
We use `*ngFor` once again to iterate over a list of heroes and display their names.
|
||||
We added extra `<div>` elements to help with styling later in this chapter.
|
||||
|
|
@ -302,14 +304,13 @@ code-example(language="bash").
|
|||
and added it to the `providers` list of the top level `AppComponent`.
|
||||
|
||||
That move created a singleton `HeroService` instance, available to *all* components of the application.
|
||||
We'll inject and use it here in the `DashboardComponent` .
|
||||
Angular will inject `HeroService` and we'll use it here in the `DashboardComponent`.
|
||||
|
||||
### Get heroes
|
||||
Open the `dashboard_component.dart` and add the requisite `import` statements.
|
||||
+makeExample('toh-5/dart/lib/dashboard_component_2.dart','imports', 'lib/dashboard_component.dart (imports)')(format=".")
|
||||
:marked
|
||||
We need `OnInit` interface because we'll initialize the heroes in the `ngOnInit` method as we've done before.
|
||||
We need the `Hero` and `HeroService` symbols in order to reference those types.
|
||||
|
||||
Now implement the `DashboardComponent` class like this:
|
||||
+makeExample('toh-5/dart/lib/dashboard_component_2.dart','component', 'lib/dashboard_component.dart (class)')
|
||||
|
|
@ -361,7 +362,7 @@ code-example(format='').
|
|||
### Configure a Route with a Parameter
|
||||
|
||||
Here's the *route definition* we'll use.
|
||||
+makeExample('toh-5/dart/lib/app_component.dart','hero-detail-route', 'lib/app_component.dart (Route to HeroDetailComponent)')(format=".")
|
||||
+makeExample('toh-5/dart/lib/app_component.dart','hero-detail-route', 'lib/app_component.dart (route to HeroDetailComponent)')(format=".")
|
||||
:marked
|
||||
The colon (:) in the path indicates that `:id` is a placeholder to be filled with a specific hero `id`
|
||||
when navigating to the `HeroDetailComponent`.
|
||||
|
|
@ -386,7 +387,7 @@ code-example(format='').
|
|||
:marked
|
||||
## Revise the *HeroDetailComponent*
|
||||
|
||||
Before we rewrite the `HeroDetailComponent`, let's remember what it looks like now:
|
||||
Before we rewrite the `HeroDetailComponent`, let's review what it looks like now:
|
||||
|
||||
+makeExample('toh-4/dart/lib/hero_detail_component.dart', null, 'lib/hero_detail_component.dart (current)')
|
||||
:marked
|
||||
|
|
@ -394,12 +395,12 @@ code-example(format='').
|
|||
|
||||
We will no longer receive the hero in a parent component property binding.
|
||||
The new `HeroDetailComponent` should take the `id` parameter from the router's `RouteParams` service
|
||||
and use the `HeroService` to fetch the hero with that `id` from storage.
|
||||
and use the `HeroService` to fetch the hero with that `id`.
|
||||
|
||||
We need an import statement to reference the `RouteParams`.
|
||||
+makeExample('toh-5/dart/lib/hero_detail_component.dart', 'import-route-params')(format=".")
|
||||
:marked
|
||||
We import the `HeroService`so we can fetch a hero`.
|
||||
We import the `HeroService`so we can fetch a hero.
|
||||
+makeExample('toh-5/dart/lib/hero_detail_component.dart', 'import-hero-service')(format=".")
|
||||
:marked
|
||||
We import the `OnInit` interface because we'll call the `HeroService` inside the `ngOnInit` component lifecycle hook.
|
||||
|
|
@ -455,13 +456,11 @@ code-example(format='').
|
|||
:marked
|
||||
Here's the (nearly) finished `HeroDetailComponent`:
|
||||
+makeExample('toh-5/dart/lib/hero_detail_component.dart', 'v2', 'lib/hero_detail_component.dart (latest)')(format=".")
|
||||
:marked
|
||||
|
||||
|
||||
.l-main-section
|
||||
:marked
|
||||
## Select a *Dashboard* Hero
|
||||
When a user selects a hero in the dashboard, the app should navigate to the `HeroDetailComponent` to view and edit the selected hero..
|
||||
When a user selects a hero in the dashboard, the app should navigate to the `HeroDetailComponent` to view and edit the selected hero.
|
||||
|
||||
In the dashboard template we bound each hero's click event to the `gotoDetail` method, passing along the selected `hero` entity.
|
||||
+makeExample('toh-5/dart/lib/dashboard_component.html','click', 'lib/dashboard_component.html (click binding)')(format=".")
|
||||
|
|
@ -484,7 +483,7 @@ code-example(format='').
|
|||
+makeExample('toh-5/dart/lib/app_component.dart','hero-detail-route', 'lib/app_component.dart (hero detail route)')(format=".")
|
||||
:marked
|
||||
The `DashboardComponent` doesn't have the router yet. We obtain it in the usual way:
|
||||
`import` the `router` reference and inject it in the constructor (along with the `HeroService`):
|
||||
import the `router` reference and inject it in the constructor (along with the `HeroService`):
|
||||
|
||||
+makeExample('toh-5/dart/lib/dashboard_component.dart','import-router', 'lib/dashboard_component.dart (excerpts)')(format=".")
|
||||
+makeExample('toh-5/dart/lib/dashboard_component.dart','ctor')(format=".")
|
||||
|
|
@ -499,9 +498,7 @@ code-example(format='').
|
|||
That component's current template exhibits a "master/detail" style with the list of heroes
|
||||
at the top and details of the selected hero below.
|
||||
|
||||
**[TODO: Add example, once it exists.]**
|
||||
|
||||
// makeExample('toh-4/dart/lib/app_component.dart','template', 'lib/heroes_component.dart (current template)')(format=".")
|
||||
+makeExample('toh-4/dart/lib/app_component.dart','template', 'lib/heroes_component.dart (current template)')(format=".")
|
||||
|
||||
:marked
|
||||
Delete the last line of the template with the `<my-hero-detail>` tags.
|
||||
|
|
@ -525,7 +522,7 @@ figure.image-display
|
|||
### Format with the *UpperCasePipe*
|
||||
|
||||
Notice that the hero's name is displayed in CAPITAL LETTERS. That's the effect of the `UpperCasePipe`
|
||||
that we slipped into the interpolation binding. Look for it right after the pipe operator, ( | ).
|
||||
that we slipped into the interpolation binding. Look for it right after the pipe operator ( | ).
|
||||
+makeExample('toh-5/dart/lib/heroes_component.html','pipe')(format=".")
|
||||
:marked
|
||||
Pipes are a good way to format strings, currency amounts, dates and other display data.
|
||||
|
|
@ -546,14 +543,19 @@ 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.
|
||||
|
||||
The revised component data looks like this:
|
||||
Because the template for `HeroesComponent` no longer uses `HeroDetailComponent`
|
||||
directly — instead using the router to _navigate_ to it — we can
|
||||
remove `HeroDetailComponent` from the directives list. That
|
||||
list is now empty, so we can remove the `directives` argument. The revised
|
||||
`@Component` looks like this:
|
||||
|
||||
+makeExample('toh-5/dart/lib/heroes_component.dart', 'metadata', 'lib/heroes_component.dart (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:
|
||||
1. Import the `router`
|
||||
1. Inject the `router` in the constructor (along with the `HeroService`)
|
||||
1. Implement the `gotoDetail` method by calling the `router.navigate` method
|
||||
with a two-part 'HeroDetail' *link parameters list*.
|
||||
with a two-part `HeroDetail` *link parameters list*.
|
||||
|
||||
Here's the revised component class:
|
||||
+makeExample('toh-5/dart/lib/heroes_component.dart', 'class', 'lib/heroes_component.dart (class)')
|
||||
|
|
@ -608,7 +610,7 @@ lib/dashboard_component.css`)
|
|||
We cooperated by surrounding those links in `<nav>` tags.
|
||||
|
||||
Add a `app_component.css` file to the `app` folder with the following content.
|
||||
+makeExample('toh-5/dart/lib/app_component.css', 'css', 'lib/app_component.css (Navigation Styles)')
|
||||
+makeExample('toh-5/dart/lib/app_component.css', '', 'lib/app_component.css (navigation styles)')
|
||||
.l-sub-section
|
||||
:marked
|
||||
**The *router-link-active* class**
|
||||
|
|
@ -627,11 +629,20 @@ lib/dashboard_component.css`)
|
|||
We can also create styles at the *application level* outside of any component.
|
||||
|
||||
Our designers provided some basic styles to apply to elements across the entire app.
|
||||
Add the following to a new file named `styles.css` in the root folder.
|
||||
+makeExample('toh-5/ts/styles.1.css', '', 'styles.css (App Styles)')(format=".")
|
||||
These correspond to the full set of master styles that we
|
||||
introduced earlier (see
|
||||
[QuickStart, "Add some style"](../quickstart.html#!#add-some-style)).
|
||||
Here is an excerpt.
|
||||
|
||||
+makeExample('toh-5/ts/styles.1.css', 'toh-excerpt', 'styles.css (app styles excerpt)')(format=".")
|
||||
|
||||
- var styles_css = 'https://raw.githubusercontent.com/angular/angular.io/master/public/docs/_examples/styles.css'
|
||||
|
||||
:marked
|
||||
Reference this stylesheet within the `index.html` in the traditional manner.
|
||||
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}).
|
||||
|
||||
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!
|
||||
|
|
@ -642,10 +653,11 @@ figure.image-display
|
|||
.l-main-section
|
||||
:marked
|
||||
## Application structure and code
|
||||
|
||||
Review the sample source code [in the live example for this chapter](/resources/live-examples/toh-5/ts/plnkr.html).
|
||||
p.
|
||||
Review the sample source code in the #[+liveExampleLink2('', 'toh-5')] for this chapter.
|
||||
Verify that we have the following structure:
|
||||
|
||||
:marked
|
||||
.filetree
|
||||
.file angular2-tour-of-heroes
|
||||
.children
|
||||
|
|
@ -672,7 +684,6 @@ figure.image-display
|
|||
.file index.html
|
||||
.file styles.css
|
||||
.file pubspec.yaml
|
||||
:marked
|
||||
|
||||
.l-main-section
|
||||
:marked
|
||||
|
|
@ -681,15 +692,15 @@ figure.image-display
|
|||
### The Road Behind
|
||||
We travelled a great distance in this chapter
|
||||
- We added the Angular *Component Router* to navigate among different components.
|
||||
- We learned how to create router links to represent navigation menu items
|
||||
- We used router parameters to navigate to the details of user selected hero
|
||||
- We shared the `HeroService` among multiple components
|
||||
- We learned how to create router links to represent navigation menu items.
|
||||
- We used router parameters to navigate to the details of user selected hero.
|
||||
- We shared the `HeroService` among multiple components.
|
||||
- We moved HTML and CSS out of the component file and into their own files.
|
||||
- We added the `uppercase` pipe to format data
|
||||
- We added the `uppercase` pipe to format data.
|
||||
|
||||
### The Road Ahead
|
||||
We have much of the foundation we need to build an application.
|
||||
We're still missing a key piece: remote data access.
|
||||
|
||||
In a forthcoming tutorial chapter,
|
||||
In the next chapter,
|
||||
we’ll replace our mock data with data retrieved from a server using http.
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
Because the template for `HeroesComponent` no longer uses `HeroDetailComponent`
|
||||
directly — instead using the router to _navigate_ to it — 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:
|
||||
|
||||
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
|
||||
|
|
|
|||
Loading…
Reference in New Issue