? Basic Routing in Angular

? Quick Overview

In Angular, routing lets you move between different components or views inside a single-page application (SPA) without reloading the whole page. The Angular Router allows you to:

Define URL paths and map them to components.
Navigate using links instead of full-page reloads.
Display routed components inside a placeholder called <router-outlet>.

? Key Concepts

Routes Array – An array of objects that map a path to a component.
RouterModule.forRoot() – Configures the root-level routes of the application.
routerLink – Directive used in templates to navigate between routes.
<router-outlet> – Acts as a placeholder where the active routed component is rendered.
Default Route – Empty path '' is usually mapped to a default or home component.

? Syntax & Theory

A basic routing setup in Angular involves three main steps:

Create a routing module (commonly app-routing.module.ts).
Define routes using an array of Routes.
Use routerLink and <router-outlet> in the template to navigate and display components.

? View Code Example – Define Basic Routes

// app-routing.module.ts (basic routing setup)
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

const routes: Routes = [
  { path: '', component: HomeComponent },      // default route for home page
  { path: 'about', component: AboutComponent } // navigates to AboutComponent
];

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

? Navigation Template Example

In your root component template (usually app.component.html), you add navigation links using routerLink and a <router-outlet> where components will be displayed.

? View Code Example – Router Outlet & Links

<!-- app.component.html (navigation with router links) -->
<nav>
  <a routerLink="">Home</a> |
  <a routerLink="about">About</a>
</nav>

<router-outlet></router-outlet>

? What Happens at Runtime?

RouterModule.forRoot(routes) configures the Angular Router with the routes you defined.
When you click a link with routerLink="about", the URL changes to /about without reloading the page.
The router finds the matching route and loads AboutComponent into the <router-outlet>.
When you click the Home link (empty path ''), HomeComponent is displayed as the default route.

This is how Angular achieves fast, smooth navigation while still behaving like a single-page application.

✅ Tips & Best Practices

Always import AppRoutingModule into your AppModule to activate routing.
Use routerLinkActive to highlight the currently active navigation link.
Keep routes modular by creating separate routing modules for large feature modules.
Use meaningful, user-friendly path names (e.g., 'about', 'contact', not 'cmp1').

? View Code Example – Active Link Styling

<!-- Adding routerLinkActive to highlight active route -->
<nav>
  <a routerLink="" routerLinkActive="active-link" [routerLinkActiveOptions]="{ exact: true }">Home</a> |
  <a routerLink="about" routerLinkActive="active-link">About</a>
</nav>

? Try It Yourself

Create an additional ContactComponent and add a route for it (e.g., 'contact').
Add a navigation link for Contact using routerLink and highlight it using routerLinkActive.
Experiment with nested (child) routes by creating routes inside the AboutModule.
Log route changes in a service using Router events to understand navigation flow.

? View Code Example – Add a New Route

// Adding a new Contact route in app-routing.module.ts
import { ContactComponent } from './contact/contact.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'contact', component: ContactComponent } // new contact route
];