Angular: Rotas, Guardas e Navegação

Criando o módulo de rotas no Angular

No Angular, muita coisa é modularizada, e as rotas seguem a mesma ideia. Ao criar uma aplicação com o Angular CLI, a ferramenta pergunta se você quer adicionar o roteamento (Would you like to add Angular routing?).

Ao responder "Yes", você já recebe tudo o que precisa para o roteamento. Na verdade, basta ter um arquivo de módulo de rotas e importá-lo no módulo raiz da aplicação.

Esse arquivo, normalmente chamado app-routing.module.ts, tem a seguinte estrutura:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

// Array que vai receber a definição das rotas
const routes: Routes = [];

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

Neste momento, o que importa é a constante routes. É nela que vamos montar toda a estrutura de rotas da aplicação.

O método RouterModule.forRoot registra as rotas e os serviços do roteador no nível raiz. Além disso, o módulo exporta o RouterModule, o que libera as diretivas de navegação para os componentes do AppModule.

ng generate component pages/login
ng generate component pages/signup
ng generate component pages/master
ng generate component pages/home
ng generate component pages/reports

Compondo as rotas no Angular

Cada rota tem dois elementos principais: o path, que é o caminho da URL, e o component, que é o componente a carregar. Existem ainda formas mais eficientes de carregar páginas, como o carregamento sob demanda por módulos, mas esse é assunto para um próximo artigo.

O código abaixo mostra a forma mais simples de compor rotas no Angular:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './pages/login/login.component';
import { SignupComponent } from './pages/signup/signup.component';
import { MasterComponent } from './pages/master/master.component';
import { HomeComponent } from './pages/home/home.component';
import { ReportsComponent } from './pages/reports/reports.component';

// Cada rota associa um caminho a um componente
const routes: Routes = [
  { path: 'login', component: LoginComponent },
  { path: 'signup', component: SignupComponent },
  { path: 'master', component: MasterComponent },
  { path: 'home', component: HomeComponent },
  { path: 'reports', component: ReportsComponent },
];

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

Repare que o path não leva a barra inicial. Assim, a rota home corresponde à URL http://localhost:4200/home.

Ao abrir o navegador nesse endereço, porém, você continua vendo a página padrão do Angular. Isso acontece porque ainda falta dizer onde o componente deve aparecer.

Vale destacar também que a ordem das rotas importa. O roteador usa a estratégia de primeira correspondência, então rotas mais específicas devem vir antes das genéricas, e um curinga como ** fica sempre por último.

Exibindo as páginas com o Router Outlet

Quando você configura uma rota e navega até ela, o Angular lê a URL, procura a rota correspondente e tenta carregar o componente na tela. No nosso caso, ele encontrou a rota home e o HomeComponent, mas não descobriu onde exibir esse componente.

Para resolver isso, precisamos de uma tag especial chamada Router Outlet. Sempre que o fluxo descrito acima acontece, o Angular procura essa tag para renderizar o componente desejado.

Então, abra o arquivo app.component.html, remova todo o conteúdo e deixe apenas a tag abaixo:

<router-outlet></router-outlet>

Dessa forma, ao navegar para http://localhost:4200/home, você já vê o texto "home works!", que é o conteúdo padrão dos componentes gerados pelo CLI.

Note que qualquer HTML presente no app.component.html aparece em todas as páginas da aplicação. Por isso, particularmente, prefiro deixar apenas o Router Outlet nesse arquivo.

Navegando via HTML com routerLink

Um erro comum na navegação do Angular é usar o atributo href padrão do HTML nos links. Esse atributo faz a aplicação recarregar por completo a cada navegação, o que anula a vantagem de uma SPA.

Em vez disso, use a diretiva routerLink. Com ela, o Angular troca apenas os componentes necessários, sem recarregar a página.

Assim, inclua o código abaixo em todas as páginas HTML que criamos (home, master, login, signup e reports):

<hr>
<a routerLink="/login">Login</a><br>
<a routerLink="/signup">Signup</a><br>
<a routerLink="/master">Master</a><br>
<a routerLink="/home">Home</a><br>
<a routerLink="/reports">Reports</a><br>

Agora, execute a aplicação com ng serve e navegue entre as páginas. Repare que a troca acontece de forma instantânea, sem o piscar típico de um recarregamento.

Destacando o link ativo com routerLinkActive

O Angular também oferece a diretiva routerLinkActive. Ela aplica uma ou mais classes CSS ao link sempre que a rota correspondente estiver ativa.

Para este exemplo, criei uma classe chamada selected no arquivo styles.css:

/* Deixa o link da rota atual em negrito */
.selected {
  font-weight: bold;
}

Em seguida, adicione a diretiva aos links. Assim que uma rota estiver ativa, o link correspondente fica em negrito:

<hr>
<a routerLink="/login" routerLinkActive="selected">Login</a><br>
<a routerLink="/signup" routerLinkActive="selected">Signup</a><br>
<a routerLink="/master" routerLinkActive="selected">Master</a><br>
<a routerLink="/home" routerLinkActive="selected">Home</a><br>
<a routerLink="/reports" routerLinkActive="selected">Reports</a><br>

Esse recurso é muito útil em menus laterais e barras de navegação. Afinal, o usuário sempre sabe em que parte da aplicação está.

Navegando entre rotas do Angular via TypeScript

Da mesma forma que navegamos pelo HTML, também podemos navegar pelo TypeScript. Isso é útil, por exemplo, depois de salvar um formulário ou concluir um login.

Para isso, injete o serviço Router no construtor do componente e use o método navigate:

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

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  constructor(private router: Router) { }

  ngOnInit() { }

  // Navega para a página de login
  goToLogin() {
    this.router.navigate(['/login']);
  }
}

O método navigate recebe um array de segmentos, chamado de link parameters array. Dessa forma, você monta URLs dinâmicas combinando o caminho e os parâmetros, como em ['/home', 'my-param'].

Parâmetros nas rotas no Angular

Para passar parâmetros nas rotas no Angular, primeiro defina o nome do parâmetro no path, usando dois-pontos:

// O trecho :param vira um parâmetro da rota
{ path: 'home/:param', component: HomeComponent },

Feito isso, navegue para http://localhost:4200/home/my-param. Em seguida, recupere o valor pelo serviço ActivatedRoute:

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

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  constructor(private activatedRoute: ActivatedRoute) { }

  ngOnInit() {
    // Lê o valor do parâmetro a partir do snapshot da rota
    const param = this.activatedRoute.snapshot.paramMap.get('param');
    console.log(param);
  }
}

O ActivatedRoute dá acesso à rota ativa no momento, aos seus parâmetros e a outros valores, como query params e dados estáticos. Já o snapshot traz uma fotografia da rota no instante em que o componente nasceu.

Se o mesmo componente puder receber parâmetros diferentes sem ser recriado, prefira a propriedade paramMap como Observable. Nesse caso, você assina as mudanças e reage a cada novo valor.

Rotas aninhadas no Angular

Normalmente, as páginas de login, cadastro e recuperação de senha não têm menu lateral nem cabeçalho. Por outro lado, páginas como Home e Reports costumam ter.

Aqui cabe o conceito de Master Pages, em que temos uma página mestre e carregamos outro conteúdo dentro dela. Para chegar a esse resultado com rotas aninhadas no Angular, basta mover uma rota para dentro da outra com a propriedade children.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './pages/login/login.component';
import { SignupComponent } from './pages/signup/signup.component';
import { MasterComponent } from './pages/master/master.component';
import { HomeComponent } from './pages/home/home.component';
import { ReportsComponent } from './pages/reports/reports.component';

const routes: Routes = [
  { path: 'login', component: LoginComponent },
  { path: 'signup', component: SignupComponent },
  {
    // A Master envolve as páginas filhas
    path: '',
    component: MasterComponent,
    children: [
      { path: '', component: HomeComponent },
      { path: 'reports', component: ReportsComponent },
    ],
  },
];

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

Agora, Home e Reports ficam dentro de Master na árvore de rotas. Consequentemente, o ciclo de renderização dos componentes segue esse mesmo modelo.

Eu removi o path da Master e da Home porque não fazia mais sentido mantê-lo. Caso contrário, as URLs seriam master/home e master/reports, e nunca teríamos apenas a /.

<p>master works!</p>
<hr>
<a routerLink="/login" routerLinkActive="selected">Login</a><br>
<a routerLink="/signup" routerLinkActive="selected">Signup</a><br>
<a routerLink="/" routerLinkActive="selected">Home</a><br>
<a routerLink="/reports" routerLinkActive="selected">Reports</a><br>
<hr>
<h3>Menu/Header</h3>
<!-- Aqui o Angular renderiza as páginas filhas -->
<router-outlet></router-outlet>

Guardas de rotas no Angular

Para fechar o assunto de rotas no Angular, temos as guardas, que permitem ou bloqueiam o acesso a determinadas rotas. Elas são cumulativas, ou seja, você pode aplicar vários arquivos de guarda à mesma rota.

Na abordagem baseada em classes, todas seguem o mesmo padrão. Cada guarda implementa a interface CanActivate e tem um único método, canActivate, que retorna verdadeiro ou falso para indicar se o usuário pode acessar a página.

Além do CanActivate, o roteador oferece outros tipos. O CanActivateChild protege rotas filhas, o CanDeactivate impede a saída de uma página e o CanMatch decide se uma rota deve ou não ser considerada na correspondência.

import { Injectable } from '@angular/core';
import { CanActivate } from '@angular/router';

@Injectable()
export class SampleGuard implements CanActivate {
  // Retornar false bloqueia a navegação
  canActivate() {
    return false;
  }
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './pages/login/login.component';
import { SignupComponent } from './pages/signup/signup.component';
import { MasterComponent } from './pages/master/master.component';
import { HomeComponent } from './pages/home/home.component';
import { ReportsComponent } from './pages/reports/reports.component';
import { SampleGuard } from './guards/sample.guard';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    SignupComponent,
    MasterComponent,
    HomeComponent,
    ReportsComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [
    // Registra a guarda no container de injeção de dependência
    SampleGuard
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

const routes: Routes = [
  { path: 'login', component: LoginComponent },
  { path: 'signup', component: SignupComponent },
  {
    path: '',
    component: MasterComponent,
    // Todas as rotas filhas herdam essa proteção
    canActivate: [SampleGuard],
    children: [
      { path: '', component: HomeComponent },
      { path: 'reports', component: ReportsComponent },
    ],
  },
];

Rotas curinga e redirecionamentos no Angular

Até aqui, toda URL digitada precisava existir na lista de rotas. Mas o que acontece quando o usuário acessa um endereço que não existe, como /abc?

Nesse caso, o roteador não encontra correspondência e a navegação falha. Para tratar esse cenário, usamos uma rota curinga, com o path igual a **, que aponta para uma página de erro.

const routes: Routes = [
  { path: 'login', component: LoginComponent },
  { path: 'signup', component: SignupComponent },
  // Redireciona a raiz para a página de login
  { path: '', redirectTo: '/login', pathMatch: 'full' },
  // Captura qualquer URL que não corresponda às rotas anteriores
  { path: '**', component: NotFoundComponent },
];

Repare na propriedade redirectTo, que envia o usuário para outra rota. Já o pathMatch: 'full' garante que o redirecionamento ocorra apenas quando a URL inteira estiver vazia, e não em qualquer caminho que comece com vazio.

Como o roteador escolhe a primeira rota que corresponde à URL, a rota curinga deve ficar sempre no fim do array. Caso contrário, ela captura tudo e as demais rotas no Angular nunca chegam a ser avaliadas.

O componente NotFoundComponent é apenas uma página comum, gerada com ng generate component pages/not-found. Nela, você pode exibir uma mensagem amigável e um link de volta para a página inicial.

Formação completa de Angular

E aí, gostou deste artigo? Se você quer aprender a criar um app completo com autenticação, restrição de rotas e perfis de acesso, conheça a formação em Angular do balta.io.

O curso é totalmente prático, com uma didática diferenciada, e você pode começar de graça.

Boas práticas para organizar rotas no Angular

À medida que a aplicação cresce, o arquivo de rotas tende a ficar extenso. Por isso, vale adotar alguns cuidados desde o início.

• Mantenha as rotas no Angular em um módulo próprio, separado do AppModule.
• Declare as rotas mais específicas antes das genéricas e deixe o curinga por último.
• Agrupe páginas que compartilham layout sob uma rota pai com children.
• Aplique as guardas na rota pai sempre que todas as filhas exigirem a mesma regra.
• Prefira o routerLink ao href em todos os links internos.

Além disso, use nomes de caminho curtos, em minúsculas e sem acentos. Assim, as URLs ficam legíveis e fáceis de compartilhar.

Conclusão

Neste artigo, você viu como as rotas no Angular organizam a navegação de uma aplicação, desde o módulo de rotas até as guardas. Primeiro, criamos as rotas e o Router Outlet; em seguida, navegamos pelo HTML e pelo TypeScript.

Depois, lemos parâmetros com o ActivatedRoute, montamos rotas aninhadas com uma página mestre e protegemos o acesso com uma guarda. Com essa base, você já consegue estruturar a navegação de praticamente qualquer SPA.

O próximo passo natural é estudar o carregamento sob demanda e integrar as guardas a um serviço de autenticação real. Assim, a aplicação fica mais leve e mais segura ao mesmo tempo.

FAQ

Qual a diferença entre href e routerLink?

O href recarrega a aplicação inteira a cada clique. Já o routerLink troca apenas os componentes necessários, mantendo o estado da SPA.

Para que serve o router-outlet?

Ele marca o lugar da tela onde o Angular renderiza o componente da rota ativa. Em rotas aninhadas, cada componente pai precisa do seu próprio router-outlet.

Como ler um parâmetro da URL no Angular?

Injete o ActivatedRoute e use snapshot.paramMap.get('nome'). Se o parâmetro mudar sem recriar o componente, assine o Observable paramMap.

Uma guarda pode redirecionar o usuário?

Sim. Em vez de retornar false, a guarda pode retornar um UrlTree apontando para a página de login, por exemplo.

As guardas garantem a segurança da aplicação?

Não sozinhas, porque o código do navegador pode ser alterado. A validação de permissões precisa acontecer também na API.

Qual a diferença entre CanActivate e CanActivateChild?

O CanActivate protege a própria rota em que está configurado. O CanActivateChild roda antes de ativar cada rota filha.