Creazione di un servizio in Angular

Iniziamo lo studio dei servizi creandone uno nostro. Per farlo, nella cartella test/src/app creiamo il file data.service.ts. Lasciamo che il nostro servizio sia responsabile di visualizzare alcuni dati sullo schermo.

Creiamo una classe per il nostro servizio:

export class DataService {
	
}

Ora abbiamo bisogno del decoratore Injectable. Il suo utilizzo permetterà alla classe del servizio di essere iniettata nella classe del componente. Parleremo dell'iniezione nella prossima lezione. Per ora importiamo il decoratore necessario:

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

export class DataService {
	
}

Applichiamolo alla nostra classe:

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

@Injectable()
export class DataService {
	
}

Ora facciamo in modo che nella nostra classe ci siano alcuni dati. Solitamente nelle applicazioni Angular i dati vengono caricati dal server, ma noi a scopo didattico useremo un array. Creiamolo in una proprietà privata:

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

Scriviamo ora un metodo per ottenere i dati:

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

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

Il nostro servizio è pronto. Nella prossima lezione lo collegheremo alla classe del componente.

Crea il tuo servizio, che restituirà un array di oggetti con prodotti:

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