Membuat Layanan di Angular

Mari kita mulai mempelajari layanan dengan membuat layanan kita sendiri. Untuk melakukan ini, di folder test/src/app buatlah file data.service.ts. Biarkan layanan kita bertanggung jawab untuk menampilkan beberapa data ke layar.

Mari buat kelas untuk layanan kita:

export class DataService {
	
}

Sekarang kita membutuhkan dekorator Injectable. Penggunaannya akan memungkinkan kelas layanan untuk dapat diinjeksikan ke dalam kelas komponen. Kita akan berbicara tentang injeksi pada pelajaran berikutnya. Untuk sekarang, impor dekorator yang diperlukan:

import { Injectable } from '@angular/core';

export class DataService {
	
}

Terapkan ke kelas kita:

import { Injectable } from '@angular/core';

@Injectable()
export class DataService {
	
}

Sekarang mari kita buat agar di kelas kita terdapat beberapa data. Biasanya dalam aplikasi Angular, data dimuat dari server, tetapi untuk tujuan pembelajaran kita akan menggunakan array. Mari buat di properti privat:

export class DataService {
	private data: string[] = ['a', 'b', 'c'];
}

Sekarang tulis metode untuk mendapatkan data:

export class DataService {
	private data: string[] = ['a', 'b', 'c'];

	getData(): string[] {
		return this.data;
	}
}

Layanan kita sudah siap. Pada pelajaran berikutnya kita akan menghubungkannya ke kelas komponen.

Buatlah layanan Anda sendiri, yang akan mengembalikan array objek dengan produk:

[
	{
		name: 'prod1',
		cost: 100,
	},
	{
		name: 'prod2',
		cost: 200,
	},
	{
		name: 'prod3',
		cost: 300,
	},
]