Service và dependency injection trong Angular là gì?

Question

Accepted Answer

Một **service** là một class chứa **logic phi UI** — lấy dữ liệu, quy tắc nghiệp vụ, state dùng chung, logging — mà các component có thể tái sử dụng. **Dependency Injection (DI)** là cách Angular *cung cấp* các service đó cho các component cần chúng, thay vì để component tự tạo chúng thủ công.

## Định nghĩa một service

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

@Injectable({ providedIn: "root" }) // biến nó thành singleton có sẵn toàn ứng dụng
export class UserService {
  private users = [];
  getUsers() { return this.users; }
  addUser(u) { this.users.push(u); }
}
```

Decorator `@Injectable({ providedIn: "root" })` đăng ký service với hệ thống DI của Angular như một instance được chia sẻ duy nhất (singleton) cho toàn bộ ứng dụng.

## Inject nó vào một component

```ts
@Component({ ... })
export class UserListComponent {
  // Angular thấy tham số constructor này và tự động INJECT singleton vào
  constructor(private userService: UserService) {}

users = this.userService.getUsers(); // chỉ việc dùng
}
```

Bạn chỉ cần khai báo service như một tham số constructor; DI của Angular **tạo và cung cấp** instance. Bạn không bao giờ viết `new UserService()`. (Angular hiện đại cũng có thể dùng hàm `inject()` thay cho constructor injection.)

```ts
import { inject } from "@angular/core";
export class UserListComponent {
  private userService = inject(UserService); // kiểu inject thay thế
}
```

## Vì sao DI có giá trị

```text
✓ Nguồn chân lý duy nhất — một instance UserService dùng chung giữa các component
✓ Loose coupling — component phụ thuộc vào kiểu, không vào việc tự dựng nó
✓ Khả năng test — dễ dàng tráo một mock service trong test
✓ Quản lý vòng đời — Angular xử lý việc tạo và chia sẻ
```

Vì component không tự dựng các phụ thuộc của nó, bạn có thể inject một service **giả** trong test, hoặc thay đổi cách triển khai toàn ứng dụng tại một nơi.

## Tại sao điều này quan trọng

Service + DI là trung tâm của kiến trúc Angular: component tập trung vào UI trong khi service giữ logic và state, còn DI kết nối chúng với độ ràng buộc tối thiểu.

Sự tách bạch này (và khả năng test mà nó mang lại) là một trong những thế mạnh định danh của Angular — mượn từ các framework backend — và `@Injectable({ providedIn: 'root' })` là pattern thường ngày cho một singleton dùng chung, có thể inject.