Overview Of Routing And Navigation In Angular

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 allows us to jump from one view to another.

prerequisites

• HTML, CSS, and JS.
• Basics of Typescript.
• Components

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 a 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 start with the 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.

We will have two views.

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

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

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { StudentDetailsComponent } from './student-details/student-details.component';
import { StudentMarksComponent } from './student-marks/student-marks.component';

const routes: Routes = [
    { path: 'studentDetails', component: StudentDetailsComponent },
    { path: 'studentMarks', component: StudentMarksComponent }
];

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

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

<!-- The content below is only a placeholder and can be replaced. -->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
</div>
<ul>
  <li>
    <a routerLink="/studentDetails">Student Details</a>
  </li>
  <li>
    <a routerLink="/studentMarks">Student Marks</a>
  </li>
</ul>
<router-outlet></router-outlet>

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

<h2>Student Details</h2>
<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.

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

Now import AppRoutingModule in AppModule.

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

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { StudentDetailsComponent } from './student-details/student-details.component';
import { StudentMarksComponent } from './student-marks/student-marks.component';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [
    AppComponent,
    StudentDetailsComponent,
    StudentMarksComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Run the application.

See the URL ‘localhost:4200’

Click on student Details.

See the URL ‘localhost:4200/student details’.

Click on student marks.

Url is now ‘localhost:4200/student marks.

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 the ‘routerLink’ directive with a path.
• Click to navigate between views.