From 6e5d8e6491ae909a580a6ea1aab93618e2414f9e Mon Sep 17 00:00:00 2001 From: Patrice Chalin Date: Wed, 15 Jun 2016 07:46:26 -0700 Subject: [PATCH] docs(toh-5/dart): review edits and code cleanup (#1643) --- .../toh-4/dart/lib/app_component.dart | 2 + .../toh-5/dart/lib/app_component.css | 4 +- .../toh-5/dart/lib/app_component.dart | 9 +- .../toh-5/dart/lib/app_component_1.dart | 5 +- .../toh-5/dart/lib/app_component_2.dart | 5 +- .../toh-5/dart/lib/dashboard_component.css | 2 - .../toh-5/dart/lib/dashboard_component.dart | 18 +- .../toh-5/dart/lib/dashboard_component.html | 4 +- .../toh-5/dart/lib/dashboard_component_2.dart | 13 +- .../toh-5/dart/lib/hero_detail_component.dart | 33 +- .../toh-5/dart/lib/hero_service.dart | 14 +- .../toh-5/dart/lib/heroes_component.dart | 24 +- .../toh-5/dart/lib/heroes_component.html | 2 - .../_examples/toh-5/dart/lib/mock_heroes.dart | 2 +- .../docs/_examples/toh-5/dart/web/index.html | 9 +- .../docs/_examples/toh-5/dart/web/main.dart | 2 +- .../_examples/toh-5/dart/web/styles_1.css | 24 + public/docs/dart/latest/tutorial/toh-pt5.jade | 821 +++++++++--------- public/docs/ts/latest/tutorial/toh-pt5.jade | 35 +- 19 files changed, 526 insertions(+), 502 deletions(-) create mode 100644 public/docs/_examples/toh-5/dart/web/styles_1.css diff --git a/public/docs/_examples/toh-4/dart/lib/app_component.dart b/public/docs/_examples/toh-4/dart/lib/app_component.dart index 145030d300..6a3555e3ae 100644 --- a/public/docs/_examples/toh-4/dart/lib/app_component.dart +++ b/public/docs/_examples/toh-4/dart/lib/app_component.dart @@ -13,6 +13,7 @@ import 'hero_service.dart'; @Component( selector: 'my-app', + // #docregion template template: '''

{{title}}

My Heroes

@@ -25,6 +26,7 @@ import 'hero_service.dart'; ''', + // #enddocregion template styles: const [ ''' .selected { diff --git a/public/docs/_examples/toh-5/dart/lib/app_component.css b/public/docs/_examples/toh-5/dart/lib/app_component.css index 137e9be7be..f4e8082ea1 100644 --- a/public/docs/_examples/toh-5/dart/lib/app_component.css +++ b/public/docs/_examples/toh-5/dart/lib/app_component.css @@ -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 */ diff --git a/public/docs/_examples/toh-5/dart/lib/app_component.dart b/public/docs/_examples/toh-5/dart/lib/app_component.dart index 60ebd7c9bc..ecf2bf4f3c 100644 --- a/public/docs/_examples/toh-5/dart/lib/app_component.dart +++ b/public/docs/_examples/toh-5/dart/lib/app_component.dart @@ -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 diff --git a/public/docs/_examples/toh-5/dart/lib/app_component_1.dart b/public/docs/_examples/toh-5/dart/lib/app_component_1.dart index da03cbbee0..880974b28f 100644 --- a/public/docs/_examples/toh-5/dart/lib/app_component_1.dart +++ b/public/docs/_examples/toh-5/dart/lib/app_component_1.dart @@ -15,12 +15,11 @@ import 'heroes_component.dart'; ''', directives: const [HeroesComponent], providers: const [ -// #enddocregion + // #enddocregion ROUTER_PROVIDERS, -// #docregion + // #docregion HeroService ]) class AppComponent { String title = 'Tour of Heroes'; } -// #enddocregion diff --git a/public/docs/_examples/toh-5/dart/lib/app_component_2.dart b/public/docs/_examples/toh-5/dart/lib/app_component_2.dart index a677520d91..024c2b6ac9 100644 --- a/public/docs/_examples/toh-5/dart/lib/app_component_2.dart +++ b/public/docs/_examples/toh-5/dart/lib/app_component_2.dart @@ -10,12 +10,12 @@ import 'heroes_component.dart'; @Component( selector: 'my-app', -// #docregion template + // #docregion template template: '''

{{title}}

Heroes ''', -// #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 diff --git a/public/docs/_examples/toh-5/dart/lib/dashboard_component.css b/public/docs/_examples/toh-5/dart/lib/dashboard_component.css index ce6e963a5f..f6263074f0 100644 --- a/public/docs/_examples/toh-5/dart/lib/dashboard_component.css +++ b/public/docs/_examples/toh-5/dart/lib/dashboard_component.css @@ -1,4 +1,3 @@ -/* #docplaster */ /* #docregion */ [class*='col-'] { float: left; @@ -60,4 +59,3 @@ h4 { min-width: 60px; } } -/* #enddocregion */ diff --git a/public/docs/_examples/toh-5/dart/lib/dashboard_component.dart b/public/docs/_examples/toh-5/dart/lib/dashboard_component.dart index 76335c54c4..972497e065 100644 --- a/public/docs/_examples/toh-5/dart/lib/dashboard_component.dart +++ b/public/docs/_examples/toh-5/dart/lib/dashboard_component.dart @@ -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 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 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 diff --git a/public/docs/_examples/toh-5/dart/lib/dashboard_component.html b/public/docs/_examples/toh-5/dart/lib/dashboard_component.html index b05b58c180..7133c10ada 100644 --- a/public/docs/_examples/toh-5/dart/lib/dashboard_component.html +++ b/public/docs/_examples/toh-5/dart/lib/dashboard_component.html @@ -1,9 +1,9 @@

Top Heroes

- +
- +

{{hero.name}}

diff --git a/public/docs/_examples/toh-5/dart/lib/dashboard_component_2.dart b/public/docs/_examples/toh-5/dart/lib/dashboard_component_2.dart index fa1dd9a41e..15d239ba1b 100644 --- a/public/docs/_examples/toh-5/dart/lib/dashboard_component_2.dart +++ b/public/docs/_examples/toh-5/dart/lib/dashboard_component_2.dart @@ -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 heroes; final HeroService _heroService; DashboardComponent(this._heroService); - ngOnInit() async => - heroes = (await _heroService.getHeroes()).getRange(1, 5).toList(); + Future ngOnInit() async { + heroes = (await _heroService.getHeroes()).getRange(1, 5).toList(); + } - gotoDetail(){ /* not implemented yet */} + gotoDetail() {/* not implemented yet */} } -// #enddocregion component diff --git a/public/docs/_examples/toh-5/dart/lib/hero_detail_component.dart b/public/docs/_examples/toh-5/dart/lib/hero_detail_component.dart index ec143efb62..ed648d626f 100644 --- a/public/docs/_examples/toh-5/dart/lib/hero_detail_component.dart +++ b/public/docs/_examples/toh-5/dart/lib/hero_detail_component.dart @@ -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 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 diff --git a/public/docs/_examples/toh-5/dart/lib/hero_service.dart b/public/docs/_examples/toh-5/dart/lib/hero_service.dart index 97490fd5fa..e626b38200 100644 --- a/public/docs/_examples/toh-5/dart/lib/hero_service.dart +++ b/public/docs/_examples/toh-5/dart/lib/hero_service.dart @@ -1,5 +1,3 @@ -// #docplaster - // #docregion import 'dart:async'; @@ -10,18 +8,16 @@ import 'mock_heroes.dart'; @Injectable() class HeroService { - Future> getHeroes() async => HEROES; + Future> getHeroes() async => mockHeroes; // See the "Take it slow" appendix Future> getHeroesSlowly() { return new Future>.delayed( - const Duration(seconds: 2), () => HEROES // 2 seconds - ); + const Duration(seconds: 2), () => mockHeroes); } -//#docregion get-hero + // #docregion get-hero Future 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 diff --git a/public/docs/_examples/toh-5/dart/lib/heroes_component.dart b/public/docs/_examples/toh-5/dart/lib/heroes_component.dart index d615756952..fda869c3aa 100644 --- a/public/docs/_examples/toh-5/dart/lib/heroes_component.dart +++ b/public/docs/_examples/toh-5/dart/lib/heroes_component.dart @@ -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 heroes; @@ -32,7 +29,7 @@ class HeroesComponent implements OnInit { HeroesComponent(this._heroService, this._router); - Future getHeroes() async { + Future getHeroes() async { heroes = await _heroService.getHeroes(); } @@ -42,10 +39,7 @@ class HeroesComponent implements OnInit { void onSelect(Hero hero) { selectedHero = hero; } - Future gotoDetail() => + Future gotoDetail() => _router.navigate(['HeroDetail', {'id': selectedHero.id.toString()}]); -// #docregion heroes-component-renaming + // #docregion heroes-component-renaming } -// #enddocregion heroes-component-renaming -// #enddocregion class -// #enddocregion diff --git a/public/docs/_examples/toh-5/dart/lib/heroes_component.html b/public/docs/_examples/toh-5/dart/lib/heroes_component.html index d103743706..d0495e364c 100644 --- a/public/docs/_examples/toh-5/dart/lib/heroes_component.html +++ b/public/docs/_examples/toh-5/dart/lib/heroes_component.html @@ -17,5 +17,3 @@
- - diff --git a/public/docs/_examples/toh-5/dart/lib/mock_heroes.dart b/public/docs/_examples/toh-5/dart/lib/mock_heroes.dart index b96c17ff61..4c2153255b 100644 --- a/public/docs/_examples/toh-5/dart/lib/mock_heroes.dart +++ b/public/docs/_examples/toh-5/dart/lib/mock_heroes.dart @@ -1,6 +1,6 @@ import 'hero.dart'; -final List HEROES = [ +final List mockHeroes = [ new Hero(11, 'Mr. Nice'), new Hero(12, 'Narco'), new Hero(13, 'Bombasto'), diff --git a/public/docs/_examples/toh-5/dart/web/index.html b/public/docs/_examples/toh-5/dart/web/index.html index 0d2d000077..be9b1b4ca2 100644 --- a/public/docs/_examples/toh-5/dart/web/index.html +++ b/public/docs/_examples/toh-5/dart/web/index.html @@ -1,10 +1,11 @@ - - + - - + + + + Angular 2 Tour of Heroes diff --git a/public/docs/_examples/toh-5/dart/web/main.dart b/public/docs/_examples/toh-5/dart/web/main.dart index 314d6f0b65..ed2bb7156f 100644 --- a/public/docs/_examples/toh-5/dart/web/main.dart +++ b/public/docs/_examples/toh-5/dart/web/main.dart @@ -2,6 +2,6 @@ import 'package:angular2/platform/browser.dart'; import 'package:angular2_tour_of_heroes/app_component.dart'; -main() { +void main() { bootstrap(AppComponent); } diff --git a/public/docs/_examples/toh-5/dart/web/styles_1.css b/public/docs/_examples/toh-5/dart/web/styles_1.css new file mode 100644 index 0000000000..dee6d5b8ca --- /dev/null +++ b/public/docs/_examples/toh-5/dart/web/styles_1.css @@ -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; +} diff --git a/public/docs/dart/latest/tutorial/toh-pt5.jade b/public/docs/dart/latest/tutorial/toh-pt5.jade index 11cde4b710..0315a43834 100644 --- a/public/docs/dart/latest/tutorial/toh-pt5.jade +++ b/public/docs/dart/latest/tutorial/toh-pt5.jade @@ -1,30 +1,30 @@ 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. + # 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. - When we’re done, users will be able to navigate the app like this: + When we’re done, users will be able to navigate the app like this: figure.image-display - img(src='/resources/images/devguide/toh/nav-diagram.png' alt="View navigations") + img(src='/resources/images/devguide/toh/nav-diagram.png' alt="View navigations") :marked - We'll add Angular’s *Component Router* to our app to satisfy these requirements. + We'll add Angular’s *Component Router* to our app to satisfy these requirements. .l-sub-section - :marked - The [Routing and Navigation](../guide/router.html) chapter covers the router in more detail - than we will in this tour. + :marked + The [Routing and Navigation](../guide/router.html) chapter covers the router in more detail + than we will in this tutorial. p Run the #[+liveExampleLink2('', 'toh-5')] for this part. .l-main-section :marked - ## Where We Left Off - Before we continue with our Tour of Heroes, let’s verify that we have the following structure after adding our hero service - and hero detail component. If not, we’ll need to go back and follow the previous chapters. + ## Where We Left Off + Before we continue with our Tour of Heroes, let’s verify that we have the following structure after adding our hero service + and hero detail component. If not, we’ll need to go back and follow the previous chapters. .filetree .file angular2-tour-of-heroes @@ -48,554 +48,556 @@ p Run the #[+liveExampleLink2('', 'toh-5')] for this part. Start the Dart compiler, watch for changes, and start our server by entering the command: code-example(language="bash"). - pub serve + pub serve :marked The application runs and updates automatically as we continue to build the Tour of Heroes. - ## Action plan - Here's our plan + ## Action 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 - *Routing* is another name for *navigation*. The *router* is the mechanism for navigating from view to view. + :marked + *Routing* is another name for *navigation*. The *router* is the mechanism for navigating from view to view. .l-main-section :marked - ## Splitting the *AppComponent* + ## Splitting the *AppComponent* - Our current app loads `AppComponent` and immediately displays the list of heroes. + Our current app loads `AppComponent` and immediately displays the list of heroes. - Our revised app should present a shell with a choice of views (*Dashboard* and *Heroes*) and then default to one of them. + Our revised app should present a shell with a choice of views (*Dashboard* and *Heroes*) and then default to one of them. - The `AppComponent` should only handle navigation. - Let's move the display of *Heroes* out of `AppComponent` and into its own `HeroesComponent`. + The `AppComponent` should only handle navigation. + Let's move the display of *Heroes* out of `AppComponent` and into its own `HeroesComponent`. - ### *HeroesComponent* - `AppComponent` is already dedicated to *Heroes*. - Instead of moving anything out of `AppComponent`, we'll just rename it `HeroesComponent` - and create a new `AppComponent` shell separately. + ### *HeroesComponent* + `AppComponent` is already dedicated to *Heroes*. + 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* - The new `AppComponent` will be the application shell. - It will have some navigation links at the top and a display area below for the pages we navigate to. + ## Create *AppComponent* + The new `AppComponent` will be the application shell. + It will have some navigation links at the top and a display area below for the pages we navigate to. - The initial steps are: + The initial steps are: - * create a new file named `app_component.dart`. - * define an `AppComponent` class. - * expose an application `title` property. - * add the `@Component` metadata annotation above the class with a `my-app` selector. - * add a template with `

` tags surrounding a binding to the `title` property. - * add the `` tags to the template so we still see the heroes. - * add the `HeroesComponent` to the `directives` list so Angular recognizes the `` tags. - * add the `HeroService` to the `providers` list because we'll need it in every other view. - * add the supporting `import` statements. + * create a new file named `app_component.dart`. + * define an `AppComponent` class. + * expose an application `title` property. + * add the `@Component` metadata annotation above the class with a `my-app` selector. + * add a template with `

` tags surrounding a binding to the `title` property. + * add the `` tags to the template so we still see the heroes. + * add the `HeroesComponent` to the `directives` list so Angular recognizes the `` tags. + * add the `HeroService` to the `providers` list because we'll need it in every other view. + * add the supporting `import` statements. - Our first draft looks like this: + Our first draft looks like this: +makeExample('toh-5/dart/lib/app_component_1.dart', null, 'lib/app_component.dart (v1)') :marked .callout.is-critical - header Remove HeroService from the HeroesComponent providers - :marked - Go back to the `HeroesComponent` and **remove the `HeroService`** from its `providers` list. - We are *promoting* this service from the `HeroesComponent` to the `AppComponent`. - We ***do not want two copies*** of this service at two different levels of our app. + header Remove HeroService from the HeroesComponent providers + :marked + Go back to the `HeroesComponent` and **remove the `HeroService`** from its `providers` list. + We are *promoting* this service from the `HeroesComponent` to the `AppComponent`. + We ***do not want two copies*** of this service at two different levels of our app. :marked - The app still runs and still displays heroes. - Our refactoring of `AppComponent` into a new `AppComponent` and a `HeroesComponent` worked! - We have done no harm. + The app still runs and still displays heroes. + Our refactoring of `AppComponent` into a new `AppComponent` and a `HeroesComponent` worked! + We have done no harm. :marked - ## Add Routing + ## Add Routing - We're ready to take the next step. - Instead of displaying heroes automatically, we'd like to show them *after* the user clicks a button. - In other words, we'd like to navigate to the list of heroes. + We're ready to take the next step. + Instead of displaying heroes automatically, we'd like to show them *after* the user clicks a button. + In other words, we'd like to navigate to the list of heroes. - We'll need the Angular *Component Router*. + We'll need the Angular *Component Router*. - ### Add a base tag + ### Add a base tag -// Our Tour of Heroes needs routing, -// so we load the library in the `index.html` in a script tag immediately *after* the angular script itself. +// Our Tour of Heroes needs routing, +// so we load the library in the `index.html` in a script tag immediately *after* the angular script itself. //+makeExample('toh-5/dart/web/index.html', 'router', 'index.html (router)')(format=".") :marked - First, edit `index.html` and add `` at the top of the `` section. + First, edit `index.html` and add `` at the top of the `` section. +makeExample('toh-5/dart/web/index.html', 'base-href', 'index.html (base href)')(format=".") .callout.is-important - header base href is essential - :marked - See the *base href* section of the [Router](../guide/router.html#!#base-href) chapter to learn why this matters. + header base href is essential + :marked + See the *base href* section of the [Router](../guide/router.html#!#base-href) chapter to learn why this matters. :marked - ### Make the router available + ### Make the router available - Not all apps need routing, which is why the Angular *Component Router* is in a separate, optional module library. + Not all apps need routing, which is why the Angular *Component Router* is in a separate, optional module library. - 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=".") + 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', '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. + 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=".") + 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', '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. - We'll soon remove `` from the template too. + Notice that we also removed the `HeroesComponent` from the `directives` list. + `AppComponent` no longer shows heroes; that will be the router's job. + We'll soon remove `` from the template too. - ### Add and configure the router + ### Add and configure the router - The `AppComponent` doesn't have a router yet. We'll use the `@RouteConfig` annotation to simultaneously - (a) assign a router to the component and (b) configure that router with *routes*. + The `AppComponent` doesn't have a router yet. We'll use the `@RouteConfig` annotation to simultaneously + (a) assign a router to the component and (b) configure that router with *routes*. - *Routes* tell the router which views to display when a user clicks a link or - pastes a URL into the browser address bar. + *Routes* tell the router which views to display when a user clicks a link or + 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=".") + Let's define our first route, a route to the `HeroesComponent`. ++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. + `@RouteConfig` takes a list of *route definitions*. + We have only one route definition at the moment but rest assured, we'll add more. - This *route definition* has three parts: - * **path**: the router matches this route's path to the URL in the browser address bar (`/heroes`). + This *route definition* has three parts: + * **path**: the router matches this route's path to the URL in the browser address bar (`/heroes`). - * **name**: the official name of the route; it *must* begin with a capital letter to avoid confusion with the *path* (`Heroes`). + * **name**: the official name of the route; it *must* begin with a capital letter to avoid confusion with the *path* (`Heroes`). - * **component**: the component that the router should create when navigating to this route (`HeroesComponent`). + * **component**: the component that the router should create when navigating to this route (`HeroesComponent`). .l-sub-section - :marked - Learn more about defining routes with @RouteConfig in the [Routing](../guide/router.html) chapter. + :marked + Learn more about defining routes with @RouteConfig in the [Routing](../guide/router.html) chapter. :marked - ### Router Outlet + ### Router Outlet - If we paste the path, `/heroes`, into the browser address bar, - the router should match it to the `'Heroes'` route and display the `HeroesComponent`. - But where? + If we paste the path, `/heroes`, into the browser address bar, + the router should match it to the `'Heroes'` route and display the `HeroesComponent`. + But where? - We have to ***tell it where*** by adding `` marker tags to the bottom of the template. - `RouterOutlet` is one of the `ROUTER_DIRECTIVES`. - The router displays each component immediately below the `` as we navigate through the application. + We have to ***tell it where*** by adding `` marker tags to the bottom of the template. + `RouterOutlet` is one of the `ROUTER_DIRECTIVES`. + The router displays each component immediately below the `` as we navigate through the application. - ### Router Links - We don't really expect users to paste a route URL into the address bar. - We add an anchor tag to the template which, when clicked, triggers navigation to the `HeroesComponent`. + ### Router Links + We don't really expect users to paste a route URL into the address bar. + 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=".") + The revised template looks like this: ++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 - that tells the router where to navigate when the user clicks the link. + Notice the `[routerLink]` binding in the anchor tag. + We bind the `RouterLink` directive (another of the `ROUTER_DIRECTIVES`) to a list + that tells the router where to navigate when the user clicks the link. - We define a *routing instruction* with a *link parameters list*. - The list only has one element in our little sample, the quoted ***name* of the route** to follow. - Looking back at the route configuration, we confirm that `'Heroes'` is the name of the route to the `HeroesComponent`. + We define a *routing instruction* with a *link parameters list*. + The list only has one element in our little sample, the quoted ***name* of the route** to follow. + Looking back at the route configuration, we confirm that `'Heroes'` is the name of the route to the `HeroesComponent`. .l-sub-section - :marked - Learn about the *link parameters list* in the [Routing](../guide/router.html#link-parameters-array) chapter. + :marked + Learn about the *link parameters list* in the [Routing](../guide/router.html#link-parameters-array) chapter. :marked - Refresh the browser. We see only the app title. We don't see the heroes list. + Refresh the browser. We see only the app title. We don't see the heroes list. .l-sub-section - :marked - The browser's address bar shows `/`. - The route path to `HeroesComponent` is `/heroes`, not `/`. - We don't have a route that matches the path `/`, so there is nothing to show. - That's something we'll want to fix. + :marked + The browser's address bar shows `/`. + The route path to `HeroesComponent` is `/heroes`, not `/`. + We don't have a route that matches the path `/`, so there is nothing to show. + That's something we'll want to fix. :marked - We click the "Heroes" navigation link, the browser bar updates to `/heroes`, - and now we see the list of heroes. We are navigating at last! + We click the "Heroes" navigation link, the browser bar updates to `/heroes`, + and now we see the list of heroes. We are navigating at last! - At this stage, our `AppComponent` looks like this. + At this stage, our `AppComponent` looks like this. +makeExample('toh-5/dart/lib/app_component_2.dart',null, 'lib/app_component.dart (v2)') :marked - The *AppComponent* is now attached to a router and displaying routed views. - For this reason and to distinguish it from other kinds of components, - we call this type of component a *Router Component*. + The *AppComponent* is now attached to a router and displaying routed views. + For this reason and to distinguish it from other kinds of components, + we call this type of component a *Router Component*. :marked - ## Add a *Dashboard* - Routing only makes sense when we have multiple views. We need another view. + ## Add a *Dashboard* + Routing only makes sense when we have multiple views. We need another view. - Create a placeholder `DashboardComponent` that gives us something to navigate to and from. + Create a placeholder `DashboardComponent` that gives us something to navigate to and from. +makeExample('toh-5/dart/lib/dashboard_component_1.dart',null, 'lib/dashboard_component.dart (v1)')(format=".") :marked - We’ll come back and make it more useful later. + We’ll come back and make it more useful later. - ### Configure the dashboard route - Go back to `app_component.dart` and teach it to navigate to the dashboard. + ### Configure the dashboard route + Go back to `app_component.dart` and teach it to navigate to the dashboard. - Import the `DashboardComponent` so we can reference it in the dashboard route definition. + 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=".") + Add the following `'Dashboard'` route definition to the `@RouteConfig` list of definitions. ++makeExample('toh-5/dart/lib/app_component.dart','dashboard-route', 'lib/app_component.dart (Dashboard route)')(format=".") .l-sub-section - :marked - **useAsDefault** + :marked + **useAsDefault** - We want the app to show the dashboard when it starts and - we want to see a nice URL in the browser address bar that says `/dashboard`. - Remember that the browser launches with `/` in the address bar. - We don't have a route for that path and we'd rather not create one. + We want the app to show the dashboard when it starts and + we want to see a nice URL in the browser address bar that says `/dashboard`. + Remember that the browser launches with `/` in the address bar. + We don't have a route for that path and we'd rather not create one. - Fortunately we can add the `useAsDefault: true` property to the *route definition* and the - router will display the dashboard when the browser URL doesn't match an existing route. + Fortunately we can add the `useAsDefault: true` property to the *route definition* and the + router will display the dashboard when the browser URL doesn't match an existing route. :marked - Finally, add a dashboard navigation link to the template, just above the *Heroes* link. + 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 `