Crearea unui serviciu în Angular

Să începem studiul serviciilor cu crearea propriului nostru serviciu. Pentru aceasta, în folderul test/src/app vom face fișierul data.service.ts. Să presupunem că serviciul nostru este responsabil pentru afișarea unor date pe ecran.

Să creăm o clasă pentru serviciul nostru:

export class DataService {
	
}

Acum avem nevoie de decoratorul Injectable. Utilizarea lui va permite ca clasa serviciului să poată fi injectată în clasa componentului. Despre injectare vom vorbi în lecția următoare. Acum să importăm decoratorul necesar:

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

export class DataService {
	
}

Să îl aplicăm clasei noastre:

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

@Injectable()
export class DataService {
	
}

Acum să facem astfel încât în clasa noastră să fie unele date. De obicei, în aplicațiile Angular datele sunt încărcate de pe server, dar noi în scopuri educaționale vom folosi un array. Să îl creăm într-o proprietate privată:

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

Acum să scriem o metodă pentru obținerea datelor:

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

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

Serviciul nostru este gata. În lecția următoare îl vom conecta la clasa componentei.

Creați-vă propriul serviciu, care va returna un array de obiecte cu produse:

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