Dominando o roteamento angular: um guia abrangente

Em um mundo acelerado, é vital oferecer uma experiência de usuário envolvente e responsiva. Angular é uma estrutura de front-end amplamente utilizada, desenvolvida e mantida pelo Google. Ao longo dos anos, o Angular ganhou popularidade desde o seu início devido a um vasto conjunto de recursos e ao robusto suporte da comunidade. O roteamento é um aspecto crucial dos aplicativos da web modernos que auxilia nas interfaces de usuário dinâmicas.

De acordo com Pesquisa sobre o estado do JS 2022, a estrutura Angular do Google teve 48,8% de uso como a segunda estrutura da web mais popular. Angular oferece recursos de roteamento poderosos que facilitam a criação de caminhos de navegação complexos e o gerenciamento de conteúdo dinâmico.

Sem mais delongas, vamos nos aprofundar no roteador Angular!

Noções básicas de roteamento angular

Roteamento refere-se à navegação entre diferentes páginas ou visualizações em um aplicativo de página única, um recurso crítico dos serviços de desenvolvimento Angular. Em um SPA, o conteúdo da aplicação é carregado dinamicamente sem a necessidade de atualizar a página. Angular, como parte de seus serviços de desenvolvimento, usa o roteador integrado para lidar com o roteamento em seus aplicativos. O roteador Angular mapeia URLs para componentes. Sempre que um usuário clica em um link, o roteador retorna a rota padrão mapeada para a URL e renderiza o componente de aplicativo apropriado.

A configuração da rota geralmente é definida no arquivo app-routing.module.ts. Cada rota possui um caminho que mapeia para um componente. Por exemplo, uma rota para uma página de painel teria o caminho /dashboard e seria mapeada para DashboardComponent.

O roteador Angular combina o caminho da URL com as rotas definidas e carrega o componente associado na saída do roteador. A saída do roteador atua como um espaço reservado onde o conteúdo do componente atualmente selecionado é exibido.

O roteamento angular consiste em vários componentes principais que trabalham juntos para permitir a navegação dentro do aplicativo. Esses componentes incluem:

Módulo de roteamento

Os desenvolvedores podem modularizar a configuração de roteamento em um aplicativo usando o Routing Module. Para criar um módulo roteador você pode usar o Angular CLI para gerar um novo módulo com o sinalizador de roteamento.

O comando a seguir é usado para gerar o novo módulo.

ng generate module app-routing --routing

Depois de criar o Módulo de Roteamento, você precisa importá-lo para o módulo do aplicativo. Em seguida, você terá que definir as rotas para o aplicativo criando um array de rotas. Cada objeto Route na matriz de rotas define um caminho e um componente para renderizar.

Uma vez definidas as rotas, você terá que configurá-las chamando o método forRoot do RouterModule. Ele retorna um RouterModule configurado, que deve ser importado para o módulo do aplicativo.

Configurando Roteamento Angular

Vejamos a implementação de um roteador Angular em um aplicativo do mundo real. Imagine que você está construindo um site para um restaurante que possui várias páginas. Possui uma página inicial, uma página de menu e uma página de contato. Você deseja utilizar um roteador Angular para exibir componentes angulares apropriados. Ao fazer isso, os usuários podem navegar facilmente entre as páginas.

Pré-requisitos

Para implementar o roteamento em Angular com sucesso, você deve ter o seguinte:

• Node.js: A última versão do Node.js na sua máquina
• Um editor de código: Qualquer IDE que suporte Angular
• npm: Node Package Manager para instalar as dependências necessárias
• CLI angular: A versão mais recente que fornece núcleo Angular

Crie um novo projeto

Crie um novo projeto Angular usando o Angular CLI executando o comando em seu terminal.

ng new restaurant-website

Agora você pode ver um arquivo package.json no diretório do seu projeto, semelhante ao abaixo:

Observe que as versões das dependências são especificadas no arquivo acima. Estas eram as versões no momento da criação deste guia.

Implementando Módulo de Roteamento

No arquivo src app app.module.ts e importe os módulos RouterModule e Routes para implementar o roteamento do aplicativo.

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

Agora adicione RouterModule ao array imports no decorador @NgModule.

@NgModule({
imports: (
RouterModule.forRoot(routes)
),
...
})

Crie um novo arquivo chamado app-routing.module.ts na pasta src app e adicione o seguinte código para configuração de rota.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';import { HomeComponent } from './home/home.component';
import { MenuComponent } from './menu/menu.component';
import { ContactComponent } from './contact/contact.component';
export const routes: Routes = (
{ path: '', component: HomeComponent },
{ path: 'menu', component: MenuComponent },
{ path: 'contact', component: ContactComponent }
);

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

Crie três novos componentes para a página inicial, página de menu e página de contato. Execute os seguintes comandos:

ng generate component home

ng generate component menu

ng generate component contact

No arquivo app.component.html, adicione o componente RouterOutlet para exibir o conteúdo da rota atual.

<router-outlet></router-outlet>

Abra o arquivo home.component.html, adicione a diretiva RouterLink para criar um link para a página do menu. Esta seria a primeira rota quando o aplicativo fosse carregado.

<h2>Abc Restaurant</h2>
<p>Welcome to our restaurant!
We specialize in delicious food and great service.<br />
Come visit us for a meal you won't forget.</p><br />
<a routerLink="/menu">View Our Menu</a>

No arquivo menu.component.html, adicione a diretiva RouterLink para criar um link para a página de contato.

<h2>Abc Restaurant - Menu</h2>
<p>Here is our menu!</p>
<ul>
<li>Appetizers:
<ul>
<li>Chicken Wings</li>
<li>Mozzarella Sticks</li>
</ul>
</li>
<li>Entrees:
<ul>
<li>Grilled Salmon</li>
<li>Steak and Fries</li>
</ul>
</li>
<li>Desserts:
<ul>
<li>Chocolate Cake</li>
<li>Apple Pie</li>
</ul>
</li>
</ul><br /><a routerLink="/contact">Contact Us</a>

No arquivo contact.component.html, adicione a diretiva RouterLink para criar um link para voltar à página inicial.

<h2>Abc Restaurant - Contact</h2>
<p>Address: 123 Main Street<br />
Phone: 555-1234<br />
Email: (email protected)<br />
Hours of operation: Monday-Saturday, 11am-10pm</p><br />
<a routerLink=" to Home</a>

Inicie o aplicativo usando o seguinte comando ng serve –open e navegue entre as páginas inicial, menu e contato usando os links criados com RouterLink.

Esta é a aparência do aplicativo no navegador:

Pagina inicial

Página do menu

Página de contato

Se você olhar a barra de endereço do navegador, verá que cada página possui um segmento de caminho de URL diferente.

Conceitos avançados de roteamento angular

Vejamos alguns conceitos avançados de roteamento em Angular.

1. Rotas aninhadas (rotas secundárias)

O roteamento aninhado permite que os desenvolvedores definam uma rota dentro de uma rota. O objetivo principal disso é criar uma estrutura de navegação hierárquica que mostre adequadamente a hierarquia de vários componentes dentro do aplicativo. Isso facilita a navegação e torna a configuração do roteador mais modular.

Para configurar rotas filhas ao criar rotas, os desenvolvedores precisam primeiro definir uma rota pai. Esta rota pai contém então as rotas filhas. Eles são aninhados na rota pai usando a propriedade filhos. Vejamos o exemplo abaixo para ver como isso é feito.

const routes: Routes = (
{
path: 'products',
component: ProductsComponent,
children: (
{ path: ':id', component: ProductDetailsComponent },
{ path: '', component: ProductListComponent }
)
}
);

2. Guardas de Rota

Os Route Guards permitem que os desenvolvedores controlem o acesso às rotas com base em determinadas condições. Ao estabelecer condições, é criada segurança adicional e acesso não autorizado em determinadas rotas.

Existem três tipos principais de guardas de rota:

1. canActivate: determina se uma rota pode ser ativada.
2. canDeactivate: determina se uma rota pode ser desativada.
3. canLoad: determina se uma rota pode ser carregada lentamente.

Vejamos o exemplo abaixo para ver como implementá-lo.

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router } from '@angular/router';
import { Observable } from 'rxjs';@Injectable({
providedIn: 'root'
})
export class AuthGuard implements CanActivate {
constructor(private router: Router) {}
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean   UrlTree>   Promise<boolean   UrlTree>   boolean   UrlTree {
const isLoggedIn = true; // Check if user is logged in
if (isLoggedIn) {
return true;
} else {
return this.router.parseUrl('/login');
}
}
}

3. Carregamento lento

O carregamento lento permite que os desenvolvedores carreguem módulos sob demanda, em vez de carregar todos eles de uma vez. Isso ajuda a diminuir o tempo de carregamento inicial do aplicativo e, portanto, carrega apenas os módulos necessários por vez.

Para implementar módulos de carregamento lento em angular, você precisará criar um módulo de recursos para cada recurso do aplicativo. Em seguida, as rotas serão configuradas com a propriedade loadChilden. Vejamos um exemplo.

const routes: Routes = (
{ path: '', component: HomeComponent },
{ path: 'customers', loadChildren:   => import('./customers/customers.module').then(m => m.CustomersModule) },
{ path: 'orders', loadChildren:   => import('./orders/orders.module').then(m => m.OrdersModule) },
{ path: '**', component: PageNotFoundComponent }
);

4. Parâmetros de rota

Os parâmetros de rota permitem que os desenvolvedores passem dados entre os componentes e as rotas. Isso permite a navegação dinâmica, fornecendo contexto ao componente usando o parâmetro.

Os parâmetros de rota são definidos usando a sintaxe : no caminho da rota e podem ser obrigatórios ou opcionais dependendo da necessidade. Por exemplo, /products/:id define uma rota com um parâmetro id obrigatório.

Os desenvolvedores podem usar ActivatedRoute para acessar um parâmetro de rota. Isto fornece acesso à rota atual e seus parâmetros. Os parâmetros de rota são armazenados na propriedade params do objeto ActivatedRoute.

Vejamos um exemplo.

const routes: Routes = (

{ path: 'products/:id', component: ProductDetailsComponent }
);// ProductDetailsComponent
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-product-details',
templateUrl: './product-details.component.html',
styleUrls: ('./product-details.component.css')
})
export class ProductDetailsComponent implements OnInit {
productId: string;

constructor(private route: ActivatedRoute) { }

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

No exemplo acima, o ProductDetailsComponent acessa o parâmetro id usando o serviço ActivatedRoute e assina as alterações usando os parâmetros observáveis.

Melhores práticas para roteamento angular

Aqui estão algumas práticas recomendadas que você deve seguir:

1. Organizando Rotas e Módulos

Você deve separar o módulo de roteamento para cada módulo de recurso para manter o código organizado e mais fácil de manter. Para melhorar o fluxo da aplicação você pode agrupar rotas relacionadas entre si. Você também deve implementar o carregamento lento para carregar módulos sob demanda. Isso aumentou o tempo de carregamento inicial do aplicativo. Além disso, é importante usar uma convenção de nomenclatura para suas rotas que as torne fáceis de entender e seguir. Isso ajuda a evitar confusão para você e outros desenvolvedores que possam estar trabalhando no projeto.

2. Tratamento de erros de rota e páginas 404

Você deve usar a rota curinga ** para capturar todas as rotas que não correspondem. Para tornar a experiência do usuário mais integrada, você também pode criar um componente personalizado para exibir uma página 404 quando uma rota não for encontrada e usar o método Router.navigate para redirecionar o usuário para a página 404 personalizada.

3. Melhorando o desempenho com pré-carregamento de rota

No pré-carregamento de rota você pode usar a estratégia PreloadAllModules. Esta estratégia pré-carrega todos os módulos em segundo plano. Outra estratégia que você pode usar é SelectivePreloadingStrategy. Ele apenas pré-carrega módulos específicos que provavelmente serão usados, reduzindo assim o tempo de carregamento inicial. Além disso, para evitar o pré-carregamento de módulos aos quais o usuário não tem acesso, você pode usar o protetor canLoad.

Seguindo as práticas recomendadas acima, você pode criar um aplicativo Angular organizado e otimizado.

Testando roteador angular

Teste de unidade Rotas angulares significa que você deve testar a configuração de roteamento e verificar se a rota está navegando corretamente. O Teste de Integração inclui o teste do comportamento dos componentes durante a navegação.

RouterTestingModule é usado para implementar testes de unidade. Vejamos um exemplo de implementação.

import { RouterTestingModule } from '@angular/router/testing';
import { TestBed } from '@angular/core/testing';
import { Router } from '@angular/router';
import { AppComponent } from './app.component';describe('AppComponent',   => {
let router: Router;
let fixture;
beforeEach(  => {
TestBed.configureTestingModule({
imports: (RouterTestingModule.withRoutes( )),
declarations: (AppComponent)
});

fixture = TestBed.createComponent(AppComponent);
router = TestBed.inject(Router);
});

it('should navigate to the home route',   => {
spyOn(router, 'navigateByUrl');

fixture.detectChanges ;

expect(router.navigateByUrl).toHaveBeenCalledWith("
});
});

Para testar a integração de suas rotas, você pode usar o Angular RouterTestingModule e o componente RouterOutlet para verificar se os componentes esperados são carregados ao navegar para uma rota específica. Vejamos a implementação.

import { RouterTestingModule } from '@angular/router/testing';
import { TestBed } from '@angular/core/testing';
import { Router } from '@angular/router';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { MenuComponent } from './menu/menu.component';
import { ContactComponent } from './contact/contact.component';describe('AppComponent',   => {
let router: Router;
let fixture;

beforeEach(  => {
TestBed.configureTestingModule({
imports: (
RouterTestingModule.withRoutes((
{ path: '', component: HomeComponent },
{ path: 'menu', component: MenuComponent },
{ path: 'contact', component: ContactComponent }
))
),
declarations: (
AppComponent,
HomeComponent,
MenuComponent,
ContactComponent
)
});

fixture = TestBed.createComponent(AppComponent);
router = TestBed.inject(Router);
});

it('should load the home component when navigating to the home route',   => {
fixture.detectChanges ;

router.navigate((''));

fixture.detectChanges ;

const compiled = fixture.debugElement.nativeElement;
expect(compiled.querySelector('app-home')).toBeTruthy ;
});

it('should load the menu component when navigating to the menu route',   => {
fixture.detectChanges ;

router.navigate(('/menu'));

fixture.detectChanges ;

const compiled = fixture.debugElement.nativeElement;
expect(compiled.querySelector('app-menu')).toBeTruthy ;
});

it('should load the contact component when navigating to the contact route',   => {
fixture.detectChanges ;

router.navigate(('/contact'));

fixture.detectChanges ;

const compiled = fixture.debugElement.nativeElement;
expect(compiled.querySelector('app-contact')).toBeTruthy ;
});
});

Conclusão

Dominar o roteamento Angular é uma habilidade essencial para qualquer desenvolvedor web Angular moderno, incluindo aqueles envolvidos no desenvolvimento de software Angular terceirizado. Como o roteamento do lado do cliente é a norma, é fundamental entender como criar roteamento dinâmico e eficiente em seus aplicativos. O roteamento Angular fornece um conjunto de ferramentas flexível e poderoso para todos os tipos de aplicativos e casos de uso, tornando-o particularmente benéfico para projetos terceirizados de desenvolvimento de software Angular.

Existem muitos recursos disponíveis para aprendizagem adicional, incluindo documentação oficial do Angular e tutoriais on-line. É importante contratar uma empresa que ofereça serviços de desenvolvimento Angular de alta qualidade para o seu projeto Angular. Antes de fazer isso, também é importante saber se React ou Vue é a melhor opção para o seu projeto, em vez de Angular, já que cada projeto tem necessidades diferentes.

Se você gostou deste artigo, confira:

• Estrutura angular do projeto: práticas recomendadas para arquivos e pastas
• Injeção de dependência em Angular: um guia abrangente
• Dominando a vinculação angular de dados: um guia abrangente para especialistas
• Principais bibliotecas e estruturas de componentes de UI Angular
• O que é Angular e por que sua empresa deve considerá-lo para desenvolvimento?
• Os melhores frameworks Javascript da atualidade
• Angular para negócios
• Qual é a melhor estrutura para desenvolvimento web?