Het maken van een service in Angular

Laten we de studie van services beginnen met het maken van onze eigen. Hiervoor maken we in de map test/src/app het bestand data.service.ts. Laat onze service verantwoordelijk zijn voor het tonen van sommige gegevens op het scherm.

Laten we een klasse voor onze service maken:

export class DataService {
	
}

Nu hebben we de decorator Injectable nodig. Het toepassen ervan zal ervoor zorgen dat de serviceklasse kan worden geïnjecteerd in de componentklasse. Over injectie praten we in de volgende les. Laten we nu de benodigde decorator importeren:

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

export class DataService {
	
}

Laten we hem toepassen op onze klasse:

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

@Injectable()
export class DataService {
	
}

Laten we nu ervoor zorgen dat in onze klasse enkele gegevens staan. Meestal in Angular applicaties worden gegevens geladen van een server, maar voor educatieve doeleinden zullen we een array gebruiken. Laten we deze in een private eigenschap maken:

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

Laten we nu een methode schrijven om de gegevens op te halen:

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

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

Onze service is klaar. In de volgende les sluiten we hem aan op de componentklasse.

Maak je eigen service, die een array met objecten van producten teruggeeft:

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