reveal.js

# Angular Router: RouterModule, routerLink, ActivatedRoute

Lesson 1 - Angular Routing, Forms และ State

**Angular Router** คือระบบนำทางของ Angular สำหรับเชื่อม URL กับ Component ทำให้แอปแบบ Single Page Application สามารถมีหลายหน้า หลาย URL และรองรับ route parameter ได้

---

## Timeline/ประวัติศาสตร์

<pre class="mermaid">
%%{init: {"theme": "base", "themeVariables": {"primaryColor": "#fabd2f", "primaryTextColor": "#282828", "primaryBorderColor": "#b57614", "lineColor": "#7c6f64", "secondaryColor": "#83a598", "tertiaryColor": "#b8bb26", "background": "#fbf1c7", "mainBkg": "#ebdbb2", "fontFamily": "Tahoma, sans-serif"}}}%%
flowchart LR
 subgraph Era1["ยุค Multi-page / Server Navigation"]
 A["Server Render เปลี่ยนหน้าด้วย Request ใหม่"]
 end
 subgraph Era2["ยุค SPA / Client Routing"]
 B["Client Router เปลี่ยน Component ใน Browser"]
 C["Route Params URL มีข้อมูล"]
 end
 subgraph Era3["ยุค Modular Routing / Angular Router"]
 D["RouterModule กำหนด Route"]
 E["Lazy Routes โหลดเมื่อจำเป็น"]
 end
 A --> B --> C --> D --> E
</pre>

---

## แนวคิดสำคัญ

- **`RouterModule.forRoot(routes)`** ใช้ลงทะเบียน Route หลักของแอป
- **Route Configuration** เขียนได้เช่น `{ path: 'users', component: UsersComponent }`
- **`<router-outlet>`** คือจุดที่ Router นำ Component มาแสดง
- **`routerLink`** ใช้นำทางใน Template เช่น `[routerLink]="['/users', userId]"`
- **`routerLinkActive="active"`** เพิ่ม CSS Class เมื่อ Route ตรง
- **`router.navigate(['/path'])`** ใช้นำทางด้วย TypeScript
- **ActivatedRoute** ใช้ดึง Route Params, Query Params และ Route Data

---

## ตารางเปรียบเทียบเครื่องมือ Router

| เครื่องมือ | ใช้ที่ไหน | หน้าที่ | ตัวอย่าง |
|---|---|---|---|
| `RouterModule.forRoot` | Module | ลงทะเบียน Route หลัก | `forRoot(routes)` |
| `router-outlet` | Template | จุดแสดง Component | `<router-outlet>` |
| `routerLink` | Template | นำทางด้วย HTML | `[routerLink]="['/users']"` |
| `Router` | TypeScript | นำทางด้วยโค้ด | `navigate(['/users'])` |
| `ActivatedRoute` | TypeScript | อ่านค่าจาก URL | `paramMap` |

---

## Mermaid Diagram: Router Flow

<pre class="mermaid">
%%{init: {"theme": "base", "themeVariables": {"primaryColor": "#fabd2f", "primaryTextColor": "#282828", "primaryBorderColor": "#b57614", "lineColor": "#7c6f64", "secondaryColor": "#83a598", "tertiaryColor": "#b8bb26", "background": "#fbf1c7", "mainBkg": "#ebdbb2", "fontFamily": "Tahoma, sans-serif"}}}%%
flowchart TD
 A["URL /users/12 ที่อยู่หน้าเว็บ"] --> B["Router ตรวจเส้นทาง"]
 B --> C["Route Config กำหนด path"]
 C --> D["UsersDetailComponent Component ปลายทาง"]
 D --> E["router-outlet ตำแหน่งแสดงผล"]
 D --> F["ActivatedRoute อ่าน id = 12"]
</pre>

---

## Code Example

```typescript
// app-routing.module.ts
// กำหนด Route หลักของแอป
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { UsersComponent } from './users/users.component';
import { UserDetailComponent } from './user-detail/user-detail.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'users', component: UsersComponent },
  { path: 'users/:id', component: UserDetailComponent },
  { path: '**', redirectTo: '' }
];

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

```html


<nav>
 <a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">Home</a>
 <a routerLink="/users" routerLinkActive="active">Users</a>
</nav>

<router-outlet></router-outlet>
```

```typescript
// user-detail.component.ts
// อ่าน route param ด้วย ActivatedRoute
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';

@Component({
 selector: 'app-user-detail',
 template: `User ID: {{ userId }}`
})
export class UserDetailComponent implements OnInit {
 userId = '';

constructor(private route: ActivatedRoute, private router: Router) {}

ngOnInit(): void {
    this.userId = this.route.snapshot.paramMap.get('id') ?? '';
  }

goBack(): void {
    this.router.navigate(['/users']);
  }
}

// ตัวอย่างการใช้งาน:
// เปิด /users/12 แล้ว Component จะอ่าน id ได้เป็น 12
```

---

## กิจกรรมท้ายบท

1. สร้างหน้า Home, Users และ User Detail
2. กำหนด Route `/users/:id`
3. ใช้ `routerLink` นำทางไปยัง User Detail
4. อ่าน `id` ด้วย `ActivatedRoute`

---

## End

<a href="/web-programming/09-angular-routing-forms/index.md" style="display:inline-block;padding:0.6em 1em;border-radius:8px;background:#fabd2f;color:#282828;text-decoration:none;font-weight:700;">กลับหน้าบทเรียน</a>