1º parte: Routing no Angular: Tarefas Comuns de Roteamento

O roteamento no Angular é uma habilidade essencial para desenvolver aplicações web dinâmicas e interativas. Ele permite a navegação entre diferentes partes da aplicação sem recarregar a página inteira, proporcionando uma experiência de usuário fluida.
Este artigo aborda as tarefas comuns associadas à implementação do roteamento em uma aplicação Angular.

Gerando uma Aplicação com Roteamento Habilitado

Para iniciar o desenvolvimento de uma aplicação Angular com roteamento, o Angular CLI facilita o processo ao permitir a criação de uma aplicação já configurada com as rotas necessárias. Isso não só poupa tempo, mas também garante que a estrutura do projeto esteja pronta para a navegação desde o início.

Comando para Gerar a Aplicação

O comando abaixo utiliza o Angular CLI para gerar uma aplicação Angular básica com roteamento habilitado. Neste exemplo, o nome da aplicação será routing-app:

ng new routing-app

O que Acontece Durante a Geração

Ao executar o comando acima, o Angular CLI realiza as seguintes ações:

Criação do Projeto: Uma nova pasta chamada routing-app é criada, contendo todos os arquivos e diretórios necessários para um projeto Angular.
Configuração do Roteamento: O CLI pergunta se você deseja configurar o roteamento na aplicação. Se você responder “Sim” (Yes), o CLI cria automaticamente um módulo de roteamento (AppRoutingModule) e adiciona as configurações necessárias no AppModule.
Estrutura Padrão: Além disso, o AppRoutingModule é criado com uma estrutura básica pronta para que você comece a definir suas rotas.

Benefícios de Iniciar com o Roteamento Habilitado

Economia de Tempo: Não é necessário configurar o roteamento manualmente após a criação do projeto, poupando etapas adicionais.
Organização: O módulo de roteamento (AppRoutingModule) é separado do módulo principal da aplicação, facilitando a manutenção e a organização do código.
Pronto para Expansão: Com o roteamento habilitado desde o início, é fácil expandir a aplicação adicionando novas rotas e componentes conforme necessário.

Esse comando é ideal para desenvolvedores que planejam criar uma aplicação que exigirá navegação entre diferentes páginas ou seções, como dashboards, páginas de login, entre outros.

Adicionando Componentes para Roteamento

Para utilizar o roteamento no Angular, é necessário que sua aplicação tenha pelo menos dois componentes. Dessa forma, você pode navegar de um componente para outro. A criação desses componentes pode ser facilitada pelo Angular CLI, que automatiza o processo e garante que tudo esteja configurado corretamente.

Criando o Primeiro Componente

Para criar um componente usando o Angular CLI, digite o seguinte comando no terminal. Neste exemplo, o nome do componente será first:

ng generate component first

Criando o Segundo Componente

Repita o mesmo processo para criar um segundo componente. Aqui, o nome escolhido será second:

ng generate component second

O que Acontece Durante a Criação dos Componentes

Nomeação Automática: O Angular CLI automaticamente adiciona o sufixo Component ao nome do componente. Então, se você nomear seu componente como first, o nome completo será FirstComponent.
Estrutura Criada: O CLI gera a estrutura completa do componente, incluindo o HTML, CSS, TypeScript e os arquivos de teste correspondentes. Além disso, ele automaticamente registra o novo componente no módulo principal da aplicação (AppModule).

Configuração do `<base href>`

Para que o roteamento funcione corretamente, especialmente em aplicativos gerados manualmente, é essencial garantir que o elemento <base href="/"> esteja presente no <head> do arquivo index.html. Este elemento define o diretório raiz da aplicação, o que é crucial para a navegação correta entre as rotas.

Importando seus Novos Componentes

Para que você possa utilizar os componentes que acabou de criar, é necessário importá-los no arquivo app.routes.ts. A importação dos componentes garante que o Angular possa referenciá-los ao configurar as rotas.

Aqui está como importar seus componentes no topo do arquivo app.routes.ts:

import { FirstComponent } from './first/first.component';
import { SecondComponent } from './second/second.component';

Definindo uma Rota Básica

A criação de rotas no Angular envolve três etapas fundamentais. Essas etapas são essenciais para garantir que o sistema de navegação da sua aplicação funcione corretamente.

1. Importar as Rotas e Configurá-las

Primeiro, você precisa importar as rotas e adicioná-las à função provideRouter dentro da configuração da aplicação. Isso garante que o Angular saiba como lidar com a navegação baseada nas rotas que você definiu.

O exemplo a seguir mostra como isso pode ser feito no arquivo app.config.ts:

import { provideRouter, Routes } from '@angular/router';

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

Nota: O Angular CLI realiza essa etapa automaticamente para você. No entanto, se você estiver criando uma aplicação manualmente ou trabalhando com uma aplicação existente que não foi gerada pelo CLI, verifique se as importações e a configuração estão corretas.

2. Configurar um Array de Rotas

No Angular, as rotas são configuradas em um array de objetos Routes. O Angular CLI cria essa estrutura automaticamente, mas é importante entender como ela funciona. Aqui está como você pode definir o array de rotas:

import { Routes } from '@angular/router';

export const routes: Routes = [];

3. Definir as Rotas no Array

Cada rota é representada por um objeto JavaScript que contém duas propriedades principais: path e component. A propriedade path define o caminho da URL para a rota, enquanto a propriedade component define qual componente o Angular deve renderizar para esse caminho.

Aqui está um exemplo de como definir essas rotas:

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

Adicionando as Rotas à Aplicação

Agora que as rotas foram definidas, é hora de integrá-las à sua aplicação. Isso envolve adicionar links para os componentes e atualizar o template do seu componente principal para incluir um <router-outlet>.

1. Adicionando Links para os Componentes

No template do seu componente principal, adicione links que permitam ao usuário navegar entre os componentes. Use o atributo routerLink para especificar qual rota deve ser ativada ao clicar no link:

<h1>Angular Router App</h1>
<nav>
  <ul>
    <li><a routerLink="/first-component" routerLinkActive="active" ariaCurrentWhenActive="page">First Component</a></li>
    <li><a routerLink="/second-component" routerLinkActive="active" ariaCurrentWhenActive="page">Second Component</a></li>
  </ul>
</nav>
<!-- As views roteadas serão renderizadas aqui -->
<router-outlet></router-outlet>

2. Atualizando o Componente Principal

No seu componente principal (AppComponent), você precisa importar RouterLink, RouterLinkActive, e RouterOutlet no array de imports para garantir que o roteamento funcione corretamente:

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet, RouterLink, RouterLinkActive } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet, RouterLink, RouterLinkActive],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'routing-app';
}

Ordem das Rotas

A ordem das rotas no array Routes é crucial porque o Angular utiliza uma estratégia de correspondência onde “a primeira correspondência ganha”. Isso significa que rotas mais específicas devem ser listadas antes de rotas menos específicas. Em geral, siga esta ordem:

Rotas estáticas: Coloque rotas com caminhos específicos no início.
Rota padrão: A rota com caminho vazio (path: ''), que serve como rota padrão, deve ser listada após as rotas específicas.
Rota coringa: A rota coringa (path: '**'), que captura qualquer caminho não correspondido, deve ser a última da lista, pois ela corresponde a todas as URLs e só deve ser selecionada se nenhuma outra rota corresponder.

Seguindo essas práticas, você garante que a navegação na sua aplicação Angular seja fluida e previsível

Com esta última seção, concluímos a segunda parte do artigo sobre Angular Routing. Neste ponto, você deve estar familiarizado com a criação de uma aplicação Angular com roteamento habilitado, adicionando componentes para roteamento e configurando as rotas básicas. Compreendemos a importância da ordem das rotas e como configurar o roteamento de forma eficiente para garantir uma navegação suave na aplicação.

Na próxima parte, vamos explorar tarefas comuns relacionadas ao roteamento, como manipulação de parâmetros de rota, configuração de rotas aninhadas, e implementação de redirecionamentos, entre outros tópicos avançados.

Fique atento para continuar a expandir seu conhecimento sobre o poder do roteamento no Angular e como ele pode ser usado para criar aplicações robustas e intuitivas.

Routing