Aula 06: Serviços e Injeção de Dependência 💉

Nesta aula, vamos aprender como compartilhar lógica e dados entre componentes de forma profissional e escalável usando Serviços e o sistema de Injeção de Dependência (DI) do Angular.

---

🏛️ Por que usar Serviços?

Componentes devem focar na interface (UI). Lógica pesada, como cálculos ou chamadas a banco de dados, deve ser isolada em um Serviço.

• Reaproveitamento: Vários componentes podem usar o mesmo serviço.
• Singleton: Por padrão, o Angular cria apenas uma instância do serviço para toda a aplicação.
• Organização: Separa a "casca" (UI) do "motor" (Lógica).

---

🛠️ Criando um Serviço com o CLI

Usamos o comando generate service (ou g s).

# Gerar um serviço de autenticação
$ ng generate service auth/auth

# Atalho rápido
$ ng g s data

---

💉 Injeção de Dependência

Não instanciamos servicos com new Servico(). O Angular faz isso para nós através do Construtor.

1. Definindo o Serviço:

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

@Injectable({
  providedIn: 'root' // Singleton: disponível em toda a app
})
export class DadosService {
  lista: string[] = ['Angular', 'React', 'Vue'];

  getDados() {
    return this.lista;
  }
}

2. Injetando no Componente:

export class ListaComponent {
  // O Angular injeta automaticamente a instância
  constructor(private service: DadosService) {}

  minhaLista = this.service.getDados();
}

---

🌟 Diagrama de Injeção

graph TD
    S[Serviço] --> |Injetado| C1[Home Component]
    S --> |Injetado| C2[Navbar Component]
    S --> |Injetado| C3[Dashboard Component]
    C1 -.-> |Compartilha Dados| S
    C3 -.-> |Compartilha Dados| S

---

🚀 Prática: Gerenciamento de Tarefas

Vamos refatorar nosso código de tarefas para que: 1. A lista de tarefas não fique mais no componente. 2. Crie um TarefaService com métodos adicionar() e listar(). 3. Dois componentes diferentes usem o mesmo serviço para mostrar a mesma lista.

---

🏁 Mini-Projeto da Aula

Crie um CarrinhoService. Ele deve ter um array privado de itens. Crie métodos para adicionarItem(produto) e exibirTotal(). Use esse serviço em um componente de "Lista de Produtos" e em um componente de "Mini-Carrinho" (que fica no topo da página).