Serviços em Angular

Serviços são classes independentes e que cumprem uma tarefa especifica, eles podem ser usados dentro de componentes através da injeção de dependência. Os serviços geram uma maior organização, a separação de preocupações e a reutilização de código, proporcionando um código mais escalável e modular. Serviços são usados principalmente para concentrar as requisições à API da aplicação, podendo ter um serviço para as requisições relacionadas ao usuário, outro serviço para as requisições relacionadas a compras e assim por diante. Por está alinhado com o conceito de inversão de dependência, são fáceis de testar e debugar.

Como criar um serviço

ng generate service nome-do-servico

Entendendo um serviço

Serviços em angular são classes decoradas como Injectable o que significa que essas classes podem ser injetada no construtor de outra classe, como em um componente. Um serviço básico parece com isso:

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

@Injectable({
  providedIn: 'root'
})
export class MeuServicoService {
  minhaPropriedade: any;

  minhaFuncao() {
    // Lógica do serviço
  }
}

Temos o decorator @Injectable que recebe um objeto de configuração, que no exemplo é o providedIn: 'root' (será explicado posteriormente), depois do decorator é declarado a classe do serviço e seus métodos e variáveis.

Para usar esse serviço em um componente, temos que declara-lo no construtor da classe, o Angular ficará responsável de injetar a dependência dessa classe. O componente ficará assim:

import { Component } from '@angular/core';
import { MeuServicoService } from './caminho-para-o-servico';

@Component({
  selector: 'app-exemplo',
	standalone: true,
  templateUrl: './exemplo.component.html'
})
export class ExemploComponent {
  constructor(private meuServico: MeuServicoService) {}

  // Use meuServico.minhaPropriedade ou meuServico.minhaFuncao() aqui
}

Providing services

Falando um pouco sobre a propriedade providedIn no @Injectable, essa propriedade é responsável por dizer como esse serviço será usado pela aplicação, o tipo dessa propriedade é

providedIn? :'root' | any , então essa propriedade é opcional e pode receber root ou outra coisa.

Quando providedIn: 'root' então o serviço se comportará como um singleton isso significa que o serviço estará disponível para toda a aplicação, bastando somente declarar ele no construtor da classe.

Quando providedIn: 'NomeDoModulo' significa que esse serviço só estará disponivel para os componentes daquele módulo digitado.

Quando não declarado um providedIn o Angular entenderá como ele sendo providedIn: 'root'.

Exemplo

Imagine um serviço simples para armazenar e gerenciar uma lista de tarefas. Vamos criar um serviço TarefaService que permitirá adicionar, listar e remover tarefas.

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

@Injectable({
  providedIn: 'root'
})
export class TarefaService {
  private tarefas: string[] = [];

  adicionarTarefa(tarefa: string) {
    this.tarefas.push(tarefa);
  }

  listarTarefas() {
    return this.tarefas;
  }

  removerTarefa(index: number) {
    if (index >= 0 && index < this.tarefas.length) {
      this.tarefas.splice(index, 1);
    }
  }
}

Para usar esse serviço em um componente, podemos fazer assim:

import { Component } from '@angular/core';
import { TarefaService } from './tarefa.service';

@Component({
  selector: 'app-tarefas',
	standalone: true,
  template: `
    <input type="text" [(ngModel)]="novaTarefa">
    <button (click)="adicionarTarefa()">Adicionar</button>

    <ul>
      <li *ngFor="let tarefa of tarefas; let i = index">
        {{ tarefa }}
        <button (click)="removerTarefa(i)">Remover</button>
      </li>
    </ul>
  `
})
export class TarefasComponent {
  novaTarefa: string = '';
  tarefas: string[] = [];

  constructor(private tarefaService: TarefaService) {}

  adicionarTarefa() {
    if (this.novaTarefa.trim() !== '') {
      this.tarefaService.adicionarTarefa(this.novaTarefa);
      this.novaTarefa = '';
      this.atualizarTarefas();
    }
  }

  removerTarefa(index: number) {
    this.tarefaService.removerTarefa(index);
    this.atualizarTarefas();
  }

  private atualizarTarefas() {
    this.tarefas = this.tarefaService.listarTarefas();
  }
}