Overview Of Routing And Navigation In Angular

In this article we are going to learn the use of routing in angular. In any general application there are multiple views and to perform the navigation from one view to another we required routing. Routing allow us to jump from one view to another.

Introduction

In this article, we are going to learn the use of routing in Angular. In any general application, there are multiple views and to perform the navigation from one view to another, we require routing. Routing allowsus to jump from one view to another.

prerequisitees

Let us create a sample TestApp. For this you should have installed the below for the development environment,

  1. Node
  2. Npm (comes when you install node)
  3. Angular CLi.
  4. Text Editor.

For creating a new application run the below command on your location.

> ng new TestApp

Once your command is completed you will have TestApp folder created inside your sample folder.

Now you will have your project folder called 'TestApp'.

Note
See my previous article “Getting started with Angular CLI.” If you want the installation and introduction from the basics and start with execution of the sample application.

Let us start by creating a simple application having two components with a link for both views in the home page index.html, and make the navigation possible on their clicks, respectively.

Let us create two components,

Routing And Navigation In Angular 

We will have two views,

  • Localhost:4200/studentDetails
  • Localhost:4200/studentMarks

 

Inside app folder add routing file app-routing.module.ts and add the below contents,

  1. import { NgModule } from '@angular/core';  
  2. import { Routes, RouterModule } from '@angular/router';  
  3. import { StudentDetailsComponent } from './student-details/student-details.component';  
  4. import { StudentMarksComponent } from './student-marks/student-marks.component';  
  5.   
  6. const routes:Routes = [  
  7.     {path:'studentDetails', component : StudentDetailsComponent},  
  8.     {path:'studentMarks', component : StudentMarksComponent}  
  9. ];  
  10.   
  11. @NgModule({  
  12.     imports : [RouterModule.forRoot(routes)],  
  13.     exports: [RouterModule]  
  14. })  
  15. export class AppRoutingModule{}  

Open app.component.html and add the below contents,

  1. <!--The content below is only a placeholder and can be replaced.-->  
  2. <div style="text-align:center">  
  3.   <h1>  
  4.     Welcome to {{ title }}!  
  5.   </h1>  
  6. </div>  
  7. <ul>  
  8.   <li>  
  9.     <a routerLink="/studentDetails">Student Details</a>  
  10.   </li>  
  11.   <li>  
  12.     <a routerLink="/studentMarks">Student Marks</a>  
  13.   </li>  
  14. </ul>  
  15. <router-outlet></router-outlet>  

Open student-details.component.html and add the below contents,

  1. <h2>Student Details</h2>  
  2. <p>This is student details page. You can fetch the details of students through services and render here in this view.</p>  

Open student-marks.component.html and add the below contents,

  1. <h2>Marks Details</h2>  
  2. <p>This is student marks details page. you can perform the fetching of stuedent marks and render here in this view through services.</p>  

Now import AppRoutingModule in AppModule.

Open app.module.ts and add the below contents,

  1. import { BrowserModule } from '@angular/platform-browser';  
  2. import { NgModule } from '@angular/core';  
  3. import {FormsModule} from '@angular/forms';  
  4. import { AppComponent } from './app.component';  
  5. import { StudentDetailsComponent } from './student-details/student-details.component';  
  6. import { StudentMarksComponent } from './student-marks/student-marks.component';  
  7. import { AppRoutingModule } from './app-routing.module';  
  8.   
  9. @NgModule({  
  10.   declarations: [  
  11.     AppComponent,  
  12.     StudentDetailsComponent,  
  13.     StudentMarksComponent  
  14.   ],  
  15.   imports: [  
  16.     BrowserModule,  
  17.     AppRoutingModule  
  18.   ],  
  19.   providers: [],  
  20.   bootstrap: [AppComponent]  
  21. })  
  22. export class AppModule { }  

Run the application,

Routing And Navigation In Angular 

See the url ‘localhost:4200’

Click on student Details.

Routing And Navigation In Angular 

See the url ‘localhost:4200/studentDetails’

Click on student marks.

Routing And Navigation In Angular 

Url is now ‘localhost:4200/studentMarks

So now we are done with the sample navigation using routing in angular.

What we have done:

  • In Index.html we should have ‘<base href=”/”>’
  • In app-routing module configures the routes. Each path will have a path and corresponding component.
  • After defining routes pass the routes to the RouterModule.
  • Export the AppRoutingModule.
  • Import AppRoutingModule in appModule and include it in the imports array.
  • To navigate we have links with ‘routerLink’ directive with a path.
  • Click to navigate between views.