Kuunda Huduma katika Angular

Wacha tuanze kusoma kuhusu huduma kwa kuunda yetu mwenyewe. Ili kufanya hivyo, kwenye folda test/src/app tufanye faili data.service.ts. Acha huduma yetu iwe responsible kwa kuonyesha baadhi ya data kwenye skrini.

Tufanye darasa kwa huduma yetu:

export class DataService {
	
}

Sasa tunahitaji decorator Injectable. Matumizi yake yataruhusu darasa la huduma kuweza kutiingizwa katika darasa la sehemu. Tutazungumzia kuhusu uingizaji kwenye somo linalofuata. Kwa sasa tuagize decorator inayohitajika:

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

export class DataService {
	
}

Tuitumie kwa darasa letu:

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

@Injectable()
export class DataService {
	
}

Sasa tufanye iwezekanavyo kuwa darasa letu liwe na baadhi ya data. Kwa kawaida katika programu za Angular data hupakuliwa kutoka kwa server, lakini sisi kwa madhumuni ya kielimu tutatumia safu. Tuiunde kwenye mali ya faragha:

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

Sasa tuandike mbinu ya kupata data:

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

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

Huduma yetu iko tayari. Katika somo linalofuata sisi tutaiunganisha kwa darasa la sehemu.

Unde huduma yako mwenyewe, ambayo itatoa safu ya vitu na bidhaa:

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