reveal.js

# HttpClient Module: GET, POST, PUT, DELETE

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

**HttpClient** คือ Service ของ Angular สำหรับเรียก HTTP API โดย method เช่น `get`, `post`, `put`, `delete` จะคืนค่าเป็น **Observable** เพื่อให้จัดการข้อมูลแบบ asynchronous ได้

---

## 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["ยุค AJAX / XMLHttpRequest"]
 A["XMLHttpRequest Callback Based"]
 end
 subgraph Era2["ยุค Fetch / Promise API"]
 B["fetch() Promise Based"]
 end
 subgraph Era3["ยุค Angular HttpClient / Observable API"]
 C["HttpClient Observable Based"]
 D["Interceptors จัดการ Header/Error กลาง"]
 end
 A --> B --> C --> D
</pre>

---

## ขั้นตอนใช้งาน

1. เพิ่ม **HttpClientModule** ใน `AppModule imports`
2. Inject **HttpClient** ด้วย `constructor(private http: HttpClient) {}`
3. เรียก `http.get<User[]>('/api/users')`
4. ส่งข้อมูลด้วย `http.post<User>('/api/users', body)`
5. อัปเดตข้อมูลด้วย `http.put('/api/users/1', body)`
6. ลบข้อมูลด้วย `http.delete('/api/users/1')`

---

## Header และ Query Parameters

- **HttpHeaders** ใช้ส่ง `Authorization Token` และ `Content-Type`
- **HttpParams** ใช้ส่ง Query String Parameters เช่น `page=1&limit=10`
- **response Observable** ต้อง subscribe หรือใช้ async pipe จึงจะเริ่มทำงาน

---

## ตาราง CRUD

| Method | HttpClient | หน้าที่ | ตัวอย่าง Endpoint |
|---|---|---|---|
| GET | `http.get<T>()` | ดึงข้อมูล | `/api/users` |
| POST | `http.post<T>()` | สร้างข้อมูล | `/api/users` |
| PUT | `http.put<T>()` | อัปเดตข้อมูลเต็ม | `/api/users/1` |
| PATCH | `http.patch<T>()` | อัปเดตบางส่วน | `/api/users/1` |
| DELETE | `http.delete<T>()` | ลบข้อมูล | `/api/users/1` |

---

## Mermaid Diagram: Request/Response

<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
 A["Component หน้าจอ"] --> B["UserService เรียก API"]
 B --> C["HttpClient HTTP Request"]
 C --> D["REST API Server"]
 D --> E["JSON Response ข้อมูลตอบกลับ"]
 E --> B --> A
</pre>

---

## สมการคณิตศาสตร์: จำนวน Request รวม

<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
 <mi>R</mi>
 <mo>=</mo>
 <msub><mi>R</mi><mi>get</mi></msub>
 <mo>+</mo>
 <msub><mi>R</mi><mi>post</mi></msub>
 <mo>+</mo>
 <msub><mi>R</mi><mi>put</mi></msub>
 <mo>+</mo>
 <msub><mi>R</mi><mi>delete</mi></msub>
</math>

- **R** คือจำนวน Request ทั้งหมด
- **R_get** คือจำนวนการดึงข้อมูล
- **R_post** คือจำนวนการสร้างข้อมูล
- **R_put** คือจำนวนการอัปเดตข้อมูล
- **R_delete** คือจำนวนการลบข้อมูล

---

## Code Example

```typescript
// user-api.service.ts
// Service สำหรับเรียก REST API ด้วย HttpClient
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
import { Observable } from 'rxjs';

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

@Injectable({ providedIn: 'root' })
export class UserApiService {
  private apiUrl = '/api/users';

constructor(private http: HttpClient) {}

getUsers(page = 1): Observable<User[]> {
 const params = new HttpParams().set('page', page);
 return this.http.get<User[]>(this.apiUrl, { params });
 }

createUser(body: Omit<User, 'id'>): Observable<User> {
 const headers = new HttpHeaders({ 'Content-Type': 'application/json' });
 return this.http.post<User>(this.apiUrl, body, { headers });
 }

updateUser(id: number, body: Partial<User>): Observable<User> {
 return this.http.put<User>(`${this.apiUrl}/${id}`, body);
 }

deleteUser(id: number): Observable<void> {
 return this.http.delete<void>(`${this.apiUrl}/${id}`);
 }
}

// ตัวอย่างการใช้งาน:
// this.userApi.getUsers().subscribe(users => this.users = users);
```

---

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

- สร้าง `UserApiService`
- เพิ่ม method `getUsers`, `createUser`, `updateUser`, `deleteUser`
- แสดง loading และ error state ใน 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>