Aula17 - Angular Routing

Esta é uma pré-visualização de arquivo. Entre para ver o arquivo original

Aula17 - Angular Routing.pdf
 
Programação de Scripts – Prof. Arley 
Aula 17 – Angular Routing 
 
 1 
Objetivo: 
• Navegação entre componentes usando URL; 
• Definição de rotas; 
• Passar parâmetros entre os componentes; 
• Setar a marcação <title> da página. 
 
Descrição: O objetivo dessa aula é apresentar o uso do Angular Rounting para fazer a navegação entre componentes. A 
aplicação é formada por 4 componentes (componentes A, B, C e Page-not-found). A figura a seguir mostra o componente B. 
Para acessar os componentes A, B e C basta clicar nos itens da barra de menu ou nos links. Para ser endereçado para o 
componente Page-not-found basta fornecer uma URL desconhecida. 
 
 
Em anexo encontra-se os arquivos para reproduzir o exemplo, porém, antes siga os passos para criar o projeto da 
aplicação: 
1) Para reproduzir o exemplo crie um projeto Angular, usando o comando Angular CLI: 
ng new exemplo9 --minimal=true --style=css --routing=false 
O parâmetro --routing=true é usado para criar um módulo de roteamento. O objetivo dessa aula é mostrar o uso 
do Angular Routing (https://angular.io/guide/route), porém deixaremos para criar esse módulo no Passo 3. 
 
2) Utilize os comandos a seguir para criar os componentes, lembre-se que é necessário estar dentro da pasta do projeto 
exemplo9: 
ng generate component a 
ng generate component b 
ng generate component c 
ng generate component page-not-found 
 
3) Utilize o comando a seguir para criar o módulo de roteamento. Observe que se tivéssemos utilizado --routing=true 
na criação da aplicação (Passo 1), daí não precisaríamos criar o módulo de roteamento aqui. 
ng generate module rota --routing 
 
Programação de Scripts – Prof. Arley 
Aula 17 – Angular Routing 
 
 2 
O comando anterior cria os arquivos rota.module.ts e rota-routing.module.ts. O parâmetro --routing é 
opcional, ele é usado para criar o arquivo rota-routing.module.ts. É nesse arquivo que definimos um array com 
as rotas, assim como é mostrado a seguir: 
export const rotas: Routes = [ 
 {path: 'aaa/:nome/:idade', component: AComponent, data: {titulo:'Comp. A'}}, 
 {path: 'bbb', component: BComponent, data: {titulo:'Comp. B'}}, 
 {path: 'ccc', component: CComponent, data:{titulo: 'Comp. C'}}, 
 {path: 'ccc/:nome/:idade', component: CComponent, data:{titulo:'Comp. C'}}, 
 {path: '', redirectTo: '/ccc', pathMatch: 'full' }, 
 {path: '**', component: PageNotFoundComponent, data: { titulo: 'URL incorreta'} } 
]; 
Esse array pode estar nos arquivos rota-routing.module.ts ou app.module.ts. Neste exemplo, deixaremos 
ele no arquivo rota-routing.module.ts. 
 
4) Para formatar a parte visual usaremos classes do framework Bootstrap 4, então use o comando a seguir para instalar o 
Bootstrap 4 e suas dependências, assim como a biblioteca jQuery. Lembre-se que é necessário estar dentro da pasta do 
projeto exemplo9: 
npm install jquery 
npm install bootstrap 
Para fazer uso das classes Bootstrap na sua aplicação será necessário adicionar a seguinte instrução no arquivo 
exemplo9/styles.css: 
@import '~bootstrap/dist/css/bootstrap.min.css'; 
 
Copie os arquivos em anexo para o projeto da aplicação. A seguir tem-se a explicação de alguns pontos 
importantes. 
 
Definição das Rotas 
O Angular Router permite criar uma URL para uma view (componente), desta forma, é possível navegar de uma view para 
outra como se fossem páginas, mas na prática os componentes são ligados/endereçados usando a diretiva RouterLink e 
são renderizados dentro das marcações <router-outlet></router-outlet>. 
 <div class="container-fluid"> 
 <nav class="navbar navbar-expand navbar-light bg-light"> 
 <ul class="navbar-nav"> 
 <li class="nav-item pl-2 pr-2 border-right"> 
 <a routerLink="/aaa/Ana/21" routerLinkActive="ativo">A</a> 
 </li> 
 <li class="nav-item pl-2 pr-2 border-right"> 
 <a routerLink="/bbb" routerLinkActive="ativo">B</a> 
 </li> 
 <li class="nav-item pl-2 pr-2"> 
 <a routerLink="/ccc" routerLinkActive="ativo">C</a> 
 </li> 
 <li class="nav-item pl-2 pr-2"> 
 
Programação de Scripts – Prof. Arley 
Aula 17 – Angular Routing 
 
 3 
 <a routerLink="/teste" routerLinkActive="ativo">Page not found</a> 
 </li> 
 <li class="nav-item pl-2 pr-2"> 
 <a routerLink="/" >Default</a> 
 </li> 
 </ul> 
 </nav> 
 </div> 
 <div class="container-fluid"> 
 <!-- a diretiva RouterOutlet é usada para receber os componentes mapeados --> 
 <router-outlet></router-outlet> 
 </div> 
 
O atributo routerLinkActive é usado para indicar a classe CSS que irá receber o link em exibição. A classe ativo foi 
definida no arquivo exemplo9/styles.css. 
.ativo {color:red !important} 
 
Nas marcações HTML ficam as ligações, porém rotas (objeto do tipo Routes) precisam ser definidas no arquivo 
app.module.ts ou rota-routing.module.ts da seguinte forma: 
export const rotas: Routes = [ 
 {path: 'aaa/:nome/:idade', component: AComponent, data: {titulo:'Comp. A'}}, 
 {path: 'bbb', component: BComponent, data: {titulo:'Comp. B'}}, 
 {path: 'ccc', component: CComponent, data:{titulo: 'Comp. C'}}, 
 {path: 'ccc/:nome/:idade', component: CComponent, data:{titulo:'Comp. C'}}, 
 {path: '', redirectTo: '/ccc', pathMatch: 'full'}, 
 {path: '**', component: PageNotFoundComponent, data: { titulo: 'URL incorreta'}} 
]; 
Neste exemplo colocamos a definição no arquivo rota-routing.module.ts. Veja que as rotas são definidas num array 
JSON, com as seguintes propriedades: 
• path define a URL de acesso a view. No path podemos definir os parâmetros a serem passados para o componente 
na URL, no exemplo a seguir a URL é formada obrigatoriamente por 2 parâmetros 
path: 'aaa/:nome/:idade' 
Desta forma a view AComponent só poderá ser endereçada da seguinte forma: 
http://localhost:4200/aaa/Mariana/20 
Isto é, os exemplos a seguir serão direcionados para a página não encontrada (erro 404 not found): 
http://localhost:4200/aaa 
http://localhost:4200/aaa/Mariana 
• component define a view a ser mapeada pelo path; 
• data é um objeto JSON com propriedades que podemos passar para a view de destino: 
{path:'aaa/:nome/:idade', component: AComponent, data: {titulo:'Comp. A'}} 
A instrução a seguir se encontra no método ngOnInit da classe AComponent, nela estamos lendo a propriedade 
titulo: 
let titulo = this.route.snapshot.data['titulo']; 
 
Programação de Scripts – Prof. Arley 
Aula 17 – Angular Routing 
 
 4 
• redirectTo usada para redirecionar para outra URL caso o path seja satisfeito: 
{path:'', redirectTo:'/ccc', pathMatch:'full'} 
Nesse exemplo, a URL a seguir será redirecionada para http://localhost:4200/ccc: 
http://localhost:4200/ 
Já se utilizássemos o seguinte path: 
{path:'aaa/:nome', redirectTo:'/bbb',pathMatch: 'full'} 
A URL http://localhost:4200/aaa/Mariana seria redirecionada para http://localhost:4200/bbb 
A propriedade redirectTo requer o uso da propriedade pathMatch 
(https://angular.io/api/router/Route#pathMatch) para dizer se o critério de interpretação do path será full ou 
prefix. 
• path:'**' quando a URL não é satisfeita: 
{path:'**', component:PageNotFoundComponent, data:{titulo:'URL incorreta'}} 
Como exemplo, a URL http://localhost:4200/ddd será redirecionada
para a view 
PageNotFoundComponent. 
É muito importante a ordem das URLs (path) no array, pois se o 1º elemento do array for path:'**', então 
qualquer URL irá casar com **. 
 
Receber Parâmetros na Classe do Componente 
Os parâmetros são passados para a classe no construtor através do objeto do tipo ActivatedRoute: 
constructor( 
 private route:ActivatedRoute, 
 private router:Router, 
 private title:Title 
) { } 
Os parâmetros podem ser acessados através do objeto paramMap: 
this.route.snapshot.paramMap.get('nome') 
Para navegar de uma view para outra através da classe usa-se o método navigate do objeto Router: 
this.router.navigate(['/ccc/',this.nome, this.idade]); 
 
Para o array rotas ser reconhecido em toda a aplicação é necessário importar ele no decorator @NgModule da classe 
AppModule usando RouterModule.forRoot(rotas). 
 
 
src/app/app.component.ts
import { Component } from '@angular/core';
@Component({
 selector: 'app-root',
 template: `
 <div class="container-fluid">
 <nav class="navbar navbar-expand navbar-light bg-light">
 <ul class="navbar-nav">
 <li class="nav-item pl-2 pr-2 border-right">
 <a routerLink="/aaa/Ana/21" routerLinkActive="ativo">A</a>
 </li>
 <li class="nav-item pl-2 pr-2 border-right">
 <a routerLink="/bbb" routerLinkActive="ativo">B</a>
 </li>
 <li class="nav-item pl-2 pr-2">
 <a routerLink="/ccc" routerLinkActive="ativo">C</a>
 </li>
 <li class="nav-item pl-2 pr-2">
 <a routerLink="/teste" routerLinkActive="ativo">Page not found</a>
 </li> 
 <li class="nav-item pl-2 pr-2">
 <a routerLink="/" >Default</a>
 </li> 
 </ul>
 </nav>
 </div>
 <div class="container-fluid">
 <!-- A diretiva RouterOutlet é usada para receber os componentes mapeados -->
 <router-outlet></router-outlet>
 </div>
 `,
 styles: []
})
export class AppComponent {
 title = 'exemplo9';
}
src/app/app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { AComponent } from './a/a.component';
import { BComponent } from './b/b.component';
import { CComponent } from './c/c.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
import { rotas } from './rota/rota-routing.module';
@NgModule({
 declarations: [
 AppComponent,
 AComponent,
 BComponent,
 CComponent,
 PageNotFoundComponent
 ],
 imports: [
 BrowserModule,
 FormsModule,
 /* é necessário registrar as rotas usando RouterModule.forRoot()
 Ao usar forRoot o serviço Router estará disponível em toda a aplicação */
 RouterModule.forRoot(rotas) 
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }
src/app/a/a.component.css
src/app/a/a.component.html
Componente A
Nome: {{nome}}
Idade: {{idade}}
 Ir para C
src/app/a/a.component.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { Title } from '@angular/platform-browser';
@Component({
 selector: 'app-a',
 templateUrl: './a.component.html',
 styleUrls: ['./a.component.css']
})
export class AComponent implements OnInit {
 nome: string;
 idade: number;
 /* o construtor precisa recebe os seguintes objetos */
 constructor(
 private route:ActivatedRoute, 
 private router:Router, 
 private title:Title) { }
 ngOnInit() {
 /* ler o conteúdo da propriedade data */
 let titulo = this.route.snapshot.data['titulo'];
 this.title.setTitle(titulo); /* setar o <title> da janela */
 /* receber os parâmetros da URL */
 this.nome = this.route.snapshot.paramMap.get('nome');
 this.idade = +this.route.snapshot.paramMap.get('idade');
 }
 goto():void{
 this.router.navigate(['/ccc/',this.nome, this.idade]);
 }
}
src/app/b/b.component.css
src/app/b/b.component.html
 Nome: 
 Idade: 
 Link para a view A:
 ./aaa/{{nome}}/{{idade}} 
 Link para a view C:
 ./ccc/{{nome}}/{{idade}} 
src/app/b/b.component.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Title } from '@angular/platform-browser';
@Component({
 selector: 'app-b',
 templateUrl: './b.component.html',
 styleUrls: ['./b.component.css']
})
export class BComponent implements OnInit {
 nome: string;
 idade: number;
 constructor(
 private route: ActivatedRoute, 
 private title:Title) { }
 ngOnInit() {
 let titulo = this.route.snapshot.data['titulo'];
 this.title.setTitle(titulo);
 }
}
src/app/c/c.component.css
src/app/c/c.component.html
Componente C
Nome: {{nome}}
Idade: {{idade}}
 Voltar
src/app/c/c.component.ts
import { Component, OnInit } from '@angular/core';
import { Title } from '@angular/platform-browser';
import { Location } from '@angular/common';
import { ActivatedRoute } from '@angular/router';
@Component({
 selector: 'app-c',
 templateUrl: './c.component.html',
 styleUrls: ['./c.component.css']
})
export class CComponent implements OnInit {
 nome:string;
 idade:number;
 constructor(
 private route: ActivatedRoute, 
 private title:Title, 
 private location: Location) { }
 ngOnInit() {
 let titulo = this.route.snapshot.data['titulo'];
 this.title.setTitle(titulo);
 this.route.params.subscribe( parametros => (
 this.nome = (parametros['nome'] != undefined? parametros['nome'] : ''),
 this.idade = (parametros['idade'] != undefined? +parametros['idade'] : undefined)
 )
 );
 }
 paginaAnterior():void{
 this.location.back();
 }
}
src/app/page-not-found/page-not-found.component.css
src/app/page-not-found/page-not-found.component.html
 page-not-found
src/app/page-not-found/page-not-found.component.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Title } from '@angular/platform-browser';
@Component({
 selector: 'app-page-not-found',
 templateUrl: './page-not-found.component.html',
 styleUrls: ['./page-not-found.component.css']
})
export class PageNotFoundComponent implements OnInit {
 constructor(
 private route:ActivatedRoute,
 private title:Title) { }
 ngOnInit() {
 /* ler o conteúdo da propriedade data */
 let titulo = this.route.snapshot.data['titulo'];
 this.title.setTitle(titulo); /* setar o <title> da janela */
 }
}
src/app/rota/rota-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AComponent } from '../a/a.component';
import { BComponent } from '../b/b.component';
import { CComponent } from '../c/c.component';
import { PageNotFoundComponent } from '../page-not-found/page-not-found.component';
export const rotas: Routes = [
 {path: 'aaa/:nome/:idade', component: AComponent, data: { titulo: 'Comp. A'}},
 {path: 'bbb', component: BComponent, data: { titulo: 'Comp. B'}},
 /* se não fizer essa especificação, daí será mapeado para PageNotFoundComponent */
 {path: 'ccc', component: CComponent, data: { titulo: 'Comp. C'}},
 {path: 'ccc/:nome/:idade', component: CComponent, data: { titulo: 'Comp. C'}},
 /* quando a URL termina na porta http://localhost:4200/ ela será direcionada para */
 {path: '', redirectTo: '/ccc', pathMatch: 'full' },
 /* quando a URL não existir será direcionado para esse componente, por exemplo,
 * ao
clicar no Link inexistente - http://localhost:4200/teste */
 {path: '**', component: PageNotFoundComponent, data: { titulo: 'URL incorreta'} }
];
@NgModule({
 imports: [RouterModule.forChild(rotas)],
 exports: [RouterModule]
})
export class RotaRoutingModule { }
src/app/rota/rota.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RotaRoutingModule } from './rota-routing.module';
@NgModule({
 declarations: [],
 imports: [
 CommonModule,
 RotaRoutingModule
 ]
})
export class RotaModule { }
src/styles.css
/* You can add global styles to this file, and also import other style files */
@import '~bootstrap/dist/css/bootstrap.min.css';
.ativo {color:red !important}