Routing in Angular

Shailendra Chauhan  Print 
28 Aug 2018
 
Beginner
546

Routing is a way to serve web page based upon the requested URL. In Angular which is used to build SPA, URLs are not served from the server and never reload the page. The URLs are strictly local in the browser and serve the page(components) from local. Every time when you request an Url, the Angular router navigates to the new component and renders its template and updates the history and URL.

Steps to Configure Angular Routing

There are following steps you have to follow to configure routing in Angular.

  1. Step1 : Define the routes

    Angular application routes are recommned to define with in a separate module using an array as given below:

     
    import { NgModule } from '@angular/core';
    
    const routes: Routes = [
     { path: "", component: HomeComponent },
     { path: "about", component: AboutComponent }
    ];
    
    @NgModule({
     imports: [RouterModule.forRoot(routes)],
     exports: [RouterModule]
     })
     export class AppRoutingModule {}
    
  2. Step2 : Define the container

    RouterOutlet is the container where the router render the component when user request a route.

     
     <div>
     <router-outlet></router-outlet>
     </div>
    
  3. Step3 : Define the links

    RouterLink directive is used to define links to a route name.

     
     <ul class="nav navbar-nav"> 
     <li>
     <a [routerLink]="['/']">Home</a>
     </li>
     <li>
     <a [routerLink]="['/about']">About</a>
     </li>
     </ul>
    
  4. Step4 : Define Route for 404

    In Angular, you can define a route which will be serve, if the requested URL doesn't match any paths in the routes configuration. The ** charactres are used to define the path for route not found. You can define this path as given below:

     
     const routes: Routes = [
     { path: "", component: HomeComponent },
     { path: "about", component: AboutComponent },
     
     { path: "notfound", component: NotfoundComponent }, 
     { path: "**", redirectTo: "notfound" }
     ];
     

Note

  1. In Angular routes configuration the order of the routes matters. Angular router uses a first-match wins strategy when matching routes.

  2. So more specific routes should be placed at top level and less specific routes should be placed in bottom in routes configuration.

Location Strategies

Location Strategies in Angular defines how the URL/Request is being resolved and determines how your URL will look like in the browser. Angular supports two types of Location Strategies

PathLocation Strategy

The PathLocation strategy is default location strategy in Angular. In this strategy the URL looks like the multi page applications as http://localhost:4200/product. This strategy can be configured as given below:

 
 //step1: src/index.html
 <base href="/"> Use at main page i.e. index.html page

 //step2: src/app/app.routing.ts
 RouterModule.forRoot(appRoutes) in routing module
 

Advantages and Disadvantages of PathLocation Strategy

  • Supports Server-Side Rendering
  • SEO Friendly
  • Older Browsers don’t support

HashLocation Strategy

The hashLocation strategy you have to configure in Angular. In this strategy the URL contains a hash character as http://localhost:4200/#/product. This strategy can be configured as given below:

 
 //step1: src/index.html
 <base href="/"> Use at main page i.e. index.html page

 //step2: src/app/app.routing.ts
 RouterModule.forRoot(appRoutes, {useHash: true}) in routing module
 

Advantages and Disadvantages of HashLocation Strategy

  • Supported by all browsers
  • Doesn't Support Server-Side Rendering
  • Not SEO Friendly because of special character Hash

Child/Nested Routes

Sometimes you need to render one or more components on request on a component. In that case, child/nested routing help us. This is a powerful feature in Angular router to render child/nested components using route.

Configuring Child/Nested Routes

To define a child/nested routes a Children option is used in routes array as given below:

 
 const routes: Routes = [
 { path: "", component: HomeComponent },
 { path: "about", component: AboutComponent,
 children: [
 { path: "profile", component: ProfileComponent },
 { path: "changepassword", component: ChangepasswordComponent }
 ]
 }
 ];
 
 
 <h2>About Us</h2>
 <hr>
 <p>This is about us page for the company!</p>
 
 Activating the Child Routes 
 <a [routerLink]="['profile']">Profile</a>
 <a [routerLink]="['changepassword']">Change Password</a> 
 <router-outlet></router-outlet>
Summary

This article is meant to be a getting started to the concept of Routing in ANgular. It's meant to show the most common uses, not all of them.

Hands-on Learning
+