O Angular nos fornece um esquema de rotas e navegação completo, simples e fácil de utilizar, incluindo um esquema de guardas de rotas para implementar segurança em nossos Apps.
Se você não sabe como eles funcionam, ou quer aprender mais sobre o assunto, vem comigo que vou te mostrar neste artigo.
No Angular, muita coisa é modularizada, e as rotas não são diferentes. Ao criar uma aplicação Angular, somos indagados sobre o uso das mesmas (Would you like to add Angular Routing?), e ao responder “Yes”, já temos tudo que precisamos para o roteamento.
Na verdade, tudo que precisamos para ter rotas em nossa aplicação é um arquivo de módulo das rotas e importá-lo posteriormente no Root Module.
Este arquivo de rotas, normalmente chamado app-routing.module.ts, tem a seguinte estrutura.
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
O que importa para nós neste momento é a constante “routes”, que será o local onde colocaremos nossa estrutura de rotas.
Em adicional, vamos criar algumas páginas (Components) para poder exemplificar melhor, rodando os comandos abaixo.
ng generate componente pages/login
ng generate componente pages/signup
ng generate componente pages/master
ng generate componente pages/home
ng generate componente pages/reports
As rotas são definidas por dois elementos principais, o Path, que é o caminho (URL) e o Componente, que é o componente a ser carregado. Ainda existem outras formas de carregar páginas mais eficientes, como carregamento assíncrono, via módulos, mas este é assunto para um próximo artigo.
Este é o resultado da forma mais simples de rotas que podemos ter 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';
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 { }
Ao abrir o browser, podemos navegar para http://localhost:4200/home por exemplo, porém, continuaremos a ver a página padrão do Angular na tela.
Quando configuramos uma rota e navegamos até ela, o Angular recupera a URL, checa no arquivo de rotas e tenta carregar o componente na tela.
Neste caso, o que acontece é que o Angular recuperou a URL http://localhost:4200/home, encontrou uma rota com este nome, localizou o componente que devia renderizar na tela, mas não conseguiu encontrar ONDE, na tela, ele deveria renderizar este componente.
Para que isto aconteça, precisamos de uma tag especial, chamada de Router Outlet, pois sempre que um fluxo como o descrito acima é chamado, o Angular busca esta tag para poder renderizar o componente desejado.
Vamos então para página app.component.html, remover todo conteúdo dela e deixar apenas as tags .
Desta forma, ao navegar para URL http://localhost:4200/home, conseguimos ver o texto “home Works!”, padrão dos componentes do Angular.
É importante notar que qualquer HTML contido na página app.component.html será exibido em todas as páginas do nosso App, então, particularmente prefiro deixar apenas o Router Outlet nele.
Um erro comum na navegação do Angular é utilizar o href padrão do HTML para link de páginas. O uso desta propriedade, fará com que nossa aplicação seja recarregada a cada navegação.
Ao invés disso, utilizamos o routerLink do Angular, que fará com que apenas os componentes necessários sejam renderizados na tela.
Desta forma, vamos incluir o seguinte código à todas as páginas HTML (home, master, login, signup, reports) que temos.
<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>
Neste momento, já podemos executar a aplicação, utilizando “ng serve” e navegar entre as páginas que criamos posteriormente.
Existe também, um elemento chamado Router Link Active, que nos permite deixar um link com algum CSS diferente quando sua rota está selecionada.
Para este exemplo, criei um estilo chamado “selected” no arquivo styles.css, conforme mostrado abaixo.
.selected {
font-weight: bold;
}
Desta forma, podemos adicionar a propriedade routerLinkActive no nosso link e assim que uma rota for chamada o link ficará em negrito. Vamos então substituir nosso código anterior, por este abaixo.
<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>
Da mesma forma que podemos navegar utilizando elementos do HTML, podemos também via TypeScript.
Para isto, precisamos utilizar o Router, injetado no componente e posteriormente utilizar seu método Navigate, conforme mostrado abaixo.
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() {
}
goToLogin() {
this.router.navigate(['/login']);
}
}
Para passar parâmetros em rotas, precisamos primeiro definir o nome dele nas constantes do módulo de rotas.
{ path: 'home/:parametro', component: HomeComponent },
Feito isto, podemos navegar novamente para página Home através da URL https://localhost:4200/home/MeuParametro e recuperar seu valor pelo Activated Route.
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() {
const par = this.activatedRoute.snapshot.paramMap.get('parametro');
console.log(par);
}
}
O Activated Route nos dá acesso a rota ativa no momento, seus parâmetros e demais valores.
Normalmente, as páginas de Login, Signup, Reset Password não possuem menu lateral ou cabeçalho, porém a Home, Reports, dentre outras, possuem.
O conceito de Master Pages pode ser aplicado aqui também, onde temos uma página mestre e carregamos outro conteúdo dentro dela.
Para ter este resultado no Angular, basta movermos uma rota dentro da outra, utilizando 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 },
{
path: '',
component: MasterComponent,
children: [
{ path: '', component: HomeComponent },
{ path: 'reports', component: ReportsComponent },
],
},
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
Note que agora, Home e Reports ficam dentro de Master na rota, e o ciclo para renderização dos componentes também segue este modelo.
Eu removi o Path do componente Master e Home, já que não fazia mais sentido tê-lo, senão as URL ficariam “master/home”, “master/reports” e nunca teríamos um “/” apenas.
Seguindo o ciclo, ao renderizar as telas agora o Angular tentará carregar DOIS COMPONENTES, o Master e o Home por exemplo, porém, só temos UM Router Outlet na tela, causando confusão.
Desta forma, no Master, temos também que adicionar um Router Outlet.
<p>master works!</p>
<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>
<hr>
<h3>Menu/Cabeçalho</h3>
<router-outlet></router-outlet>
Agora ao navegar para Home ou Reports, teremos além dos links carregados em todas as páginas, uma mensagem “Menu/Cabeçalho”.
Para fechar nosso assunto de rotas, temos a possibilidade de criar guardas, que permitem ou não o acesso a determinadas rotas.
Estas guardas são cumulativas, ou seja, você pode ter vários arquivos de guardas, e todos eles seguem um mesmo padrão, implementam CanActivate e tem um método apenas, chamado também CanActivate, que retorna verdadeiro ou falso, informando se o usuário pode ou não chegar a esta página.
Neste exemplo, criei uma rota que retorna sempre falso, ou seja, não permite a navegação para uma página.
import { CanActivate } from '@angular/router';
import { Injectable } from '@angular/core';
@Injectable()
export class SampleGuard implements CanActivate {
canActivate() {
return false;
}
}
Feito isto, vamos adicionar a guarda aos Providers no AppModule.
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: [
SampleGuard
],
bootstrap: [AppComponent]
})
export class AppModule { }
Para finalizar, podemos utilizar o CanActivate das rotas para aplicar a guarda a uma rota pai ou alguma rota filha.
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';
import { SampleGuard } from './guards/sample.guard';
const routes: Routes = [
{ path: 'login', component: LoginComponent },
{ path: 'signup', component: SignupComponent },
{
path: 'master',
component: MasterComponent,
canActivate: [SampleGuard],
children: [
{ path: 'home', component: HomeComponent },
{ path: 'reports', component: ReportsComponent },
],
},
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
Agora ao tentar navegar para as rotas “/” ou “reports” seremos bloqueados.
E aí, gostou deste artigo? Quer aprender a criar um App completo com autenticação, restrição em rotas, perfis de acesso? Então você não pode deixar de fazer minha formação em Angular!
São mais de 8 horas de curso, com mais de 100 aulas, 100% prático, com didática diferenciada, e o melhor, você COMEÇA DE GRAÇA!
Este artigo atualmente utiliza a versão 5.0.0-rc.1 do ASP.NET/.NET, o que significa que ainda não...
Saiba como manter seu código limpo (Clean Code) seguindo algumas práticas sugeridas pelo Robert C...
Git é um sistema de controle de versões distribuídas, enquanto GitHub é uma plataforma que tem o ...
O Visual Studio Code é um editor de código criado pela Microsoft e que tem uma grande adoção pela...
O Angular nos fornece um esquema de rotas e navegação completo, simples e fácil de utilizar.
Me dedico ao desenvolvimento de software desde 2003, sendo minha maior especialidade o Desenvolvimento Web. Durante esta jornada pude trabalhar presencialmente aqui no Brasil e Estados Unidos, atender remotamente times da ?ndia, Inglaterra e Holanda, receber 8x Microsoft MVP e realizar diversas consultorias em empresas e projetos de todos os tamanhos.
Aulas disponíveis
horas de conteúdo
Alunos matriculados
Certificados emitidos
Temos mais de 16 cursos totalmente de graça e todos com certificado de conclusão.
Prefere algo mais Premium?
Compra única, parcelada em até
12x no cartão de crédito
Cobrado mensalmente via
cartão de crédito
Precisa de ajuda?
Sim! Basta criar sua conta gratuita no balta.io e começar seus estudos. Nós contamos com diversos cursos TOTALMENTE gratuitos e com certificado de conclusão.
Nós temos cursos gratuitos e pagos, porém você não precisa informar nenhum dado de pagamento
para começar seus estudos gratuitamente conosco. Os cursos gratuitos são completos e com
certificado de conclusão, você não paga nada por eles.
Porém, caso queira algo mais Premium,
você terá acesso à diversos benefícios que vão te ajudar ainda mais em sua carreira.
Siga SEMPRE as nossas Carreiras, elas vão te orientar em todos
os sentidos. Os cursos já estão organizados em categorias e carreiras para facilitar seu
aprendizado.
Nossa sugestão para aprendizado é começar pelo Backend e seguindo para Frontend e Mobile.
Nenhum curso no mundo vai te ensinar tudo, desculpa ser sincero! Os cursos são uma base, eles fornecem por volta de 30% do que você precisa aprender, o resto é com você, com dedicação e MUITA prática.
Java ou .NET? Angular ou React? Xamarin ou Flutter? A resposta é simples e direta: "Você já sabe
o básico?"
Se você ainda não sabe BEM o básico, ou seja, os fundamentos, OOP, SOLID, Clean Code, está
perdendo tempo estudando Frameworks ou até coisas mais avançadas como Docker. Foque nos seus
objetivos primeiro.
Agora se você está indeciso sobre qual Framework estudar, a boa notícia é que o mercado neste
momento está bem aquecido e você tem várias oportunidade. Desta forma o que levaríamos em conta
para tomar esta decisão seria:
Com certeza! O primeiro passo é começar e você pode fazer isto agora mesmo!
Começar de
graça
Receba em primeira mão todas as nossas novidades.