Criando um Serviço

O Angular oferece um comando de CLI conveniente para gerar rapidamente um serviço, configurando os arquivos e importações necessários:

Após executar este comando, o Angular cria dois arquivos:

• task.service.ts — o arquivo do serviço propriamente dito;

• task.service.spec.ts — um arquivo de teste (pode ser excluído).

Veja o conteúdo inicial de task.service.ts:

O decorador @Injectable informa ao Angular que este serviço pode ser injetado em outras classes.

A parte providedIn: 'root' significa que o Angular irá registrar automaticamente o serviço no módulo raiz e criar uma única instância dele para todo o aplicativo.

Componente A, Componente B ou qualquer outro componente — todos eles receberão a mesma instância do serviço. Isso é muito conveniente porque permite armazenar dados compartilhados (como uma lista de tarefas) e evitar duplicação de lógica.

É por isso que um serviço se torna a única fonte de verdade para uma parte específica da lógica ou dos dados do seu aplicativo. Se tiver interesse, você pode aprender mais sobre o padrão singleton neste artigo.

Adicionando Lógica ao Serviço

Vamos avançar para a construção da lógica do seu serviço. Veja o que ele deve fazer:

• Armazenar uma lista de tarefas;

• Retornar a lista de tarefas;

• Excluir tarefas;

• Alternar o status de conclusão das tarefas.

Primeiro, vamos definir como é uma tarefa criando uma interface TypeScript:

Esta interface ajuda a definir claramente a estrutura de uma tarefa — inclui um id, um título e um status de conclusão. Você ainda não utilizou interfaces, mas adicionar uma aqui torna o código mais fácil de entender e trabalhar.

Agora vamos construir o serviço que gerencia sua lista de tarefas:

Neste exemplo, os dados das tarefas são armazenados diretamente no código dentro de um array privado tasks.

Para permitir que outras partes da aplicação acessem a lista de tarefas, é utilizado o método getTasks(). Ele retorna uma cópia do array usando a sintaxe spread ([...]), o que ajuda a proteger os dados originais contra alterações acidentais.

O método deleteTask(id: number) remove uma tarefa filtrando aquela com o ID correspondente, atualizando a lista.

Outro método importante é o toggleTaskStatus(id: number). Ele localiza a tarefa pelo seu ID e alterna seu status de conclusão — se a tarefa estava marcada como concluída (true), torna-se não concluída (false), e vice-versa.

Este serviço agora é a base que permite que seus componentes interajam com a lista de tarefas — sem duplicar a lógica.