Vytváření služby v Angular

Začněme studium služeb vytvořením vlastní. Pro tento účel ve složce test/src/app vytvoříme soubor data.service.ts. Nechť naše služba odpovídá za zobrazení některých dat na obrazovku.

Vytvořme třídu pro naši službu:

export class DataService {
	
}

Nyní potřebujeme dekorátor Injectable. Jeho použití umožní, aby třída služby mohla být vložena do třídy komponenty. O vkládání si povíme v příští lekci. Nyní importujme požadovaný dekorátor:

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

export class DataService {
	
}

Aplikujme jej na naši třídu:

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

@Injectable()
export class DataService {
	
}

Nyní udělejme, aby v naší třídě byly některá data. Obvykle v aplikacích Angular dochází k načítání dat ze serveru, ale my pro výukové účely budeme používat pole. Vytvořme jej v privátní vlastnosti:

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

Nyní napišme metodu pro získání dat:

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

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

Naše služba je hotova. V příští lekci ji budeme připojovat ke třídě komponenty.

Vytvořte vlastní službu, která bude vracet pole objektů s produkty:

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