Vytvorenie služby v Angular

Začnime štúdium služieb vytvorením vlastnej. Pre tento účel v priečinku test/src/app vytvoríme súbor data.service.ts. Nech naša služba zodpovedá za zobrazenie niektorých údajov na obrazovke.

Vytvorme triedu pre našu službu:

export class DataService {
	
}

Teraz potrebujeme dekorátor Injectable. Jeho použitie umožní, aby bola trieda služby injektovateľná do triedy komponentu. O injektovaní si povieme v nasledujúcej lekcii. Teraz importujeme potrebný dekorátor:

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

export class DataService {
	
}

Aplikujme ho na našu triedu:

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

@Injectable()
export class DataService {
	
}

Teraz urobme tak, aby v našej triede boli nejaké údaje. V aplikáciách Angular zvyčajne prebieha načítavanie údajov zo servera, ale my na vzdelávacie účely budeme používať pole. Vytvorme ho v súkromnej vlastnosti:

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

Napíšme teraz metódu na získanie údajov:

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

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

Naša služba je pripravená. V nasledujúcej lekcii ju pripojíme do triedy komponentu.

Vytvorte vlastnú službu, ktorá bude vracať pole objektov s produktami:

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