Serviços em Angular

Os serviços no Angular representam uma ampla gama de classes que executam tarefas específicas, como registro de logs, manipulação de dados, entre outras.

Ao contrário dos componentes e diretivas, os serviços não interagem diretamente com a exibição, ou seja, com a marcação HTML, não tendo influência direta sobre ela. Eles são responsáveis por realizar tarefas bem definidas e bastante específicas.

Funções padrão dos serviços:

Fornecimento de dados para a aplicação. Um serviço pode armazenar dados na memória ou buscar esses dados de uma fonte externa, como um servidor.
Um serviço pode atuar como um canal de interação entre diferentes componentes da aplicação.
O serviço pode encapsular a lógica de negócios, realizar cálculos ou tarefas relacionadas a registros de logs, que é mais eficiente retirar dos componentes. Dessa forma, o código dos componentes permanece focado apenas na interação com a visualização. Além disso, isso ajuda a evitar a repetição de código, caso seja necessário executar a mesma tarefa em diferentes componentes e classes.

Por exemplo, vamos adicionar um novo arquivo na pasta src/app chamado data.service.ts. Esse arquivo conterá o código do serviço. Seguindo as convenções, o nome do arquivo deve conter o nome do serviço seguido da expressão .service.

helloapp/
├── src/
│   ├── app/
│   │   ├── app.component.ts
│   │   ├── data.service.ts
│   ├── main.ts
│   ├── index.html
├── angular.json
├── package-lock.json
├── package.json
└── tsconfig.json

Se o nome do serviço for composto por várias palavras, todas devem ser escritas com letras minúsculas e separadas por traços no nome do arquivo. Por exemplo, se o serviço for chamado SpecialSuperHeroService, o nome do arquivo será special-super-hero.service.ts.

Vamos definir o seguinte serviço nesse arquivo:

export class DataService {
  private data: string[] = ["Tom", "Bob", "Sam"];

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

  addData(name: string) {
    this.data.push(name);
  }
}

No serviço, temos um array de dados e métodos para manipulá-lo. Em uma aplicação real, esses dados poderiam ser obtidos de um servidor ou de algum armazenamento externo.

Agora, vamos definir o código do componente:

import { Component, Inject } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { DataService } from "./data.service";

@Component({
  selector: "my-app",
  standalone: true,
  imports: [FormsModule],
  providers: [DataService],
  template: `<div>
    <div>
      <input [(ngModel)]="name" />
      <button (click)="addItem(name)">Adicionar</button>
    </div>
    <ul>
      @for(item of items; track $index){
      <li>{{ item }}</li>
      }
    </ul>
  </div>`,
})
export class AppComponent {
  items: string[] = [];
  name: string = "";

  constructor(@Inject(DataService) private dataService: DataService) {}

  addItem(name: string) {
    this.dataService.addData(name);
  }

  ngOnInit() {
    this.items = this.dataService.getData();
  }
}

Para utilizar o serviço em um componente, além de importá-lo:

import { DataService } from "./data.service";

Também é necessário adicioná-lo à coleção providers do componente:

providers: [DataService];

Todos os serviços que forem utilizados devem ser adicionados à coleção providers. Isso define o provedor do serviço, que será utilizado para obtê-lo. A partir daí, podemos usar o mecanismo de injeção de dependência do Angular para obter o objeto do serviço no construtor do componente e utilizá-lo conforme necessário:

constructor(@Inject(DataService) private dataService: DataService) {}

Para carregar os dados, é implementado o método ngOnInit() da interface OnInit, que é chamado após o construtor.

E, como estamos usando a diretiva ngModel para trabalhar com elementos de formulário, é necessário importar o módulo FormsModule:

import { FormsModule } from "@angular/forms";

@Component({
    imports: [FormsModule],
    ...
})

Assim, poderemos exibir os dados e adicionar novos elementos através do serviço.

Serviços em Angular