Rotas no Angular: Navegação e Gerenciamento de Módulos

1. O Que São Rotas no Angular?

No Angular, rotas são definidas para mapear URLs específicas para componentes correspondentes. Isso permite que os usuários naveguem entre diferentes vistas da aplicação sem precisar recarregar a página inteira. O Angular Router é responsável por atualizar o conteúdo da página à medida que o usuário navega entre as rotas.

// Exemplo de configuração básica de rotas
const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: '**', component: NotFoundComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

O exemplo acima mostra a configuração básica de rotas no Angular. As rotas mapeiam URLs específicas para componentes como HomeComponent e AboutComponent. Além disso, há um redirecionamento para a página home e uma rota curinga (**) para lidar com URLs que não correspondem a nenhuma rota definida.

2. Navegação Entre Rotas

Para navegar entre rotas em uma aplicação Angular, utilizamos o serviço Router ou diretivas como <a [routerLink]="['/caminho']">. O Router permite navegação programática, enquanto o routerLink define links declarativos.

// Exemplo de navegação declarativa com routerLink
<nav>
  <a [routerLink]="['/home']">Home</a>
  <a [routerLink]="['/about']">Sobre</a>
</nav>

// Exemplo de navegação programática
import { Router } from '@angular/router';

@Component({
  selector: 'app-navegacao',
  template: `
    <button (click)="irParaSobre()">Ir para Sobre</button>
  `
})
export class NavegacaoComponent {
  constructor(private router: Router) {}

  irParaSobre() {
    this.router.navigate(['/about']);
  }
}

No primeiro exemplo, usamos routerLink para criar links que permitem navegar entre as rotas declarativamente. No segundo, a navegação é feita de forma programática usando o serviço Router.

3. Rotas Dinâmicas com Parâmetros

Angular permite criar rotas dinâmicas que aceitam parâmetros, o que é útil quando você precisa exibir detalhes de um item específico ou manipular URLs dinâmicas. Os parâmetros podem ser acessados dentro dos componentes através do serviço ActivatedRoute.

// Configuração de rota com parâmetro
const routes: Routes = [
  { path: 'detalhes/:id', component: DetalhesComponent }
];

// Exemplo de uso de rota dinâmica
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-detalhes',
  template: `
    <p>ID do item: {{ id }}</p>
  `
})
export class DetalhesComponent {
  id: string;

  constructor(private route: ActivatedRoute) {
    this.id = this.route.snapshot.paramMap.get('id')!;
  }
}

No exemplo acima, a rota 'detalhes/:id' mapeia um parâmetro dinâmico :id para o componente DetalhesComponent. O ActivatedRoute é utilizado para capturar o valor do parâmetro dentro do componente.

4. Protegendo Rotas com Guards

Em muitas aplicações, é necessário proteger certas rotas para garantir que apenas usuários autenticados ou autorizados possam acessá-las. Para isso, o Angular oferece guards, que são funções que decidem se uma rota pode ser ativada ou não.

// Exemplo de guard para proteger rota
import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';

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

  canActivate(): boolean {
    const autenticado = // lógica de autenticação;
    if (!autenticado) {
      this.router.navigate(['/login']);
      return false;
    }
    return true;
  }
}

// Configuração da rota protegida
const routes: Routes = [
  { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] }
];

Nesse exemplo, o AuthGuard verifica se o usuário está autenticado antes de permitir o acesso à rota dashboard. Se o usuário não estiver autenticado, ele é redirecionado para a página de login.

5. Carregamento Sob Demanda (Lazy Loading)

Uma técnica avançada e importante para otimização de desempenho em grandes aplicações Angular é o lazy loading. Ele permite que os módulos sejam carregados sob demanda, ou seja, apenas quando o usuário acessa determinada rota, reduzindo o tamanho inicial da aplicação.

// Exemplo de configuração de lazy loading
const routes: Routes = [
  {
    path: 'admin',
    loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule)
  }
];

No exemplo acima, o módulo AdminModule só será carregado quando o usuário acessar a rota /admin. Isso melhora o desempenho da aplicação, pois os recursos são carregados apenas quando necessários.

Conclusão

O sistema de rotas do Angular é fundamental para criar aplicações SPA de forma eficiente. Dominar o roteamento no Angular, incluindo a navegação entre rotas, rotas dinâmicas, proteção de rotas com guards e lazy loading, é essencial para criar aplicações escaláveis, seguras e com bom desempenho. Aplicar essas técnicas corretamente garantirá uma experiência de navegação fluida e otimizada para os usuários.