Módulo 16: Routing I

2. Resumo da Aula Anterior

No Lote Anterior (Módulos 14-15), dominámos os Formulários Reativos e as validações complexas. Agora, a nossa aplicação precisa de crescer: vamos aprender a criar múltiplas "páginas" e caminhos sem nunca recarregar o browser, transformando o site numa **SPA (Single Page Application)**.

3. O Que Vais Aprender Hoje

✅ O que é o Angular Router e como funciona.
✅ Configurar a tabela de rotas básica.
✅ Usar o <router-outlet> para injetar vistas.
✅ Criar links inteligentes com a diretiva routerLink.

4. Teoria: A Ilusão das Páginas

Conceito: Num site tradicional, cada clique num link faz o browser pedir um novo ficheiro HTML ao servidor. No Angular, o index.html nunca muda. O Router apenas troca o componente que está a ser mostrado no ecrã de acordo com o endereço (URL).

🎭 Analogia: O Palco de Teatro

Imagina que o Angular é um teatro moderno:

O Index.html (O Palco): É a estrutura fixa. As cortinas, as luzes e as cadeiras não mudam.
O Router (O Encenador): Quando o público pede a "Cena 2" (Muda a URL), o encenador manda os atores da Cena 1 saírem e entrarem os da Cena 2.
O Router-Outlet (O Espaço de Cena): É o retângulo exato no palco onde a magia acontece. É ali que os cenários (Componentes) são trocados.
O RouterLink (O Bilhete): É a indicação de qual cena o público quer ver a seguir, sem nunca sair do teatro para ir a outro edifício.

5. Exemplos Práticos

Exemplo 1: Configurar a Tabela de Rotas

Definir os caminhos no ficheiro app.routes.ts.

import { Routes } from '@angular/router';
import { HomeComp } from './home.component';
import { SobreComp } from './sobre.component';

export const routes: Routes = [
  { path: 'home', component: HomeComp },
  { path: 'sobre', component: SobreComp },
  { path: '', redirectTo: '/home', pathMatch: 'full' } // Rota inicial
];

Exemplo 2: O Marcador de Posição

No app.component.html, dizemos onde os componentes devem aparecer.

<nav>
  <!-- Menu Fixo -->
</nav>

<!-- Aqui é onde a página muda! -->
<router-outlet></router-outlet>

<footer>Rodapé Fixo</footer>

Exemplo 3: Navegar com Segurança

Não uses `href`! Usa `routerLink` para manter a app reativa.

<!-- Errado (Recarrega a app) -->
<a href="/sobre">Sobre</a>

<!-- Correto (Navegação Angular instantânea) -->
<a routerLink="/sobre" routerLinkActive="active-class">Sobre</a>

6. Agora é a Tua Vez!

Vamos criar o "Navegador Interestelar":

Cria dois componentes novos: PlanetaComponent e NaveComponent.
No teu ficheiro de rotas, cria os caminhos /planeta e /nave para ligar a estes componentes.
No app.component.html, adiciona o <router-outlet> abaixo da barra de navegação.
Cria uma barra de navegação com dois botões que usam o routerLink.
Usa o routerLinkActive para mudar a cor do botão quando estás na página correspondente.

7. Verificação de Conhecimento

Carregando quiz...

8. Resumo do Que Aprendemos

📌 O **Router** permite criar várias vistas numa Single Page Application.
📌 A tabela de **Routes** mapeia uma URL (caminho) para um componente.
📌 O **<router-outlet>** é o local onde o Angular "projeta" o componente da rota ativa.
📌 A diretiva **routerLink** é a forma correta de navegar sem recarregar o browser.

9. Desafios Práticos

Desafio 1: O Ecrã em Branco

Se criares uma rota { path: 'loja', component: LojaComp } e tentares aceder a /loja-online (que não existe), o que acontece por defeito?

Desafio 2: Navegar via Código

Imagina que o utilizador termina um formulário e tu queres mandá-lo para a página de "Sucesso" automaticamente. Podes usar o routerLink dentro do ficheiro TypeScript?

Desafio 3: A Rota Vazia

Para que serve o pathMatch: 'full' quando definimos a rota para o caminho vazio ''?

Aprende Web: Angular

Módulo 16: Routing I (Navegação Básica)