Creación de un servicio en Angular

Comencemos el estudio de servicios creando uno propio. Para ello, en la carpeta test/src/app crearemos el archivo data.service.ts. Que nuestro servicio se encargue de mostrar algunos datos en pantalla.

Creemos una clase para nuestro servicio:

export class DataService {
	
}

Ahora necesitamos el decorador Injectable. Su aplicación permitirá que la clase del servicio pueda ser inyectada en la clase del componente. Hablaremos sobre la inyección en la siguiente lección. Por ahora importemos el decorador necesario:

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

export class DataService {
	
}

Apliquémoslo a nuestra clase:

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

@Injectable()
export class DataService {
	
}

Ahora hagamos que en nuestra clase haya algunos datos. Normalmente en las aplicaciones Angular se cargan datos desde un servidor, pero con fines educativos nosotros usaremos un array. Creémoslo en una propiedad privada:

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

Escribamos ahora un método para obtener los datos:

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

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

Nuestro servicio está listo. En la siguiente lección lo conectaremos a la clase del componente.

Cree su propio servicio, que devolverá un array de objetos con productos:

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