reveal.js

# การเชื่อมต่อ Angular Frontend กับ Node.js/Express Backend

Lesson 2 - Angular Universal และ Full-Stack Integration

**Full-stack Integration** คือการเชื่อม Angular Frontend กับ Backend API เช่น Node.js/Express โดยจัดการ URL, CORS, environment, loading state, error state และ type ที่ใช้ร่วมกันให้เป็นระบบ

---

## 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["ยุคแยก Front/Back / Separate Apps"]
 A["Angular Dev Server localhost:4200"]
 B["Express API localhost:3000"]
 end
 subgraph Era2["ยุค Proxy/CORS / Development Integration"]
 C["proxy.conf.json forward /api"]
 D["cors middleware allow origin"]
 end
 subgraph Era3["ยุค Shared Contract / Type-safe Integration"]
 E["HttpClient Service เรียก API"]
 F["Shared Types interface ร่วมกัน"]
 end
 A --> C --> E
 B --> D --> E --> F
</pre>

---

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

- **Proxy Configuration** ใช้ `proxy.conf.json` forward request ใน development
- **CORS บน Express** ต้องตั้ง origin ให้รับ request จาก Angular Dev Server
- **API Service** ใน Angular ใช้ `HttpClient` เรียก Backend API
- **Environment Files** แยก `environment.ts` และ `environment.prod.ts`
- **Loading/Error State** ช่วยให้ UI สื่อสารสถานะกับผู้ใช้
- **Shared Types** คือการแชร์ TypeScript Interface ระหว่าง Frontend และ Backend

---

## ตารางแนวทางเชื่อมต่อ

| วิธี | ใช้เมื่อ | ข้อดี | ข้อควรระวัง |
|---|---|---|---|
| Angular proxy | development | ไม่ต้องเปิด CORS กว้าง | ใช้เฉพาะ dev |
| CORS middleware | dev/prod API แยก domain | ควบคุม origin ได้ | ตั้งค่า credentials ให้ถูก |
| Same domain deploy | production | ลดปัญหา CORS | ต้อง config reverse proxy |
| Shared types | monorepo | ลด type mismatch | ต้องจัด package structure |

---

## Mermaid Diagram: Integration Flow

---

## Code Example

```json
// proxy.conf.json
// forward request /api จาก Angular ไป Express ระหว่าง development
{
  "/api": {
    "target": "http://localhost:3000",
    "secure": false,
    "changeOrigin": true
  }
}
```

```json
// angular.json เฉพาะส่วน serve.options
{
  "serve": {
    "options": {
      "proxyConfig": "proxy.conf.json"
    }
  }
}
```

```ts
// lesson-api.service.ts
// Angular service สำหรับเรียก backend API
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

export interface Lesson {
  id: number;
  title: string;
}

@Injectable({ providedIn: 'root' })
export class LessonApiService {
  constructor(private http: HttpClient) {}

getLessons(): Observable<Lesson[]> {
 return this.http.get<Lesson[]>('/api/lessons');
 }
}

// ตัวอย่างการใช้งาน:
// this.lessonApi.getLessons().subscribe(...)
```

```js
// server.mjs
// Express API สำหรับให้ Angular เรียก
import express from 'express';
import cors from 'cors';

const app = express();
app.use(cors({ origin: 'http://localhost:4200' }));

app.get('/api/lessons', (req, res) => {
  res.json([{ id: 1, title: 'Full-stack Integration' }]);
});

app.listen(3000, () => console.log('API on http://localhost:3000'));

// ตัวอย่างการใช้งาน:
// ng serve --proxy-config proxy.conf.json
// node server.mjs
```

---

## วิดีโอแนะนำ

- [YouTube: Angular Express API Integration](https://www.youtube.com/results?search_query=Angular+Express+API+integration)

---

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

- สร้าง Express API `GET /api/lessons`
- สร้าง Angular service เรียก API
- เพิ่ม loading และ error state ใน Component
- ทดลองใช้ proxy configuration ใน development

---

## End

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