@@ -608,7 +608,7 @@ block extract-id
608
608
When a user selects a hero in the dashboard, the app should navigate to the `HeroDetailComponent` to view and edit the selected hero.
609
609
610
610
Although the dashboard heroes are presented as button-like blocks, they should behave like anchor tags.
611
- When hovering over a hero block, the target URL should display in the browser status bar
611
+ When hovering over a hero block, the target URL should display in the browser status bar
612
612
and the user should be able to copy the link or open the hero detail view in a new tab.
613
613
614
614
To achieve this effect, reopen the <span ngio-ex>dashboard.component.html</span> and replace the repeated `<div *ngFor...>` tags
@@ -643,19 +643,19 @@ block extract-id
643
643
:marked
644
644
## Refactor routes to a _Routing Module_
645
645
646
- Almost 20 lines of `AppModule` are devoted to configuring four routes.
647
- Most applications have many more routes and they [add guard services](../guide/router.html#guards)
648
- to protect against unwanted or unauthorized navigations.
649
- Routing considerations could quickly dominate this module and obscure its primary purpose which is to
646
+ Almost 20 lines of `AppModule` are devoted to configuring four routes.
647
+ Most applications have many more routes and they [add guard services](../guide/router.html#guards)
648
+ to protect against unwanted or unauthorized navigations.
649
+ Routing considerations could quickly dominate this module and obscure its primary purpose which is to
650
650
establish key facts about the entire app for the Angular compiler.
651
651
652
652
We should refactor the routing configuration into its own class.
653
- What kind of class?
653
+ What kind of class?
654
654
The current `RouterModule.forRoot()` produces an Angular `ModuleWithProviders` which suggests that a
655
655
class dedicated to routing should be some kind of module.
656
656
It should be a [_Routing Module_](../guide/router.html#routing-module).
657
657
658
- By convention the name of a _Routing Module_ contains the word "Routing" and
658
+ By convention the name of a _Routing Module_ contains the word "Routing" and
659
659
aligns with the name of the module that declares the components navigated to.
660
660
661
661
Create an `app-routing.module.ts` file as a sibling to `app.module.ts`. Give it the following contents extracted from the `AppModule` class:
@@ -667,7 +667,7 @@ block extract-id
667
667
668
668
* Adds `RouterModule.forRoot(routes)` to `imports`.
669
669
670
- * Adds `RouterModule` to `exports` so that the components in the companion module have access to Router declarables
670
+ * Adds `RouterModule` to `exports` so that the components in the companion module have access to Router declarables
671
671
such as `RouterLink` and `RouterOutlet`.
672
672
673
673
* No `declarations`! Declarations are the responsibility of the companion module.
@@ -676,7 +676,7 @@ block extract-id
676
676
677
677
### Update _AppModule_
678
678
679
- Now delete the routing configuration from `AppModule` and import the `AppRoutingModule`
679
+ Now delete the routing configuration from `AppModule` and import the `AppRoutingModule`
680
680
(_both_ with an ES `import` statement _and_ by adding it to the `NgModule.imports` list).
681
681
682
682
Here is the revised `AppModule`, compared to its pre-refactor state:
@@ -770,7 +770,7 @@ block heroes-component-cleanup
770
770
:marked
771
771
### Update the _HeroesComponent_ class.
772
772
773
- The `HeroesComponent` navigates to the `HeroDetailComponent` in response to a button click.
773
+ The `HeroesComponent` navigates to the `HeroDetailComponent` in response to a button click.
774
774
The button's _click_ event is bound to a `gotoDetail` method that navigates _imperatively_
775
775
by telling the router where to go.
776
776
@@ -863,9 +863,8 @@ block css-files
863
863
864
864
+ makeExcerpt('src/app/app.component.ts (active router links)' , 'template' )
865
865
866
- block style-urls
867
- :marked
868
- Add a `styleUrls` property that points to this CSS file as follows.
866
+ :marked
867
+ Add a `styleUrls` property that refers to this CSS file as follows:
869
868
870
869
+ makeExcerpt('src/app/app.component.ts' ,'styleUrls' )
871
870
@@ -935,7 +934,7 @@ block file-tree-end
935
934
.file index.html
936
935
.file styles.css
937
936
.file systemjs.config.js
938
- .file tsconfig.json
937
+ .file tsconfig.json
939
938
.file node_modules ...
940
939
.file package.json
941
940
0 commit comments