reveal.js

# Service: การสร้างและแชร์ข้อมูลระหว่าง Component

Lesson 2 - Angular Service, DI และการเชื่อมต่อ API

**Service** คือ Class ที่ใช้เก็บ Business Logic, ดึงข้อมูล, คำนวณ หรือแชร์ข้อมูลระหว่าง Component เพื่อให้ Component เน้นหน้าที่แสดงผลและรับ interaction จากผู้ใช้

---

## 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["ยุค Component หนัก / Fat Component"]
    A["Logic อยู่ใน Component<br/>ดูแลยาก"]
  end
  subgraph Era2["ยุค Service Layer / Service Pattern"]
    B["แยก Logic<br/>Separation of Concerns"]
    C["Shared Data<br/>แชร์ข้อมูลข้าม Component"]
  end
  subgraph Era3["ยุค Reactive State / RxJS State"]
    D["BehaviorSubject<br/>เก็บค่าล่าสุด"]
    E["Observable State<br/>Subscribe เพื่ออัปเดต UI"]
  end
  A --> B --> C --> D --> E
</pre>

---

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

- **สร้าง Service** ด้วย `ng generate service services/user`
- **แชร์ข้อมูล** ระหว่าง Component ที่ไม่มีความสัมพันธ์กันได้ผ่าน Service
- **BehaviorSubject** เหมาะกับ Shared State เพราะมีค่าเริ่มต้นและจำค่าล่าสุด
- **Singleton Pattern** เกิดเมื่อใช้ `providedIn: 'root'`
- **Inject Service ใน Service อื่น** ได้เช่นเดียวกับ Inject ใน Component
- **Separation of Concerns** คือการแยก Logic ออกจาก Component

---

## ตารางเปรียบเทียบการแชร์ข้อมูล

| วิธี | เหมาะกับ | ข้อจำกัด |
|---|---|---|
| `@Input()` | Parent ส่งข้อมูลให้ Child | ใช้กับ Component ที่สัมพันธ์กัน |
| `@Output()` | Child ส่ง Event ให้ Parent | ต้องมีสายสัมพันธ์ใน Tree |
| Service + BehaviorSubject | Component ไม่สัมพันธ์กัน | ต้องจัดการ State ให้ชัดเจน |
| Route State | ส่งข้อมูลผ่าน Navigation | ไม่เหมาะกับ State ซับซ้อน |

---

## Mermaid Diagram: Shared State ผ่าน Service

---

## สมการคณิตศาสตร์: จำนวนการส่งต่อข้อมูล

- **P** คือจำนวนชั้นการส่ง props/input โดยประมาณใน Component Tree
- **n** คือจำนวนระดับของ Component ที่ข้อมูลต้องผ่าน
- ถ้าใช้ Service กลาง ค่า **P** สามารถลดลงได้เพราะ Component เข้าถึง State ร่วมโดยตรง

---

## Code Example

```typescript
// user.service.ts
// Service แชร์ข้อมูลผู้ใช้ด้วย BehaviorSubject
import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';

export interface User {
  id: number;
  name: string;
}

@Injectable({
  providedIn: 'root'
})
export class UserService {
  private userSubject = new BehaviorSubject<User | null>(null);

// เปิดเป็น Observable เพื่อไม่ให้ Component แก้ Subject โดยตรง
  user$: Observable<User | null> = this.userSubject.asObservable();

setUser(user: User): void {
    this.userSubject.next(user);
  }

clearUser(): void {
    this.userSubject.next(null);
  }
}
```

```typescript
// profile.component.ts
// Component เรียก setUser เพื่ออัปเดต Shared State
import { Component } from '@angular/core';
import { UserService } from './user.service';

@Component({
  selector: 'app-profile',
  template: `<button (click)="login()">Login</button>`
})
export class ProfileComponent {
  constructor(private userService: UserService) {}

// ตัวอย่างการใช้งาน:
// Component อื่นสามารถ subscribe userService.user$ เพื่อรับค่าล่าสุด
```

---

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

1. สร้าง `UserService`
2. ใช้ `BehaviorSubject` เก็บข้อมูลผู้ใช้
3. สร้าง Component หนึ่งสำหรับแก้ชื่อผู้ใช้
4. สร้างอีก Component สำหรับแสดงชื่อผู้ใช้

---

## End

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