Routing in Angular
Imagine you're reading a book with thousands of pages. Without a table of contents or page numbers, finding a specific chapter would be impossible. Routing in Angular is exactly that – it's the table of contents for your single-page application (SPA). It allows users to navigate between different views without reloading the entire page.
In a traditional multi-page website, every click requests a new HTML page from the server. In an Angular SPA, we load one HTML page once, and then JavaScript dynamically shows/hides content based on the URL. This makes navigation instant and smooth.
Why Routing?
- Bookmarkable URLs – Users can bookmark specific pages.
- Browser history – Back/forward buttons work naturally.
- Organized code – Different features in different components.
- Lazy loading – Load only what's needed (we'll learn later).
When you create a new Angular project, it asks: "Would you like to add Angular routing?" If you say yes, it automatically sets up routing for you.
Here's what you get in
app-routing.module.ts:import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
This empty routes array is where we'll define all our application routes.
Two Minute Drill
- Routing enables navigation between views in SPAs.
- URL changes without page reload.
- Bookmarkable URLs and browser history work naturally.
- Angular CLI can set up routing automatically.
- Routes are defined in a Routes array.
Need more clarification?
Drop us an email at career@quipoinfotech.com