# Angular Routing

## Overview
Angular Routing allows navigation between different components in a Single Page Application (SPA) without reloading the page.

It maps URL paths to components and dynamically loads them inside the application.

---

## Key Concepts

### Routes
Routes define the relationship between a URL path and a component.

Example:

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

---

### Router Outlet
`<router-outlet>` is a directive that acts as a placeholder where routed components are displayed.

Example:

<router-outlet></router-outlet>

---

### RouterLink
Used in HTML to navigate between routes.

Example:

<a routerLink="/home">Home</a>
<a routerLink="/about">About</a>

---

### Programmatic Navigation
You can navigate using the Router service.

Example:

constructor(private router: Router) {}

goHome() {
  this.router.navigate(['/home']);
}

---

## Steps to Implement Routing

1. Install Angular Router (included in Angular CLI projects)
2. Define routes in a routes file
3. Import RouterModule
4. Use `<router-outlet>` in the main template
5. Add navigation links using `routerLink`

---