Angular Routing

Routing means navigation. When we create a website or application, it maybe has the multiple pages. Normally we have home page there we add the menu for page navigation. For navigation we using the anchor <a href=’/aboutus’></a> tag, its basic html tag and when you click on its browser to bring us to that corresponding page. In Angular you have to configure all the routing url before you use it, that part called angular routing.

Single Page Application

Angular is a framework that helps to develop the Single Page Application (SPA). this is main feature of angular framework. In SPA the page will not be reload at every time of navigation from one component to another component. But in normal application the page will be reload at every time of navigation from one page to another page.

In this blog, I have posted the how we can do the routing at top level and child level.

router-outlet is a selector for displaying the child components based on URL path. We can have the multiple router-outlet inside the different components. the router-outlet which is present in the app.component.html is the top level

Routing config:

app-routing.module.ts

const routes: Routes = [
  {path:'', pathMatch :'full', redirectTo:"/admin/dashboard"},

  // with Children components
  {path:'admin', component: AdminViewComponent, children: adminRoutes},
  
  // Top level
  {path: 'login', component: LoginComponent},
  {path: '**', component: PageNotFoundComponent},
];


// Admin Children components
const adminRoutes = [
  {path:'', pathMatch :'full', redirectTo:"dashboard"},
  {path:'dashboard', component: DashboardComponent},
];

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

app.component.html

<a routerLink="login">Login</a>

<router-outlet></router-outlet>

admin-view.component.html

<a routerLink='dashboard' routerLinkActive="active">Dashboard</a>
<router-outlet></router-outlet>

Conclusion

Now you should know the answer for giving below questions.

• What is routing?
• How to configure it?
• What is the single page application?