Szolgáltatás létrehozása Angularban

Kezdjük a szolgáltatások tanulását egy saját létrehozásával. Ehhez a test/src/app mappában készítsük el a data.service.ts fájlt. Legyen a mi szolgáltatásunk felelős néhány adat megjelenítéséért a kijelzőn.

Készítsünk osztályt a szolgáltatásunkhoz:

export class DataService {
	
}

Most szükségünk van a Injectable dekorátorra. Alkalmazása lehetővé teszi, hogy a szolgáltatás osztályt be lehessen injektálni a komponens osztályba. A beinjektálásról a következő leckében fogunk beszélni. Most importáljuk a szükséges dekorátort:

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

export class DataService {
	
}

Alkalmazzuk az osztályunkra:

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

@Injectable()
export class DataService {
	
}

Most tegyük úgy, hogy az osztályunkban legyenek néhány adat. Az Angular alkalmazásokban általában szerverről történik az adatok betöltése, de mi oktatási célból tömböt fogunk használni. Készítsük el privát tulajdonságban:

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

Írjuk most meg az adatok lekérésére szolgáló metódust:

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

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

A szolgáltatásunk kész. A következő leckében csatlakoztatjuk a komponens osztályhoz.

Készítsen saját szolgáltatást, amely egy termékekkel rendelkező objektumok tömbjét adja vissza:

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