Módulo 10: Services II (Injeção)

2. Resumo da Aula Anterior

No Módulo 9, descobrimos o que são serviços e como eles ajudam a centralizar a lógica. Hoje, vamos perceber a magia negra por trás disso tudo: a Injeção de Dependências (DI). É o segredo que torna o Angular tão modular e fácil de testar.

3. O Que Vais Aprender Hoje

✅ O conceito de Dependency Injection.
✅ Como o Angular entrega instâncias de serviços.
✅ Usar o constructor para receber dependências.
✅ A diferença básica entre Singletons e instâncias locais.

4. Teoria: Não Cries, Pede!

Conceito: Em programação normal, tu usas const s = new MeuServico(). No Angular, tu **nunca** usas o `new` para serviços. Tu simplesmente dizes no constructor: "Eu preciso disto", e o Angular encarrega-se de o entregar pronto a usar.

🍕 Analogia: A Pizzaria e o Estafeta

Imagina que queres comer uma pizza em casa:

Modo Tradicional (Sem DI): Tu tens de comprar farinha, tomate, queijo, fazer a massa, ligar o forno e cozinhar. Tu crias a tua própria pizza (Dependência).
Modo Angular (Com DI): Tu apenas pedes: "Quero uma pizza de queijo". Tu não sabes como ela é feita ou de onde vem a farinha. Alguém (o estafeta/Angular) toca à campainha e entrega-te a pizza quente nas mãos. Tu só tens de a comer.

5. Exemplos Práticos

Exemplo 1: Pedir o Serviço (Injeção)

A forma correta de receber o serviço na classe.

@Component({...})
export class PerfilComponent {
  // O segredo está aqui nos parênteses do constructor
  constructor(private authService: AuthService) {
    // Agora o 'authService' está disponível para uso!
  }

  logout() {
    this.authService.fazerLogout();
  }
}

Exemplo 2: Public vs Private

Facilitar a vida no Template (HTML).

// Se usares 'public', podes usar o serviço direto no HTML
constructor(public config: ConfigService) {}


Versão da App: {{ config.versao }}

Exemplo 3: Injetar Múltiplos

Podes pedir quantas ferramentas precisares.

constructor(
  private loginSrv: LoginService,
  private logSrv: LoggerService,
  private apiSrv: ApiService
) {
  this.logSrv.info("Módulo de Perfil iniciado");
}

6. Agora é a Tua Vez!

Vamos criar o "Mensageiro Central":

Cria um serviço chamado MensagemService com um método enviar(msg: string) que faz um console.log.
No teu AppComponent, injeta esse serviço.
No ngOnInit do AppComponent, usa o serviço para enviar a mensagem: "Aplicação arrancou com sucesso!".
Cria um componente BotaoAlert e injeta o mesmo serviço nele.
Faz com que ao clicar no botão, ele chame o serviço para enviar outra mensagem.
Repara que usaste o mesmo motor (serviço) em dois lugares diferentes sem nunca escreveres new MensagemService().

7. Verificação de Conhecimento

Carregando quiz...

8. Resumo do Que Aprendemos

📌 **Dependency Injection** é o sistema que entrega as peças aos componentes.
📌 Ajuda a manter o código desacoplado (as peças não dependem de conhecer a criação uma da outra).
📌 O **Constructor** é onde declaramos o que precisamos.
📌 Usar private ou public cria automaticamente uma propriedade na classe.

9. Desafios Práticos

Desafio 1: O Teste do 'New'

O que aconteceria se tentasses criar o serviço manualmente com const s = new AuthService() dentro de um componente em vez de o injetar?

Desafio 2: Hierarquia de Serviços

É possível injetar um serviço dentro de **outro** serviço? Como se faria?

Desafio 3: A Vantagem dos Testes

Porque é que a Injeção de Dependências facilita os Testes Unitários de um componente?

Aprende Web: Angular

Módulo 10: Services II (Injeção de Dependências)