169 lines
5.6 KiB
Plaintext
169 lines
5.6 KiB
Plaintext
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 — instead using the router to _navigate_ to it — 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
|