🚀 Capítulo 12: Serviços e Injeção de Dependência

🎯 Objetivo da Aula

Ao final desta aula, você será capaz de criar Serviços no Angular para centralizar a lógica de negócios e o compartilhamento de dados entre diferentes componentes, utilizando o poderoso sistema de Injeção de Dependência do framework.

---

🏢 O Cenário Prático (Seu Desafio)

Até agora, cada componente guardava seus próprios dados. Mas e se o Mini-Caça e o Painel Principal precisarem acessar a mesma lista de Armamentos Disponíveis? Seu desafio é criar o Serviço de Arsenal, que guardará esses dados de forma centralizada para qualquer componente consultar!

---

🧠 Fundamentos: A Teoria Traduzida

Componentes devem focar apenas em exibir coisas na tela. A lógica pesada e o armazenamento de dados compartilhados devem ficar nos Serviços.

1. O que é um Serviço?

É uma classe TypeScript comum, mas com o decorador @Injectable(). Ela serve para guardar funções e variáveis que vários componentes precisam usar.

• Analogia: É o Droide de protocolo (como o C-3PO) que guarda informações e ajuda todo mundo na nave.

2. Injeção de Dependência (DI)

Em vez de o componente criar o serviço (usando new MeuServico()), ele simplesmente pede o serviço no seu construtor, e o Angular se encarrega de entregar uma instância pronta!

• Sintaxe: constructor(private meuServico: MeuServico) { }

---

📖 Exemplo Guiado: O Serviço de Arsenal

Vamos criar o serviço e usá-lo no painel.

🛠️ Passo a Passo (Criando o Serviço)

1. No terminal, digite o comando:

   ng generate service arsenal

   (Ou o atalho: ng g s arsenal)
2. Abra o arquivo src/app/arsenal.service.ts e adicione a lista de armas:

import { Injectable } from '@angular/core';
 
@Injectable({
  providedIn: 'root' // Significa que o serviço está disponível em toda a aplicação
})
export class ArsenalService {
  private armas: string[] = ['Canhão Laser', 'Míssil de Próton', 'Torpedo de Íon'];
 
  getArmas(): string[] {
    return this.armas;
  }
 
  adicionarArma(novaArma: string) {
    this.armas.push(novaArma);
  }
}

🛠️ Passo a Passo (Injetando no Componente)

Abra src/app/painel-controle/painel-controle.component.ts:

import { Component, OnInit } from '@angular/core';
import { ArsenalService } from '../arsenal.service'; // Importa o serviço
 
@Component({ /* ... */ })
export class PainelControleComponent implements OnInit {
  listaArmas: string[] = [];
 
  // O Angular injeta o serviço aqui automaticamente
  constructor(private arsenalService: ArsenalService) {}
 
  ngOnInit(): void {
    // Busca os dados do serviço ao iniciar
    this.listaArmas = this.arsenalService.getArmas();
  }
}

🕹️ Como Executar e Testar no VS Code

1. Salve tudo e exiba a lista listaArmas no HTML usando *ngFor.
2. Os dados aparecerão na tela, mas agora eles não pertencem ao componente, e sim ao serviço!

---

🛠️ Prática Obrigatória 1

No componente painel-controle, crie um botão “Adicionar Detonador Termal”. Ao clicar, chame a função do serviço adicionarArma('Detonador Termal') e veja a lista atualizar na tela.

---

🛠️ Prática Obrigatória 2

Injete o ArsenalService também no componente do mini-caca (criado no Capítulo 7). Exiba a quantidade de armas disponíveis no mini-caça usando getArmas().length.

---

🔑 Gabarito de Código/Fórmulas

Prática 1:

No .ts do painel:

adicionar() {
  this.arsenalService.adicionarArma('Detonador Termal');
}

Prática 2:

No .ts do mini-caça:

constructor(private arsenalService: ArsenalService) {}
 
ngOnInit() {
  this.totalArmas = this.arsenalService.getArmas().length;
}

---

← Capitulo Anterior | Proximo Capitulo →