Aula 07: Roteamento 🛣️
Transformando SPAs em Sites Multipágina
📍 O que é Roteamento?
É a técnica de associar uma URL a um Componente.
Permite navegação fluida sem recarregar o browser.
🛠️ RouterModule
O módulo principal de navegação.
Configuramos um array de objetos Route.
const routes = [
{ path: 'home', component: HomeComponent },
{ path: 'sobre', component: SobreComponent }
];
🏠
O "buraco" no seu layout!
O componente da rota ativa será injetado exatamente onde essa tag estiver.
🔗 routerLink
Substitui o href tradicional.
- Evita o refresh da página!
🆔 Rotas Dinâmicas
Passando parâmetros pela URL.
path: 'produto/:id'
Capturamos com o serviço ActivatedRoute.
↪️ Redirecionamento e Wildcards
- Redirect:
{ path: '', redirectTo: '/home' } - Wildcard (404):
{ path: '**', component: ErrorComp }
🚀 Lazy Loading
Carregar o código apenas quando o usuário precisar.
Melhora a performance inicial drasticamente.
🎯 Prática de Hoje
Vamos criar um mini-site Institucional com 3 páginas e menu de navegação fixo!