Penciptaan Perkhidmatan dalam Angular

Mari kita mulakan pembelajaran tentang perkhidmatan dengan mencipta perkhidmatan kita sendiri. Untuk melakukan ini, dalam folder test/src/app buat fail data.service.ts. Biarkan perkhidmatan kami bertanggungjawab untuk memaparkan beberapa data pada skrin.

Mari buat kelas untuk perkhidmatan kami:

export class DataService {
	
}

Sekarang kami memerlukan dekorator Injectable. Menggunakannya akan membolehkan kelas perkhidmatan disuntik ke dalam kelas komponen. Kami akan bercakap tentang suntikan dalam pelajaran seterusnya. Untuk sekarang, import dekorator yang diperlukan:

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

export class DataService {
	
}

Gunakan pada kelas kami:

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

@Injectable()
export class DataService {
	
}

Sekarang mari kita buat supaya dalam kelas kami terdapat beberapa data. Biasanya dalam aplikasi Angular, data dimuatkan dari pelayan, tetapi untuk tujuan pembelajaran kami akan menggunakan tatasusunan. Buat dalam sifat persendirian:

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

Sekarang tulis kaedah untuk mendapatkan data:

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

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

Perkhidmatan kami sudah siap. Dalam pelajaran seterusnya kami akan menyambungkannya ke kelas komponen.

Buat perkhidmatan anda sendiri, yang akan mengembalikan tatasusunan objek dengan produk:

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