Nested Routes and Layout Pages (Professional Routing)

Most real applications have layout pages like:
- dashboard with sidebar
- admin area
- settings pages

You do not want to repeat the sidebar on every page. Nested routes solve this.

## Step 1: Create a layout component

```ts
import { Component } from '@angular/core';
import { RouterOutlet, RouterLink } from '@angular/router';

@Component({
  selector: 'app-dashboard-layout',
  standalone: true,
  imports: [RouterOutlet, RouterLink],
  template: `
    <div class="layout">
      <aside>
        <a routerLink="/dashboard">Home</a>
        <a routerLink="/dashboard/settings">Settings</a>
      </aside>

      <main>
        <router-outlet></router-outlet>
      </main>
    </div>
  `,
})
export class DashboardLayoutComponent {}
```

## Step 2: Add child routes

```ts
export const routes = [
  {
    path: 'dashboard',
    component: DashboardLayoutComponent,
    children: [
      { path: '', loadComponent: () => import('./dash-home.component').then(m => m.DashHomeComponent) },
      { path: 'settings', loadComponent: () => import('./dash-settings.component').then(m => m.DashSettingsComponent) },
    ],
  },
];
```

## How it renders

```mermaid
flowchart TD
  A[/dashboard URL] --> B[DashboardLayoutComponent]
  B --> C[router-outlet inside layout]
  C --> D[DashHomeComponent]
```

> Next: Route resolvers to load data before page opens.