Módulo 17: Routing II (Parâmetros e Lazy Loading)
2. Resumo da Aula Anterior
No Módulo 16, aprendemos a configurar rotas básicas e a navegar entre componentes. No entanto, sites reais precisam de rotas dinâmicas (ex: exibir o perfil de um utilizador específico) e de ser rápidos. É isso que vamos resolver hoje.
3. O Que Vais Aprender Hoje
- ✅ Criar Rotas Dinâmicas com parâmetros (
:id). - ✅ Ler parâmetros usando o serviço ActivatedRoute.
- ✅ Otimizar a performance com Lazy Loading.
- ✅ Diferença entre carregar tudo ou carregar "sob demanda".
4. Teoria: Flexibilidade e Rapidez
Parâmetros: Permitem que um único componente sirva para milhares de páginas diferentes. Em vez de criares perfil-joao.html e perfil-maria.html, crias apenas um componente Perfil que lê o ID na URL.
Lazy Loading: É a técnica de dividir o código do site em pequenos pedaços ("chunks"). O browser só descarrega o código de uma funcionalidade se o utilizador clicar nela.
📦 Analogia: A IKEA e os Corredores
Imagina que o teu site é uma loja IKEA:
- Parâmetros (A Etiqueta): Tu vais ao corredor de prateleiras. Todas as prateleiras são o mesmo "Componente", o que muda é a etiqueta (Parâmetro) que diz se aquela é a Billy ou a Kallax.
- Lazy Loading (O Armazém Fechado): Ninguém carrega a loja inteira às costas. Quando entras na IKEA, só vês a entrada. Se quiseres ver cozinhas, vais até lá e eles abrem essa secção específica para ti. Se nunca fores às casas de banho, não perdes tempo a "carregá-las" visualmente.
5. Exemplos Práticos
Exemplo 1: Rota com Parâmetro
O dois pontos : indica que o valor é variável.
{ path: 'produto/:id', component: DetalheProdComp }Exemplo 2: Ler o Parâmetro no Componente
Injetar o ActivatedRoute para aceder aos dados.
constructor(private route: ActivatedRoute) {}
ngOnInit() {
const id = this.route.snapshot.paramMap.get('id');
console.log('Estou a ver o produto numero:', id);
}Exemplo 3: Lazy Loading (Angular Moderno)
Usar loadComponent em vez de component.
{
path: 'admin',
loadComponent: () => import('./admin/admin.component')
.then(m => m.AdminComponent)
}6. Agora é a Tua Vez!
Vamos criar o "Explorador de Galáxias Pro":
- Cria uma rota dinâmica
galaxia/:nomeque aponte para oGalaxiaComponent. - No
GalaxiaComponent, mostra o nome da galáxia que vem na URL usandoActivatedRoute. - Cria uma lista de links:
/galaxia/ViaLacteae/galaxia/Andromeda. - Transforma um dos teus componentes pesados (ex: uma Dashboard) em Lazy Loaded usando o
loadComponent. - Abre o separador "Network" do browser e repara como um novo ficheiro JS é descarregue apenas quando clicas no link da Dashboard!
7. Verificação de Conhecimento
8. Resumo do Que Aprendemos
- 📌 Parâmetros (
:id) tornam as rotas dinâmicas e reutilizáveis. - 📌 O **snapshot** do `ActivatedRoute` serve para ler o valor inicial da URL.
- 📌 **Lazy Loading** reduz o tamanho inicial da App, tornando o carregamento instantâneo.
- 📌 Usamos a sintaxe **import()** para carregar componentes apenas quando necessário.
9. Desafios Práticos
Desafio 1: O Parâmetro Teimoso
Se mudares de /user/1 para /user/2 estando dentro do mesmo componente, o ngOnInit corre de novo? O snapshot atualiza?
Desafio 2: Performance Extra
Qual o benefício real do Lazy Loading para um utilizador móvel com internet 3G lenta?
Desafio 3: IDs vs Slugs
É melhor passar IDs numéricos (/blog/42) ou "slugs" de texto (/blog/aprender-angular) na URL? Porquê?