Serviços e Injeção de Dependências

Componente que busca dado, valida regra, salva no storage e controla a tela parece prático no começo. Depois fica impossível testar e reutilizar.

Serviços existem para tirar esse peso do componente. Eles centralizam dados, regras e integrações que várias partes do app precisam usar.

import { Injectable } from "@angular/core"

type Trilha = { id: string; titulo: string }

@Injectable({ providedIn: "root" })
export class TrilhasService {
  private trilhas: Trilha[] = []

  listar() {
    return this.trilhas
  }
}

Providers

providedIn: "root" registra o serviço no app inteiro. É o caso mais comum para serviços compartilhados, como sessão, API, configurações e estado global.

Também dá para fornecer dependências em um componente ou rota. Isso cria uma instância mais local, útil quando você quer isolar estado de uma feature.

inject

Em vez de criar o serviço com new, o componente pede a dependência ao Angular:

import { inject } from "@angular/core"

export class TrilhasComponent {
  private readonly trilhasService = inject(TrilhasService)
}

Isso deixa o componente menos acoplado e facilita teste, porque uma dependência pode ser trocada por uma versão falsa.

Tokens

Nem toda dependência é uma classe. Às vezes você precisa injetar uma URL base, uma config ou uma implementação abstrata. Para isso existem injection tokens.

export const API_URL = new InjectionToken<string>("API_URL")

Três ideias pra levar deste nó:

• Componente cuida da tela.
• Service cuida de regra, dados e integração.
• Provider define onde a dependência nasce e quanto tempo ela vive.

Dica: se dois componentes copiam a mesma regra, ela provavelmente pertence a um service ou a uma função compartilhada.

No próximo nó, vamos transformar componentes em telas navegáveis com o router.