Como gerenciar rotas em uma aplicação Angular?

No Angular, o roteamento é como um mapa que guia os usuários pela sua aplicação.
Para configurá-lo, importe o módulo RouterModule, defina suas rotas e use a diretiva router-outlet para exibir o conteúdo.
Crie links de navegação com routerLink e passe parâmetros entre componentes usando ActivatedRoute.
Com o roteamento, sua aplicação se torna mais organizada e fácil de navegar.

Resposta Longa:

Gerenciando Rotas em uma Aplicação Angular

O sistema de roteamento do Angular permite que diferentes componentes sejam exibidos com base na URL, sem a necessidade de recarregar a página inteira. Vamos explorar como configurar e utilizar o roteamento no Angular, cobrindo desde os conceitos básicos até práticas avançadas.

Introdução ao Roteamento

Em uma SPA, você muda o que o usuário vê ao mostrar ou esconder partes da interface que correspondem a componentes específicos, em vez de buscar uma nova página no servidor.
À medida que os usuários interagem com a aplicação, eles precisam navegar entre as diferentes visualizações que você definiu.
O Angular Router facilita essa navegação, interpretando a URL do navegador como uma instrução para alterar a visualização.

Tarefas Comuns de Roteamento

A seguir, detalhamos como implementar várias tarefas comuns associadas ao roteamento no Angular:

• Gerar uma aplicação com roteamento habilitado
• Adicionar componentes para roteamento
• Definir rotas básicas
• Gerenciar a ordem das rotas
• Configurar rotas coringa e redirecionamentos
• Aninhar rotas
• Definir o título da página
• Utilizar caminhos relativos
• Acessar parâmetros de rota e fragmentos
• Carregamento sob demanda (Lazy Loading)
• Impedir acesso não autorizado

Gerando uma Aplicação com Roteamento Habilitado

Você pode gerar uma nova aplicação Angular com suporte a roteamento utilizando o Angular CLI. O comando abaixo cria uma aplicação chamada routing-app com o roteamento habilitado:

ng new routing-app --routing

Adicionando Componentes para Roteamento

Para utilizar o Angular Router, uma aplicação precisa ter pelo menos dois componentes, permitindo a navegação entre eles. Use o Angular CLI para gerar componentes:

ng generate component first
ng generate component second

Definindo Rotas Básicas

O roteamento no Angular é configurado através de um array de objetos Routes, onde cada rota é um objeto JavaScript que define o caminho (path) e o componente a ser exibido (component):

import { Routes } from '@angular/router';
import { FirstComponent } from './first/first.component';
import { SecondComponent } from './second/second.component';

export const routes: Routes = [
  { path: 'first-component', component: FirstComponent },
  { path: 'second-component', component: SecondComponent },
];

Essas rotas devem ser importadas e fornecidas à aplicação através do provideRouter:

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes)],
};

Gerenciando a Ordem das Rotas

A ordem das rotas é crucial porque o Angular Router usa uma estratégia de “primeiro a coincidir ganha”. Portanto, rotas mais específicas devem ser listadas antes das rotas menos específicas. Rotas com caminhos estáticos devem vir primeiro, seguidas por rotas com caminho vazio (rota padrão), e por fim, a rota coringa (**), que corresponde a qualquer URL que não tenha correspondido a nenhuma das rotas anteriores.

Configurando Rotas Curinga e Redirecionamentos

Uma boa prática é configurar uma rota coringa para lidar com URLs não correspondentes, redirecionando o usuário para uma página 404 ou outra rota predefinida:

const routes: Routes = [
  { path: 'first-component', component: FirstComponent },
  { path: 'second-component', component: SecondComponent },
  { path: '', redirectTo: '/first-component', pathMatch: 'full' }, // Redirecionamento
  { path: '**', component: PageNotFoundComponent },  // Rota coringa
];

Aninhando Rotas

Rotas aninhadas permitem criar hierarquias de navegação dentro de componentes. Por exemplo, o componente FirstComponent pode ter suas próprias rotas filhas:

const routes: Routes = [
  {
    path: 'first-component',
    component: FirstComponent,
    children: [
      { path: 'child-a', component: ChildAComponent },
      { path: 'child-b', component: ChildBComponent },
    ],
  },
];

Definindo o Título da Página

Cada página deve ter um título único, que pode ser definido diretamente na configuração da rota:

const routes: Routes = [
  {
    path: 'first-component',
    title: 'First Component',
    component: FirstComponent,
    children: [
      { path: 'child-a', title: 'Child A', component: ChildAComponent },
      { path: 'child-b', title: 'Child B', component: ChildBComponent },
    ],
  },
];

Utilizando Caminhos Relativos

Caminhos relativos permitem navegar em relação ao segmento de URL atual. Por exemplo, para navegar para o SecondComponent a partir do FirstComponent, use ../ para subir um nível na hierarquia de URLs:

<a routerLink="../second-component">Ir para o Segundo Componente</a>

Acessando Parâmetros de Rota e Fragmentos

Você pode acessar parâmetros de rota e fragmentos utilizando o serviço ActivatedRoute:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-product-detail',
  templateUrl: './product-detail.component.html'
})
export class ProductDetailComponent implements OnInit {
  productId: string;

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    this.route.paramMap.subscribe(params => {
      this.productId = params.get('id');
    });
  }
}

Carregamento Sob Demanda (Lazy Loading)

Lazy loading permite que módulos sejam carregados sob demanda, o que pode melhorar significativamente o desempenho da aplicação. Para configurar lazy loading, utilize a propriedade loadChildren em vez de component ao definir uma rota:

const routes: Routes = [
  {
    path: 'feature',
    loadChildren: () => import('./feature/feature.module').then(m => m.FeatureModule)
  }
];

Impedindo Acesso Não Autorizado

Use guardiões de rota (route guards) para impedir que usuários não autorizados acessem certas rotas. Por exemplo, você pode usar CanActivate para proteger uma rota:

const routes: Routes = [
  {
    path: 'admin',
    component: AdminComponent,
    canActivate: [AuthGuard]
  }
];

Conclusão

O gerenciamento de rotas no Angular é uma ferramenta poderosa para criar aplicações dinâmicas e interativas. Ao entender e utilizar o sistema de roteamento de maneira eficaz, você pode melhorar a experiência do usuário e organizar melhor sua aplicação.