Pular para conteúdo

Aula 07: Roteamento (Abordagem Clássica) 🛣️

Nesta aula, vamos aprender como transformar nossa Single Page Application em um site multipágina usando o Angular Router.

📍 O que é o Roteamento?

O roteamento permite que o usuário navegue entre diferentes visualizações (URL /home, /contato) sem que o navegador faça um "refresh" total.

graph LR
    URL[URL do Browser] --> R[Router]
    R --> |/home| C1[HomeComponent]
    R --> |/produtos| C2[ProdutosComponent]
    R --> |/vazio| C3[NotFoundComponent]

🛠️ Configuração Básica (app-routing.module.ts)

Na abordagem clássica, definimos um array de rotas.

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'produtos', component: ProdutosComponent },
  { path: '', redirectTo: '/home', pathMatch: 'full' } // Rota padrão
];

🏠 Exibindo as Rotas: router-outlet

Para indicar ao Angular onde os componentes das rotas serão renderizados, usamos a tag <router-outlet>.

<!-- app.component.html -->
<nav>...</nav>

<router-outlet></router-outlet> <!-- Componentes mudam aqui -->

<footer>...</footer>

Não usamos href para links internos! Usamos a diretiva routerLink para que o Angular controle a navegação.

<a routerLink="/home">Início</a>
<a [routerLink]="['/produtos', id]">Ver Produto</a>

🆔 Parâmetros de Rota

Podemos passar valores dinâmicos na URL (ex: /produto/123).

  1. Definição: { path: 'produto/:id', component: DetalheComponent }
  2. Captura: Usamos o serviço ActivatedRoute para ler o ID.

🚀 Prática: Site Institucional

Vamos criar um site com 3 páginas: 1. Home: Boas-vindas. 2. Sobre: Descrição da empresa. 3. Contato: Um formulário de contato.

Adicione um menu de navegação que permita transitar entre elas sem recarregar o browser.

🏁 Mini-Projeto da Aula

Crie um catálogo de filmes. Teremos duas rotas: /filmes (lista todos) e /filme/:id (mostra o detalhe do filme clicado). No componente de detalhe, exiba o ID recebido da URL para confirmar que o roteamento está funcionando.