Serviços - 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:

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

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:

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.