0c0c6f69f3
* docs(toh-5): review and update/resync Dart **NOTE: run `gulp add-example-boilerplate` after pulling in the commit.** This is preparatory work for #2035. As part of the the chapter review, the Dart .jade was enhanced to use Jade extends (#2018). By the same token it contributed to a post-RC5 resync (#2077). Other key changes: Dart and TS code: - Eliminated `styles.1.css` in favor of docregions in `styles.css`. - `docregion` tags renamed in a few places. - **No other code changes**. TS prose - Fixed: misnamed variable `routing` -> `appRoutes`. - All other changes are **minor copy edits**, or changes to support Dart via Jade extends. Diff of generated HTML for TS chapter was inspected to ensure only minor copy edits prevailed (i.e., that the support for Jade extends had no impact on the generated HTML). * docs(toh-5): edits after doing tutorial - Some adjustments following actually doing the tutorial. In some cases code shown (e.g. this is what file foo should look like now) didn't match what the user would have. E.g., lingering @Input on the hero property. - Fixed some lingering deprecated-router prose elements on TS side (e.g., still referring to a route by the old string names like `HeroDetail`). - Added extra step to `app.component.ts` creation rather than having a critical-call-out later on. - Reorder some prose for better harmony between TS and Dart prose (also improves the flow). - Moved the `styleUrls` call-out to the point of first use. * post-review changes * more post-review changes * toh-6 cache update
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
|