Criação de um Serviço no Angular

Vamos começar o estudo de serviços criando o nosso próprio. Para isso, na pasta test/src/app vamos criar o arquivo data.service.ts. Deixe nosso serviço ser responsável por exibir alguns dados na tela.

Vamos criar uma classe para o nosso serviço:

export class DataService {
	
}

Agora precisamos do decorador Injectable. Sua aplicação permitirá que a classe de serviço seja injetada na classe do componente. Falaremos sobre injeção na próxima lição. Por enquanto, vamos importar o decorador necessário:

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

export class DataService {
	
}

Vamos aplicá-lo à nossa classe:

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

@Injectable()
export class DataService {
	
}

Agora vamos fazer com que nesta nossa classe haja alguns dados. Normalmente, em aplicações Angular, os dados são carregados de um servidor, mas para fins didáticos, nós usaremos um array. Vamos criá-lo em uma propriedade privada:

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

Agora vamos escrever um método para obter os dados:

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

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

Nosso serviço está pronto. Na próxima lição, vamos conectá-lo à classe do componente.

Crie seu próprio serviço que retornará um array de objetos com produtos:

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