Angular: Routing and Navigation
April 2, 2020
The Angular Router interprets a browser URL pattern (route) as an instruction to navigate to a view (component) when the route matches a path you create. Anywhere on your site where a link can be clicked to change the URL in the address bar will be caught by the Angular Router.
Routes must be set in an Angular module in order for the Router to detect. It’s typical to place all your routes in a single module, but you can also place routes in any local module if you desire. Unless you really have to, it’s recommended to place all routes in a single module to avoid any unforeseen issues (e.g. when using a wild card, or duplicating routes).
The following shows an example of some routes in an Angular module.
app-routing.module.ts
x
23
23
1
import { NgModule } from '@angular/core';2
import { Routes, RouterModule } from '@angular/router';3
import { HomeComponent } from './components/home/home.component';4
import { AboutComponent } from './components/about/about.component';5
import { ContactComponent } from './components/contact/contact.component';6
import { RegisterComponent } from './components/register/register.component';7
import { NotfoundComponent } from './components/notfound/notfound.component';8
9
const routes: Routes = [10
{path:'', component: HomeComponent},11
{path:'home', component: HomeComponent},12
{path:'about', component: AboutComponent},13
{path:'contact', component: ContactComponent},14
{path:'register', component: RegisterComponent},15
{path:'**', component: NotfoundComponent},16
];17
18
@NgModule({19
imports: [RouterModule.forRoot(routes)],20
exports: [RouterModule]21
})22
export class AppRoutingModule { }23
