Création d'un service dans Angular

Commençons l'étude des services en créant le nôtre. Pour cela, dans le dossier test/src/app créons le fichier data.service.ts. Que notre service soit responsable de l'affichage de certaines données à l'écran.

Créons une classe pour notre service :

export class DataService {
	
}

Maintenant, nous avons besoin du décorateur Injectable. Son utilisation permettra que la classe de service puisse être injectée dans la classe du composant. Nous parlerons de l'injection dans la prochaine leçon. Pour l'instant, importons le décorateur nécessaire :

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

export class DataService {
	
}

Appliquons-le à notre classe :

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

@Injectable()
export class DataService {
	
}

Maintenant, faisons en sorte que dans notre classe il y ait certaines données. Habituellement, dans les applications Angular, les données sont chargées depuis un serveur, mais à des fins pédagogiques, nous utiliserons un tableau. Créons-le dans une propriété privée :

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

Écrivons maintenant une méthode pour récupérer les données :

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

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

Notre service est prêt. Dans la prochaine leçon, nous le connecterons à la classe du composant.

Créez votre propre service, qui renverra un tableau d'objets avec des produits :

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