Apa itu services dan dependency injection di Angular?

Question

Accepted Answer

Sebuah **service** adalah sebuah class untuk **logika non-UI** — pengambilan data, business rules, shared state, logging — yang dapat digunakan kembali oleh components. **Dependency Injection (DI)** adalah cara Angular *menyediakan* service-service tersebut kepada components yang membutuhkannya, alih-alih components membuat mereka secara manual.

## Mendefinisikan sebuah service

```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" })` mendaftarkan service dengan sistem DI Angular sebagai single shared instance (singleton) untuk seluruh aplikasi.

## Menginjeksinya ke dalam sebuah 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
}
```

Anda hanya perlu mendeklarasikan service sebagai parameter constructor; DI Angular **membuat dan menyediakan** instance-nya. Anda tidak perlu menulis `new UserService()`. (Angular modern juga dapat menggunakan fungsi `inject()` sebagai pengganti constructor injection.)

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

## Mengapa DI berharga

```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
```

Karena component tidak membuat dependencies-nya sendiri, Anda dapat menginjeksi service **palsu** dalam tests, atau mengubah implementasinya di seluruh aplikasi di satu tempat.

## Mengapa ini penting

Services + DI adalah inti dari arsitektur Angular: components tetap fokus pada UI sementara services menahan logika dan state, dan DI menghubungkan mereka dengan coupling minimal.

Pemisahan ini (dan testability yang dibawanya) adalah salah satu kekuatan Angular yang menentukan — dipinjam dari framework backend — dan `@Injectable({ providedIn: 'root' })` adalah pola sehari-hari untuk singleton yang shared dan injectable.