บริการ (services) และ dependency injection ใน Angular คืออะไร?

Question

Accepted Answer

**บริการ** คือ class สำหรับ **ลอจิกที่ไม่เกี่ยวกับ UI** — การดึงข้อมูล, กฎทางธุรกิจ, สถานะที่แชร์, การบันทึกข้อมูล — ซึ่ง component สามารถนำกลับมาใช้ได้ **Dependency Injection (DI)** คือวิธีที่ Angular *จัดหา* บริการเหล่านั้นให้กับ component ที่ต้องการใช้ แทนที่ component จะต้องสร้างเอง

## การกำหนดบริการ

```ts
import { Injectable } from "@angular/core";

@Injectable({ providedIn: "root" }) // makes it a singleton available app-wide
export class UserService {
  private users = [];
  getUsers() { return this.users; }
  addUser(u) { this.users.push(u); }
}
```

ตัวกำหนด (decorator) `@Injectable({ providedIn: "root" })` ลงทะเบียนบริการกับระบบ DI ของ Angular เป็นอินสแตนซ์เดียวที่แชร์ (singleton) สำหรับแอปพลิเคชันทั้งหมด

## การฉีดให้กับ component

```ts
@Component({ ... })
export class UserListComponent {
  // Angular sees this constructor param and INJECTS the singleton automatically
  constructor(private userService: UserService) {}

users = this.userService.getUsers(); // just use it
}
```

คุณเพียงแค่ประกาศบริการเป็นพารามิเตอร์ของ constructor; DI ของ Angular จะ **สร้างและจัดหา** อินสแตนซ์ คุณไม่จำเป็นต้องเขียน `new UserService()` (Angular เวอร์ชันใหม่ยังสามารถใช้ฟังก์ชัน `inject()` แทนการฉีดผ่าน constructor ได้)

```ts
import { inject } from "@angular/core";
export class UserListComponent {
  private userService = inject(UserService); // alternative injection style
}
```

## เหตุใด DI จึงมีค่า

```text
✓ Single source of truth — one shared UserService instance across components
✓ Loose coupling — components depend on the type, not on constructing it
✓ Testability — swap in a mock service in tests easily
✓ Lifecycle management — Angular handles creation and sharing
```

เนื่องจาก component ไม่ได้สร้างการพึ่งพาของตัวเอง คุณสามารถฉีดบริการ **ปลอม** ในการทดสอบ หรือเปลี่ยนการสำหรับต่างสถานที่ในแอปพลิเคชันในที่เดียว

## เหตุใดจึงมีความสำคัญ

บริการ + DI เป็นส่วนสำคัญของสถาปัตยกรรม Angular: component ยังคงมุ่งเน้นไปที่ UI ขณะที่บริการถือลอจิกและสถานะ และ DI เชื่อมต่อพวกมันเข้าด้วยกันด้วยการจับคู่ที่น้อยที่สุด

การแยกนี้ (และความสามารถในการทดสอบที่มันนำมา) เป็นหนึ่งในจุดแข็งที่กำหนดของ Angular — ยืมมาจาก framework ด้านหลัง — และ `@Injectable({ providedIn: 'root' })` เป็นรูปแบบในการใช้งานประจำวันสำหรับ singleton ที่แชร์และสามารถฉีดได้