Módulo 19: Signals I (A Nova Reatividade)
2. Resumo da Aula Anterior
No Módulo 18, protegemos o nosso site com Guards e Interceptors. Agora, entramos na "Nova Era" do Angular. Vamos aprender sobre os Signals, a funcionalidade que veio mudar a forma como o Angular gere os dados e o torna mais rápido do que nunca.
3. O Que Vais Aprender Hoje
- ✅ O que são Signals e porquê usá-los.
- ✅ Criar um Signal com
signal(). - ✅ Alterar valores com
.set()e.update(). - ✅ Como ler Signals no HTML com parêntesis
().
4. Teoria: Reatividade com Lupa
Conceito: Antigamente, quando mudavas uma variável, o Angular tinha de percorrer a árvore de componentes inteira para ver o que tinha mudado. Com Signals, o Angular sabe exatamente qual pedaço do HTML precisa de ser atualizado. Isto chama-se "Fine-grained Reactivity".
🔔 Analogia: O Sino de Serviço
Imagina uma recepção de hotel:
- Variáveis Normais: O recepcionista tem de olhar para todas as portas do hotel a cada 5 segundos para ver se algum cliente precisa de ajuda. É cansativo e ineficaz.
- Signals (O Sino): Cada cliente tem um sino. O recepcionista pode estar a dormir; se o sino da Porta 4 tocar, ele acorda e vai **diretamente** à Porta 4. Ele não perde tempo a olhar para as outras 99 portas.
5. Exemplos Práticos
Exemplo 1: Criar e Ler
O signal é uma função que guarda um valor.
import { signal } from '@angular/core';
nome = signal('Antigravity');
// Ler no TypeScript:
console.log(this.nome()); Exemplo 2: Mudar o Valor
Duas formas de atualizar: .set() e .update().
// Substituir tudo:
this.nome.set('Novo Nome');
// Usar o valor antigo para calcular o novo:
this.contador = signal(0);
this.contador.update(v => v + 1);Exemplo 3: No HTML
Não te esqueças dos parêntesis!
<h1>Bem-vindo, {{ nome() }}!</h1>
<p>Contagem: {{ contador() }}</p>
<button (click)="contador.update(v => v + 1)">
Aumentar
</button>6. Agora é a Tua Vez!
Vamos criar o "Contador de Energia Futurista":
- Cria um Signal chamado
energiacom o valor inicial de 100. - No HTML, mostra o valor da energia. Lembra-te:
{{ energia() }}. - Cria um botão "Gastar Energia" que faz
updatesubtraindo 10 ao valor. - Cria um botão "Recarregar" que faz
setpara voltar a 100. - Adiciona um
*ngIfque mostra uma mensagem de "Aviso: Bateria Fraca" seenergia() < 20.
7. Verificação de Conhecimento
8. Resumo do Que Aprendemos
- 📌 **Signals** são a forma moderna de gerir o estado no Angular.
- 📌 Eles avisam o Angular exatamente onde a mudança aconteceu.
- 📌 Para ler um Signal, usamos **()**.
- 📌 **.set()** substitui; **.update()** modifica com base no valor anterior.
9. Desafios Práticos
Desafio 1: O Parêntesis Esquecido
O que acontece se escreveres {{ nome }} (sem parêntesis) no HTML para um Signal?
Desafio 2: Performance Máxima
É possível usar Signals com a estratégia OnPush de deteção de mudanças? Qual a vantagem?
Desafio 3: Lista de Compras
Se tiveres um Signal que guarda um **Array** (ex: ['Pão', 'Leite']) e quiseres adicionar um item, deves usar set ou update? Como farias para o Angular "perceber" a mudança?