Services & Dependency Injection
Penjelasan
Service adalah class biasa yang ditandai decorator @Injectable({ providedIn: 'root' }) — dipakai untuk logika/data yang dipakai bersama beberapa component (mis. panggil API, state global sederhana). Service di-inject ke component lewat constructor, Angular otomatis menyediakan instance-nya (Dependency Injection), sama seperti Service di Symfony.
Contoh Konsep
// harga.service.ts
import { Injectable } from '@angular/core';
@Injectable({ providedIn: 'root' })
export class HargaService {
hitungDenganPajak(harga: number): number {
return harga * 1.11; // PPN 11%
}
}
// Dipakai di component:
import { Component } from '@angular/core';
import { HargaService } from './harga.service';
@Component({
selector: 'app-produk',
standalone: true,
template: `<p>Total: {{ total }}</p>`,
})
export class ProdukComponent {
total: number;
constructor(private hargaService: HargaService) {
this.total = this.hargaService.hitungDenganPajak(100000);
}
}Praktikum
Buat service DiskonService dengan method hitung(harga: number, persenDiskon: number): number yang mengembalikan harga setelah dikurangi diskon. Buat contoh component yang meng-inject DiskonService lewat constructor dan memakainya.
Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.
Tips
providedIn: 'root' membuat Service itu jadi SINGLETON di seluruh aplikasi — instance yang SAMA dipakai bersama oleh semua component yang meng-inject-nya, cocok untuk state yang perlu konsisten di banyak tempat, mis. status login user.