Módulo 9: Services I (Lógica Centralizada)
2. Resumo da Aula Anterior
No Módulo 8, aprendemos a usar Pipes para formatar dados de forma elegante. Agora, vamos resolver um problema maior: e se tivermos lógica que queremos usar em 10 componentes diferentes? Não vamos copiar e colar código! Vamos usar os Serviços.
3. O Que Vais Aprender Hoje
- ✅ O que são Services e porquê usá-los.
- ✅ O decorador @Injectable().
- ✅ Criar lógica partilhada (ex: uma lista de tarefas).
- ✅ Limpar os nossos componentes de lógica pesada.
4. Teoria: A Fonte Única da Verdade
Conceito: Um Serviço é uma classe que tem um único objetivo: gerir dados e lógica de negócio. Os componentes devem ser apenas "a cara" do site; os serviços são "o motor".
🏦 Analogia: O Banco e as Caixas Multibanco
Imagina um sistema bancário:
- O Serviço (O Banco Central): É onde o dinheiro (os dados) está guardado e onde as regras (lógica de levantamento) são decididas. Só existe um banco central.
- Os Componentes (Caixas Multibanco): Existem centenas pela cidade. Eles não guardam o dinheiro lá para sempre, eles apenas pedem ao banco central para mostrar o saldo ou fazer um levantamento.
- Vantagem: Se o banco mudar a taxa de juro, todas as caixas multibanco sabem disso instantaneamente porque todas consultam o mesmo serviço.
5. Exemplos Práticos
Exemplo 1: Gerar um Serviço
Usando o Angular CLI no terminal.
# Comando para criar o serviço
ng generate service services/logExemplo 2: Estrutura do Serviço
Um serviço simples de contagem partilhada.
// contador.service.ts
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root' // Isto torna o serviço global!
})
export class ContadorService {
valor = 0;
incrementar() {
this.valor++;
}
}Exemplo 3: Componente "Leve"
O componente apenas chama o serviço.
// No component.ts (Injeção de Dependência)
constructor(public contador: ContadorService) {}
clicarBotao() {
this.contador.incrementar();
}6. Agora é a Tua Vez!
Vamos criar o "Cofre Partilhado":
- Gera um serviço chamado
CofreService. - Cria uma variável
segredo = "1234"dentro do serviço. - Cria dois componentes diferentes:
ComponenteAeComponenteB. - Injeta o
CofreServiceno constructor de ambos. - No
ComponenteA, cria um input para mudar osegredo. - No
ComponenteB, mostra osegredousando interpolação. - Repara que ao mudares no A, o B atualiza sozinho!
7. Verificação de Conhecimento
8. Resumo do Que Aprendemos
- 📌 **Serviços** servem para centralizar lógica e partilhar dados entre componentes.
- 📌 **@Injectable** é o decorador que permite ao Angular gerir a classe.
- 📌 **providedIn: 'root'** significa que o serviço é único para toda a aplicação (Singleton).
- 📌 Mantemos os componentes limpos delegando as tarefas pesadas aos serviços.
9. Desafios Práticos
Desafio 1: Onde Criar?
Se tiveres uma lógica que busca a previsão do tempo de uma API, deves colocá-la no WeatherComponent ou num WeatherService? Porquê?
Desafio 2: Singleton
O que significa dizer que um serviço com providedIn: 'root' é um **Singleton**?
Desafio 3: Segurança
Os serviços são bons lugares para guardar senhas de utilizadores de forma permanente? Sim ou não?