Introduction To Routing In Angular 8

In this article we'll discuss about angular 8 routing and navigation.

Introduction

 
Routing is an important key feature for every frontend framework, it is the process of dividing the UI of an application using URLs. It allows developers to build modern single-page applications that can be loaded once by a browser and provide multiple views. Before diving into angular routing, we'll discuss some basic concepts.
 

Single Page Application

 
In Single Page Applications only one page is requested from the server, it provides multiple views by dynamically rewriting the current page rather than loading the new pages from server.
 

Router

 
Router is an important entity in Angular and in most of the front end frameworks. It is the code responsible for organizing an application into multiple views. The router will display the home page when the application is loaded first, and it allows navigation based on request. 
 
Now let's get started with angular routing. 
 
Angular is a component based application, a screen view is implemented by one or more components. Routing in angular is referred to as component routing because the router routes each component to a specific URL. 
 

Routes and Path

 
Route is an object, that provides information about which component maps to a specific path. Path is a string that specifies where exactly the resource you want to access is located.
  1. {path:'terms',component:TermsComponent}   
For example, this is the definition of route that maps  'terms' path to the  'termscomponent' component.
 
Steps to be followed to perform routing in Angular 8,
 
Step 1
 
Create a new Angular project using the command.
  1. $ ng new DEMOANGULAR  
Before generating the project, the CLI will prompt to add Angular routing. Click yes to install Angular router package in the project. In previous angular versions, you needed to create this file manually.
 
Step 2
 
In app-routing.module.ts import router module from '@angular/router'.
  1. import { NgModule } from '@angular/core';    
  2. import { Routes, RouterModule } from '@angular/router';    
  3. const routes: Routes = [];    
  4. @NgModule({    
  5.   imports: [RouterModule.forRoot(routes)],    
  6.   exports: [RouterModule]    
  7. })    
  8. export class AppRoutingModule { }    
Step 3
 
After setting up the routing module, add the router outlet in app.component.html.
  1. <div style="text-align:center">    
  2.  <h1>    
  3.     Welcome to {{ title }}!    
  4.   </h1>    
  5. <router-outlet></router-outlet>    
Step 4
 
Finally import AppRoutingModule  in app.module.ts.
  1. import { BrowserModule } from '@angular/platform-browser';    
  2. import { NgModule } from '@angular/core';    
  3. import { AppRoutingModule } from './app-routing.module';    
  4. import { AppComponent } from './app.component';    
  5. @NgModule({    
  6.   declarations: [    
  7.     AppComponent,        
  8.   ],    
  9.   imports: [    
  10.     BrowserModule,    
  11.     AppRoutingModule,        
  12.   ],    
  13.   providers: [],    
  14.   bootstrap: [AppComponent]    
  15. })    
  16. export class AppModule { }    

Simple Demo Project

This is a simple Angular 8 project, it explains about routing and navigation. Create the new component by using the below command in CLI.
 
Introduction To Routing In Angular 8 
 
Now, we have a home, help and terms folder inside the app folder.
 
Introduction To Routing In Angular 8
 
Next, add routing to this component by opening and editing app.routing.module.ts and add those component imports. Add the constant variable of routes by this array of component routes.
 
Introduction To Routing In Angular 8
 
Next, install bootstrap module to make the application look prettier.
 
Introduction To Routing In Angular 8
 
Next, import to app.module.ts and also add it to @NgModule imports array. 
 
Introduction To Routing In Angular 8
 
Finally, modify the app.component.html except <router-outlet></router-outlet> tag.
  1. <div style="text-align:center">    
  2.   <p>{{ title }}!</p>    
  3.   <h1>    
  4.     Welcome to {{ title }}!    
  5.   </h1>    
  6.      
  7. </div>    
  8.     
  9. <div class="navbar-light bg-light" style="height:2cm">    
  10.     <nav  class="navbar navbar-expand-lg navbar-light bg-light" style="float: right" >    
  11.       <a class="navbar-brand" routerLink=""> Routing in Angular 8</a>    
  12.       <button class="navbar-toggler" type="button" (click)="toggleNavbar()" data-toggle="tab" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" >    
  13.         <span class="navbar-toggler-icon"></span>    
  14.       </button>    
  15.         
  16.       <div class="collapse navbar-collapse">    
  17.         <ul class="navbar-nav mr-auto">    
  18.           <li class="nav-item active">    
  19.             <a class="nav-link" routerLink="" routerLinkActive="active">Home <span class="sr-only">(current)</span></a>    
  20.           </li>    
  21.           <li class="nav-item">    
  22.             <a class="nav-link " routerLink="help" routerLinkActive="active">Help</a>    
  23.           </li>    
  24.           <li class="nav-item">    
  25.             <a class="nav-link" routerLink="terms" routerLinkActive="active">Terms</a>    
  26.           </li>    
  27.       </ul>    
  28.     </div>    
  29.   </nav>    
  30.     <router-outlet></router-outlet>    
  31.   </div>  
Output of the project
 
Navigation works by clicking on the navigation item. It's a single page client side routing -- the output is obtained on the same page. Click each component, it will navigate to its own path.
 
Introduction To Routing In Angular 8 
 
Introduction To Routing In Angular 8
 

Summary 

 
Thanks for reading. In upcoming articles will discuss more detailed concepts like wildcard routing and Angular animation to the routed components etc.