Routing and Navigation in Angular

Angular is a SPA(Single page Application).

In Single page application we change what user see by showing hiding the portion of the display corresponding to a component.

In this way we avoid requesting server to load a page on navigation.

This is developed for better user experience. In this we load components based the user action and load only corresponding component by this we avoided server page rendering and achieved better user experience.

To handle this navigation we use Angular Router. This will read the URL and provide the corresponding component defined in Router for that URL.

In this Blog we will learn about angular Routing and navigation and passing parameters in navigation and reading parameters in second component.

Topics will cover is.

Creating Angular application
Create Components
Adding Routing Module
Define all Routes
Add Navigation for Menus
Wildcards

1. Creating Angular application :

We have created a blog how to create angular application. Please follow that and create project.

https://webdevelopmentknowledge.blogspot.com/2021/02/create-your-first-angular-app-using-vs-code.html

Command to create angular application

ng new my-firstAngular-app

after that add angular routing ? y/N - select N so that we will only configure Route Module and will get more understanding on this.

Go to Project by cd my-firstAngular-app

and code . command to open it in visual studio code.

2. Create Components:

Open app.component.html and delete everything.

We will create 2 Components to navigate from one to another to test Routing.

Command to create component:

ng generate component {component name}

here we will create Home and ContactUs and AboutUs

we have successfully create 3 components.

3. Adding Routing Module

Command to create component:

ng generate module {module name}

Now your application structure will be as shown in figure.

Import App routing module in app module .

4. Define all Routes:

Open app-routing module

Add all the components:

import { HomeComponent } from '../home/home.component';

import { ContactUsComponent } from '../contact-us/contact-us.component';

import { AboutUSComponent } from '../about-us/about-us.component';

Add Route Modules

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

then add this below for imports and exports

const routes:Routes=[

{ path: 'Home', component: HomeComponent },

{ path: 'Contactus', component: ContactUsComponent },

{ path: 'Aboutus', component: AboutUSComponent },

];

@NgModule({

declarations: [],

imports: [

CommonModule,RouterModule.forRoot(routes)

exports:[RouterModule]

})

after adding all this app-routing.module will look as below.

5. Add Navigation for Menus:

Now open app.component.htmtl and delete if any code it their and paste below code.

<router-outlet> is used to show the component related to that route.

Code:

<h1>Angular Router App</h1>

<nav>

<ul>

<li><a routerLink="/Contactus" routerLinkActive="active">Contact US</a></li>

<li><a routerLink="/Aboutus" routerLinkActive="active">About US</a></li>

</ul>

</nav>

<router-outlet></router-outlet>

Then go to command prompt to this specific folder and run ng serve command to run the angular project.

Open the port specific in cmd.

Then Click on Home:

Then Click on Contact US:

Then Click on About US:

we have successfully achieved routing in Angular

Wildcards:

Our Application should handle when user try to navigate to a URL and that URL not exist or he is trying wrong URL. We Should show Appropriate page in this case.

To handle this we have wildcard.

add new component saying pagenottfound