angular-cn/public/docs/dart/latest/tutorial/toh-pt5.jade

extends ../../../ts/_cache/tutorial/toh-pt5

block includes
  include ../_util-fns
  - var _appRoutingTsVsAppComp = 'AppComponent'
  - var _declsVsDirectives = 'directives'
  - var _RoutesVsAtRouteConfig = '@RouteConfig'
  - var _RouterModuleVsRouterDirectives = 'ROUTER_DIRECTIVES'
  - var _redirectTo = 'useAsDefault'

block intro-file-tree
  .filetree
    .file angular2_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`). We'll 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, we make router services available to the application
    by adding them to the `providers` list.  Let's update the `directives` and
    `providers` lists to include the router assets:

  +makeExcerpt('app/app.component.ts (excerpt)', 'directives-and-providers')

  :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 `<my-heroes>` from the template too.

block router-config-intro
  :marked
    ### Configure routes and add the router

    The `AppComponent` doesn't have a router yet. We'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.
    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`.
  .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
    We don't need a route definition for that. Instead,
    we 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
  :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
    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`.

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 we extract the `id` by calling the `RouteParams.get` method.

block heroes-component-cleanup
  :marked
    Because the template for `HeroesComponent` no longer uses `HeroDetailComponent`
    directly &mdash; instead using the router to _navigate_ to it &mdash; we 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 we have to do is define the style for it. Sweet!

block file-tree-end
  .filetree
    .file angular2_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