Routing
There are new requirements for the Tour of Heroes app:
Add a Dashboard view.
Add the ability to navigate between the Heroes and Dashboard views.
When users click a hero name in either view, navigate to a detail view of the selected hero.
When users click a deep link in an email, open the detail view for a particular hero.
When you’re done, users will be able to navigate the app like this:
View navigations
Add the AppRoutingModule
In Angular, the best practice is to load and configure the router in a separate, top-level module that is dedicated to routing and imported by the root AppModule.
By convention, the module class name is AppRoutingModule and it belongs in the app-routing.module.ts in the src/app folder.
Use the CLI to generate it.
content_copy
ng generate module app-routing --flat --module=app
--flat puts the file in src/app instead of its own folder.
--module=app tells the CLI to register it in the imports array of the AppModule.
The generated file looks like this:
src/app/app-routing.module.ts (generated)
content_copy
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
@NgModule({
imports: [
CommonModule
],
declarations: []
})
export class AppRoutingModule { }
