Apakah itu service dan dependency injection dalam Angular?

Question

Accepted Answer

Sebuah **service** ialah kelas untuk **logik bukan UI** — pengambilan data, peraturan perniagaan, keadaan (state) yang dikongsi, logging — yang boleh digunakan semula oleh komponen. **Dependency Injection (DI)** ialah cara Angular *menyediakan* service tersebut kepada komponen yang memerlukannya, dan bukannya komponen mencipta service itu secara manual.

## Mentakrifkan sesuatu 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 satu instance dikongsi tunggal (singleton) untuk keseluruhan aplikasi.

## Menyuntiknya (inject) ke dalam komponen

```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 mengisytiharkan service sebagai parameter constructor; DI Angular akan **mencipta dan membekalkan** instance tersebut. Anda tidak pernah menulis `new UserService()`. (Angular moden juga boleh menggunakan fungsi `inject()` berbanding constructor injection.)

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

## Mengapa DI bernilai

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

Oleh sebab komponen tidak membina dependencynya sendiri, anda boleh menyuntik service **palsu** dalam ujian, atau menukar pelaksanaan secara seluruh aplikasi di satu tempat sahaja.

## Mengapa ia penting

Service + DI adalah teras kepada seni bina Angular: komponen kekal fokus pada UI manakala service memegang logik dan state, dan DI menyambungkannya bersama dengan coupling yang minimum.

Pemisahan ini (dan kebolehujian yang dibawanya) merupakan salah satu kekuatan tersendiri Angular — dipinjam daripada framework backend — dan `@Injectable({ providedIn: 'root' })` ialah corak harian untuk singleton yang dikongsi dan boleh disuntik.