> For the complete documentation index, see [llms.txt](https://fancyloves.gitbook.io/frontendtech/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://fancyloves.gitbook.io/frontendtech/angularjs/fundamentals/module/routing.md).

# Routing

An Angular 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.

## Generate RoutingModule

By convention, the module class name is AppRoutingModule and it belongs in the app-routing.module.ts in the src/app folder.

```
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.

You generally don't declare components in a routing module so you can **delete the @NgModule.declarations array** and **delete CommonModule references** too.

```
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from "@angular/router";
import { HeroesComponent } from './heroes/heroes.component';

const routes: Routes = [
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
  { path: 'heroes', component: HeroesComponent },
  { path: 'dashboard', component: DashboardComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {
}
```

### Route

Routes tell the router which view to display when a user clicks a link or pastes a URL into the browser address bar.

A typical Angular Route has two properties:

1. path: a string that matches the URL in the browser address bar.
2. component: the component that the router should create when navigating to this route.

### Default Path

```
{ path: '', redirectTo: '/dashboard', pathMatch: 'full' }
```

### forRoot()

The method is called `forRoot()` because you configure the router at the application's root level. The `forRoot()` method supplies the service providers and directives needed for routing, and performs the initial navigation based on the current browser URL.

## Place \<router-outlet>

Open the AppComponent template replace the \<app-heroes> element with a \<router-outlet> element.

The \<router-outlet> tells the router where to display routed views.

src/app/app.component.html (router-outlet)

```
<h1>{{title}}</h1>
<router-outlet></router-outlet>
<app-messages></app-messages>
```

## url Navigator

The routerLink is the selector for the RouterLink directive that turns user clicks into router navigations. It's another of the public directives in the RouterModule.

```
<h1>{{title}}</h1>
<nav>
  <a routerLink="/heroes">Heroes</a>
  <a routerLink="/dashboard">Dashboard</a>
</nav>
<router-outlet></router-outlet>
<app-messages></app-messages>
```

## Location Parameter

In the component the router routes to, /detail/:id , add the following imports:

src/app/hero-detail/hero-detail.component.ts

```
import { ActivatedRoute } from '@angular/router';
import { Location } from '@angular/common';
import { HeroService }  from '../hero.service';
```

Inject the ActivatedRoute, HeroService, and Location services into the constructor, saving their values in private fields:

```
constructor(
  private route: ActivatedRoute,
  private heroService: HeroService,
  private location: Location
) {}
```