Roteamento no Angular: rotas, links e guards

Configuração inicial do roteamento no Angular

RouterModule.forRoot e rotas básicas

// app.routes.ts
import { Routes } from '@angular/router';
import { HomeComponent } from './home.component';
import { DevListComponent } from './dev-list.component';
import { DevDetailComponent } from './dev-detail.component';
import { NotFoundComponent } from './not-found.component';

export const routes: Routes = [
  { path: '', component: HomeComponent },            // rota padrão (home)
  { path: 'devs', component: DevListComponent },     // lista de devs
  { path: 'devs/:id', component: DevDetailComponent }, // detalhes do dev com id
  { path: '**', component: NotFoundComponent }       // wildcard -> 404
];

Página padrão e 404

Navegação

• Links declarativos no template, usando a diretiva routerLink em elementos HTML (como um <a> ou <button>), para navegação via cliques.

• Navegação imperativa via código, usando os métodos do objeto Router (como router.navigate), para navegar programaticamente, por exemplo, depois de salvar um formulário ou em alguma lógica de negócio.

routerLink e query params

<!-- menu.component.html -->
<nav>
  <a routerLink="/">Início</a>
  <a routerLink="/devs">Devs</a>
</nav>

<a [routerLink]="['/devs', 256]">Ver detalhes do Dev 256</a>

<a [routerLink]="['/devs']" [queryParams]="{ exp: 'junior' }">Devs Juniores</a>

Navegação programática com Router

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({...})
export class DevActionsComponent {
  constructor(private router: Router) {}

  irParaLista(): void {
    // navegação simples para a rota '/devs'
    this.router.navigate(['/devs']);
  }

  verDetalhesDev(id: string): void {
    // navegação com parâmetro de rota e query params
    this.router.navigate(
      ['/devs', id],
      { queryParams: { ref: 'preview' } }
    );
  }
}

Rotas filhas e organização

// Exemplo de rotas com children (dentro de um módulo DevsModule, por exemplo)
const devsRoutes: Routes = [
  { path: 'devs', component: DevsComponent, children: [
      { path: '', component: DevListComponent },        // rota filha padrão (lista de devs)
      { path: 'novo', component: DevFormComponent },    // rota filha para criar novo dev
      { path: ':id', component: DevDetailComponent }    // rota filha para detalhe do dev
  ]}
];

Guards de rota

canActivate para áreas protegidas

import { Injectable } from '@angular/core';
import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';

@Injectable({ providedIn: 'root' })
export class AuthGuard implements CanActivate {
  constructor(private router: Router) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    // Lógica de autenticação simples:
    const usuarioLogado = false; // isso viria de um AuthService real, aqui é só exemplo

    if (!usuarioLogado) {
      // Se não está logado, redireciona para a página de login antes de bloquear
      this.router.navigate(['/login']);
      return false;
    }

    // Se estiver logado, permite acessar a rota
    return true;
  }
}

{ path: 'admin', component: AdminComponent, canActivate: [AuthGuard] }

Conclusão e próximos passos

E a jornada não para por aqui!