Angular 5 -Complete guide to build SPA(Part 4)

Routing

Routing in angular is one of the core feature which enable navigation between views based on user input. Router module is defined in @angular/router.

How it works

In single page application, there will be a master view which gets loaded when the app is rendered in browser initially. The child view gets loaded into the master view asynchronously based on the matching url structure.

The same logic applies on the child view as well in case of nested routes. 

The above image explains how routing works from higher master page level to component at lower level.

index.html is by default the initial page which gets loaded when the application gets loaded in the browser. This view contains a <app-root>  tag, which is not a normal html tag but it tells the angular router to load the bootstrapped AppComponent.

<app-root></app-root> get loaded with the app.component.html which is the bootstrapped component in our case.

app.component.html contains <router-outlet></router-outlet> which helps to load the views/components based on the routing url.

Step 1: Navigation Menu

As the initial step, i'm going to design menu navigation menu. It can be done either in app.component.html or create a new header component for better seperation.

Adding a new header component in component folder using below command.

d:\Jithin\Angular.Sample\src\app\component>ng g component header 

header.component.html

header component html looks like below.

<nav class="navbar navbar-inverse">

<div class="container-fluid">

<div class="navbar-header">

<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target= "#appNavigationBar">

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

</button>

<a class="navbar-brand" href="#">Angular.Sample</a>

</div>

<div class="collapse navbar-collapse" id="appNavigationBar">

<ul class="nav navbar-nav">

<li>

<a [routerLink]="['/EmployeeDashboard']" routerLinkActive="active">Dashboard</a>

</li>

<li class="dropdown">

<a class="dropdown-toggle" data-toggle="dropdown" routerLinkActive="active">Employee

<span class="caret"></span>

</a>

<ul class="dropdown-menu">

<li>

<a [routerLink]="['Employee/AddEmployee']" routerLinkActive="active">Add Employee</a>

</li>

<li>

<a [routerLink]="['Employee/EditEmployee']" routerLinkActive="active">Edit Employee</a>

</li>

</ul>

</li>

</ul>

<ul class="nav navbar-nav navbar-right">

<li>

<a href="#">

<span class="glyphicon glyphicon-user"></span> Sign Up</a>

</li>

<li>

<a href="#">

<span class="glyphicon glyphicon-log-in"></span> Login</a>

</li>

</ul>

</div>

</div>

</nav>

app.component.html

<!--header component-->

<app-header></app-header>

Step 2: Add child component

Each and every route would need a component to  be created. I'm going to create the child components based on my example.

This is how the component folder looks after adding the necessary components.

Step 3: Configuring the routes

This step is one of the important step in routing. Route configuration is done in app.module.ts .

Import the angular router module as below.

import { RouterModule, Routes } from '@angular/router';

Define the the required routes with its path and component.

const employeeChildRoutes =[

{ path: '', redirectTo: 'AddEmployee', pathMatch: 'full' },

{ path: 'AddEmployee', component: AddEmployeeComponent },

{ path: 'EditEmployee', component: EditEmployeeComponent },

];

const appRoutes: Routes = [

{ path: '', component: EmployeeDashboardComponent },

{ path: 'EmployeeDashboard', component: EmployeeDashboardComponent },

{ path: 'Employee', component: EmployeeComponent, children:employeeChildRoutes },

];

A route array can take different parameters.Below are the main 4 parameter which will come handy in any  normal application.

1. path which defines the url structure 
2. component associated with the path
3. children , this helps in configuring the nested route and its again the type of route array. In the above example, you can see employeeChildRoute which is of type route array is assigned as children of Employee path.
4. canActivate  is useful  when you want to perform some pre-processing logic before activating the route. Eg: if you want to restrict the page access for logged in user alone, this check can be done using canActivate with the help of an authgaurd.

Add the routes into the imports array. Modify the import array like below.

imports: [

BrowserModule,

RouterModule.forRoot(appRoutes, {useHash: true})

],

There are different location strategy available in angular. In this example , I'm using HashLocationStrategy. {useHash: true}

4. <router-outlet> tag in parent components

Place <router-outlet></router-outlet> tag in all your  parent component which loads the child component based on the route.

In above example, i have placed the above tag in AppComponent and EmployeeComponent which are my parent components according to the defined route.

<!--header component-->

<app-header></app-header>

<router-outlet></router-outlet>

Output 

The final output of above code looks like below.