Ustvarjanje storitve v Angular

Začnimo preučevanje storitev z ustvarjanjem naše lastne. Za to v mapi test/src/app naredimo datoteko data.service.ts. Naj naša storitev odgovarja za prikaz nekaterih podatkov na zaslonu.

Naredimo razred za našo storitev:

export class DataService {
	
}

Zdaj potrebujemo dekorator Injectable. Njegova uporaba bo omogočila, da lahko razred storitve vnamestimo v razred komponente. O vnamestitvi bomo govorili v naslednji lekciji. Zdaj pa uvozimo potrebni dekorator:

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

export class DataService {
	
}

Uporabimo ga za naš razred:

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

@Injectable()
export class DataService {
	
}

Zdaj naredimo tako, da so v našem razredu nekateri podatki. Običajno v aplikacijah Angular pride do nalaganja podatkov s strežnika, vendar bomo v učne namene uporabili matriko. Naredimo jo v zasebni lastnosti:

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

Zdaj napišimo metodo za pridobivanje podatkov:

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

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

Naša storitev je pripravljena. V naslednji lekciji jo bomo povezali z razredom komponente.

Ustvarite svojo storitev, ki bo vrnila matriko objektov z izdelki:

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