🚀 Capítulo 14: Rotas e Navegação

🎯 Objetivo da Aula

Ao final desta aula, você será capaz de configurar o sistema de rotas do Angular para criar uma aplicação de página única (SPA) com múltiplas “páginas” (views), permitindo que o usuário navegue entre diferentes componentes através da URL sem recarregar o navegador.

---

🏢 O Cenário Prático (Seu Desafio)

A sua aplicação agora tem duas telas: o Painel de Controle (que já criamos) e o Quartel General (onde ficam as mensagens do conselho). Seu desafio é criar um sistema de hiperdrive (rotas) para que o piloto possa alternar entre essas duas telas clicando em links!

---

🧠 Fundamentos: A Teoria Traduzida

Em uma SPA (Single Page Application), o navegador nunca recarrega a página inteira. O Angular apenas troca o componente que está sendo exibido na tela baseado na URL digitada.

Conceitos Chave:

• Routes: Um array no TypeScript onde você diz: “Se a URL for /painel, mostre o PainelControleComponent”.
• <router-outlet></router-outlet>: É a “janela” ou o “portal” no seu HTML principal onde os componentes das rotas vão aparecer.
• routerLink: É o substituto do href do HTML. Ele muda a URL sem recarregar a página.

---

📖 Exemplo Guiado: Configurando as Rotas

Vamos configurar as rotas da nossa aplicação.

🛠️ Passo a Passo (Configuração das Rotas)

Se você estiver usando o padrão Standalone (Angular 14+), as rotas geralmente ficam no arquivo app.routes.ts:

import { Routes } from '@angular/router';
import { PainelControleComponent } from './painel-controle/painel-controle.component';
import { MiniCacaComponent } from './mini-caca/mini-caca.component'; // Usaremos este como segunda tela
 
export const routes: Routes = [
  { path: 'painel', component: PainelControleComponent },
  { path: 'caca', component: MiniCacaComponent },
  { path: '', redirectTo: '/painel', pathMatch: 'full' } // Rota padrão
];

🛠️ Passo a Passo (HTML Principal)

Abra o arquivo principal src/app/app.component.html e monte o menu:

<nav style="background-color: #333; padding: 10px;">
  <!-- routerLink evita o recarregamento da página -->
  <a routerLink="/painel" style="color: white; margin-right: 10px;">Painel de Controle</a>
  <a routerLink="/caca" style="color: white;">Mini-Caça</a>
</nav>
 
<hr>
 
<!-- É aqui que as telas vão aparecer quando você clicar nos links! -->
<router-outlet></router-outlet>

🕹️ Como Executar e Testar no VS Code

1. Salve tudo e execute ng serve.
2. Clique nos links do menu no topo.
3. Veja que a URL no navegador muda (para localhost:4200/painel ou /caca) e o conteúdo abaixo do menu muda na hora, sem aquela “piscada” de carregamento!

---

🛠️ Prática Obrigatória 1

Crie um novo componente chamado quartel-general (ng g c quartel-general). Adicione uma rota para ele no arquivo de rotas com o caminho path: 'qg'.

---

🛠️ Prática Obrigatória 2

No menu do app.component.html, adicione um terceiro link apontando para /qg com o texto “Quartel General”.

---

🔑 Gabarito de Código/Fórmulas

Prática 1:

No app.routes.ts:

{ path: 'qg', component: QuartelGeneralComponent }

Prática 2:

No app.component.html:

<a routerLink="/qg" style="color: white;">Quartel General</a>

---

← Capitulo Anterior | Proximo Capitulo →