Defininindo Rotas - Angular

O roteamento permite associar as solicitações ao aplicação com recursos específicos dentro dele.

O módulo chave para o funcionamento do roteamento é o RouterModule, que está localizado no pacote @angular/router.

Vamos instalar o pacote de roteamento do Angular:

npm install @angular/router

Para definir as rotas, vamos começar com a seguinte estrutura de diretórios:

helloapp/
├── src/
│   ├── app/
│   │   ├── app.component.ts
│   ├── main.ts  
│   ├── index.html 
├── angular.json    
├── package-lock.json
├── package.json
└── tsconfig.json

Para trabalhar com o roteamento, o primeiro passo é definir o endereço base da aplicação. Para isso, editamos a página index.html e adicionamos o elemento <base> dentro da seção <head>:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <base href="/" />
    <title>Hello Angular</title>
</head>
<body>
    <my-app>Carregando...</my-app>
</body>
</html>

Aqui, o endereço base será considerado o diretório raiz da aplicação.

Cada rota é associada a um componente específico. Assim, vamos adicionar alguns componentes ao projeto. Primeiro, adicionamos o arquivo home.component.ts na pasta src/app:

import { Component } from "@angular/core";

@Component({
    selector: "home-app",
    template: "<h2>Página Inicial</h2>"
})
export class HomeComponent { }

Este simples componente exibe um cabeçalho genérico.

Em seguida, adicionamos o arquivo about.component.ts na pasta src/app:

import { Component } from "@angular/core";

@Component({
    selector: "about-app",
    template: "<h2>Sobre o Site</h2>"
})
export class AboutComponent { }

Por fim, adicionamos o arquivo not-found.component.ts:

import { Component } from "@angular/core";

@Component({
    selector: "not-found-app",
    template: "<h2>Página Não Encontrada</h2>"
})
export class NotFoundComponent { }

Adicionando e Configurando Rotas

Além do componente principal, AppComponent, o projeto agora tem três componentes adicionais, cada um responsável por exibir um cabeçalho. Para cada um desses componentes, podemos definir uma rota correspondente. Para isso, vamos criar um novo arquivo chamado app.config.ts dentro da pasta src/app com o seguinte conteúdo:

import { provideRouter, Routes } from "@angular/router";
import { ApplicationConfig } from "@angular/core";
    
// componentes que correspondem às rotas
import { HomeComponent } from "./home.component";
import { AboutComponent } from "./about.component";
import { NotFoundComponent } from "./not-found.component";
    
// definição das rotas
const appRoutes: Routes = [
    { path: "", component: HomeComponent },
    { path: "about", component: AboutComponent },
    { path: "**", component: NotFoundComponent }
];
    
export const appConfig: ApplicationConfig = {
    providers: [provideRouter(appRoutes)]
};

Aqui, são importadas a função provideRouter (para configurar as rotas) e a classe Routes, que representa a coleção de rotas:

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

As rotas do aplicação são configuradas como parte da configuração geral da aplicação, representada pela classe ApplicationConfig. Vamos também importar essa classe:

import { ApplicationConfig } from "@angular/core";

Em seguida, definimos o conjunto de rotas:

import { HomeComponent } from "./home.component";
import { AboutComponent } from "./about.component";
import { NotFoundComponent } from "./not-found.component";
    
// definição das rotas
const appRoutes: Routes = [
    { path: "", component: HomeComponent },
    { path: "about", component: AboutComponent },
    { path: "**", component: NotFoundComponent }
];

Aqui, definimos três rotas, cada uma associada a um componente diferente. O parâmetro path especifica o caminho da rota. Por exemplo, o caminho "about" será equivalente a uma URL como "http://localhost:3000/about" e será processado pela classe AboutComponent.

Se a solicitação não contiver segmentos adicionais, como no caso da URL "http://localhost:3000/", ela será mapeada para o caminho "" (uma string vazia) e processada pelo HomeComponent.

Se a aplicação receber uma solicitação que não corresponda a nenhuma das rotas definidas, será usado o caminho "**", onde os dois asteriscos representam qualquer caminho não identificado.

Para aplicar as rotas, criamos um objeto ApplicationConfig e configuramos sua propriedade providers:

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

Aqui, passamos o resultado da função provideRouter() para a coleção providers. Essa função recebe a coleção de rotas Routes e usa essas informações para configurar o serviço de roteamento Router. Quando a aplicação é carregada, o Router faz a navegação inicial com base na URL atual do navegador.

Entretanto, até agora, só definimos a configuração da aplicação por meio do objeto appConfig. Agora, precisamos aplicá-lo à aplicação. Para isso, vamos modificar o arquivo main.ts da seguinte maneira:

import { bootstrapApplication } from "@angular/platform-browser";
import { AppComponent } from "./app/app.component";
import { appConfig } from "./app/app.config";
bootstrapApplication(AppComponent, appConfig);

O segundo parâmetro da função bootstrapApplication() é opcional, e aqui passamos a configuração da aplicação, representada pelo objeto appConfig, que define o sistema de roteamento.

RouterOutlet

Já definimos três componentes diferentes para rotas distintas, mas o componente principal ainda é o AppComponent. Ele atua como um contêiner para os outros componentes que processam as solicitações da aplicação.

Para que o AppComponent possa renderizar o componente apropriado conforme a solicitação, é necessário usar o elemento RouterOutlet. Vamos modificar o código do AppComponent para incluir esse elemento:

import { Component } from "@angular/core";
import { RouterOutlet } from "@angular/router";
  
@Component({
    selector: "my-app",
    standalone: true,
    imports: [RouterOutlet],
    template: `<div>
                    <h1>Aplicação Angular</h1>
                    <router-outlet></router-outlet>
                </div>`,
})
export class AppComponent {}

No lugar do elemento <router-outlet>, será renderizado o componente que foi definido para processar a solicitação.

No final, o projeto ficará com a seguinte estrutura:

helloapp/
├── src/
│   ├── app/
│   │   ├── about.component.ts
│   │   ├── app.component.ts
│   │   ├── app.config.ts
│   │   ├── home.component.ts
│   │   ├── not-found.component.ts
│   ├── main.ts  
│   ├── index.html 
├── angular.json    
├── package-lock.json
├── package.json
└── tsconfig.json

Quando iniciamos a aplicação, por padrão ela será carregado sem segmentos adicionais, e a solicitação será processada pelo HomeComponent:

Se a URL for alterada para "http://localhost:4200/about", o AboutComponent será renderizado:

Ao navegar para qualquer outro endereço, o NotFoundComponent será acionado:

Correspondência de URL e ordem das rotas

Quando uma navegação é realizada para um determinado caminho, como "/about", o sistema de roteamento verifica o caminho da solicitação e o compara com os parâmetros path de cada rota. Esse processo é conhecido como correspondência de URL (URL matching). Por exemplo, o caminho "/about" será mapeado para a rota:

{ path: "about", component: AboutComponent }

E o AboutComponent será responsável por processar essa solicitação.

No entanto, ao definir as rotas, é importante prestar atenção à ordem delas. Um mesmo caminho pode corresponder a várias rotas, e, nesse caso, a primeira rota que corresponder será a que processará a solicitação. As outras rotas serão ignoradas. Por exemplo, se mudarmos a ordem das rotas:

const appRoutes: Routes = [
  { path: "**", component: NotFoundComponent },
  { path: "", component: HomeComponent },
  { path: "about", component: AboutComponent }
];

Agora, uma solicitação para "/about" será processada pela primeira rota, já que o caminho "**" corresponde a qualquer combinação de caracteres.

Portanto, a rota { path: "**", component: NotFoundComponent } deve ser sempre definida por último, para garantir que somente as solicitações não correspondentes a nenhuma das outras rotas sejam processadas por ela.

Redirecionamento

Também pode ser necessário redirecionar uma solicitação de uma rota para outra. Por exemplo, se uma rota não for encontrada, podemos redirecionar para a página inicial:

const appRoutes: Routes = [
  { path: "", component: HomeComponent },
  { path: "about", component: AboutComponent },
  { path: "**", redirectTo: "/" }
];

Aqui, usamos o parâmetro redirectTo, cujo valor é o caminho para onde o usuário será redirecionado. Nesse caso, a barra indica a página inicial.

Também podemos especificar um critério de correspondência para a rota usando o parâmetro pathMatch:

const appRoutes: Routes = [
  { path: "", component: HomeComponent },
  { path: "about", component: AboutComponent },
  { path: "contact", redirectTo: "/about", pathMatch: "full" },
  { path: "**", redirectTo: "/" }
];

O valor pathMatch: "full" indica que o caminho solicitado deve corresponder exatamente à rota. Por exemplo, uma solicitação para "/contact" corresponde totalmente à rota:

{ path: "contact", redirectTo: "/about", pathMatch: "full" }

Portanto, ela será redirecionada para "/about".

Já uma solicitação para "/contact/5" não corresponderá, pois há segmentos adicionais após "contact".