Routing in Angular means navigating between different views (components) without reloading the page.

👉 Instead of loading new HTML pages, Angular:

  • Changes the URL

  • Loads a component

  • Updates the view dynamically (Single Page Application – SPA)

Example URLs:

/first     → FirstComponent
/hello → HelloComponent
/welcome  → WelcomeComponent


Why Routing is Important?

Without routing:

Everything appears on one page ❌

No clean URLs ❌

Poor user experience ❌

With routing:

Clean URLs ✅

Faster navigation (no reload) ✅

Modular & scalable app ✅


open app.routes.ts file 

import { Routes } from '@angular/router';
import { First } from './first/first';
import { Hello } from './hello/hello';
import { Welcome } from './welcome/welcome';

export const routes: Routes = [
    {path:"",component:First},
    {path:"hello",component:Hello},
    {path:"welcome",component:Welcome}


];



go into app.html write following

<a routerLink="/">First</a> |
<a routerLink="/hello">Home</a> | 
<a routerLink="/welcome">About</a> |