extends ../../../ts/_cache/tutorial/toh-pt5 block includes include ../_util-fns - var _appRoutingTsVsAppComp = 'AppComponent' - var _RoutesVsAtRouteConfig = '@RouteConfig' - var _RouterModuleVsRouterDirectives = 'ROUTER_DIRECTIVES' - var _redirectTo = 'useAsDefault' block intro-file-tree .filetree .file angular_tour_of_heroes .children .file lib .children .file app_component.dart .file hero.dart .file hero_detail_component.dart .file hero_service.dart .file mock_heroes.dart .file web .children .file index.html .file main.dart .file styles.css .file pubspec.yaml block keep-app-running :marked ### Keep the app compiling and running Open a terminal/console window. Start the Dart compiler, watch for changes, and start our server by entering the command: code-example(language="bash"). pub serve block app-comp-v1 +makeExcerpt('lib/app_component_1.dart (v1)', '') block angular-router :marked The Angular router is a combination of multiple services (`ROUTER_PROVIDERS`), multiple directives (`ROUTER_DIRECTIVES`), and a configuration annotation (`RouteConfig`). You get them all by importing the router library: +makeExcerpt('app/app.component.ts (router imports)', 'import-router') :marked ### Make the router available Not all apps need routing, which is why the Angular *Component Router* is in a separate, optional library module. Like for any service, you make router services available to the application by adding them to the `providers` list. Update the `directives` and `providers` lists to include the router assets: +makeExcerpt('app/app.component.ts (excerpt)', 'directives-and-providers') :marked `AppComponent` no longer shows heroes, that will be the router's job, so you can remove the `HeroesComponent` from the `directives` list. You'll soon remove `` from the template too. block router-config-intro :marked ### Configure routes and add the router The `AppComponent` doesn't have a router yet. You'll use the `@RouteConfig` annotation to simultaneously: - Assign a router to the component - Configure that router with *routes* block routerLink :marked Notice the `[routerLink]` binding in the anchor tag. You 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. You 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, 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. block redirect-vs-use-as-default :marked You don't need a route definition for that. Instead, add `useAsDefault: true` to the dashboard *route definition* and the router will display the dashboard when the browser URL doesn't match an existing route. block templateUrl-path-resolution .l-sub-section :marked The value of `templateUrl` can be an [asset][] in this package or another package. To use an asset in another package, use a full package reference, such as `'package:some_other_package/dashboard_component.html'`. [asset]: https://www.dartlang.org/tools/pub/glossary#asset block route-params :marked You 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`. block ngOnInit :marked Inside the `ngOnInit` lifecycle hook, extract the `id` parameter value from the `RouteParams` service and use the `HeroService` to fetch the hero with that `id`. block extract-id :marked Notice how you can extract the `id` by calling the `RouteParams.get` method. block heroes-component-cleanup :marked Because the template for `HeroesComponent` no longer uses `HeroDetailComponent` directly — instead using the router to _navigate_ to it — you can drop the `directives` argument from `@Component` and remove the unused hero detail import. The revised `@Component` looks like this: block css-files +makeTabs( `toh-5/dart/lib/hero_detail_component.css, toh-5/dart/lib/dashboard_component.css`, null, `lib/hero_detail_component.css, lib/dashboard_component.css`) block router-link-active :marked **The *router-link-active* class** The Angular Router adds the `router-link-active` class to the HTML navigation element whose route matches the active route. All you have to do is define the style for it. Sweet! block file-tree-end .filetree .file angular_tour_of_heroes .children .file lib .children .file app_component.css .file app_component.dart .file dashboard_component.css .file dashboard_component.dart .file dashboard_component.html .file hero.dart .file hero_detail_component.css .file hero_detail_component.dart .file hero_detail_component.html .file hero_service.dart .file heroes_component.css .file heroes_component.dart .file heroes_component.html .file mock_heroes.dart .file web .children .file index.html .file main.dart .file styles.css .file pubspec.yaml