INSTITUTO DE EDUCACIÓN SUPERIOR “JOBS CAPACITY”
SESIÓN 9
ROUTING EN ANGULAR
Routing en Angular V 9-1
En una aplicación de una sola página, usted cambia lo que ve el usuario mostrando u ocultando
partes de la pantalla que corresponden a componentes particulares, en lugar de ir al servidor para
obtener una nueva página. A medida que los usuarios realizan tareas de aplicación, deben moverse
entre las diferentes vistas que haya definido.
Para manejar la navegación de una vista a la siguiente, utilizamos el concepto de Routing. Permite
la navegación interpretando la URL del navegador como una instrucción para cambiar la vista.
En el siguiente ejemplo podemos apreciar como en primera instancia se muestra un Login y este
se puede observar por la url, luego de iniciar sesión accederemos a nuestro inbox pero no será
necesario invocar a otra página si no lo que haremos es cargar el módulo sobre la misma.
Vamos a abrir nuestro proyecto Personas y generaremos un nuevo módulo con el nombre app-
routing:
ng g module app-routing
Una vez creado moveremos la clase '[Link]' a la carpeta app, seguidamente
eliminaremos la carpeta del módulo generado.
1
Jobs Capacity – Juntos hacia tu éxito
INSTITUTO DE EDUCACIÓN SUPERIOR “JOBS CAPACITY”
Abrir el archivo [Link] y agregar este módulo a la sección de imports.
Probamos nuestro servidor: npm start para corroborar que no haya ningún error.
Reorganización de Componentes V 9-2
Vamos a generar un nuevo componente llamado personas (plural): ng g c personas.
Una vez generado vamos a agregar al componente personas los subcomponentes formulario y
persona. En el caso de que nos pregunten si deseamos actualizar las referencias de importación
indicamos que sí.
2
Jobs Capacity – Juntos hacia tu éxito
INSTITUTO DE EDUCACIÓN SUPERIOR “JOBS CAPACITY”
Vamos a abrir nuestro archivo [Link] y vamos a mover el listado de personas y el
formulario al archivo [Link].
Podemos observar que tenemos un error sobre el objeto personas, lo que haremos es mover el
arreglo, el constructor y el método ngOnInit sobre el archivo [Link].
3
Jobs Capacity – Juntos hacia tu éxito
INSTITUTO DE EDUCACIÓN SUPERIOR “JOBS CAPACITY”
RoutingModule y routing-outlet V 9-3
Vamos a agregar algunas rutas sobre nuestro archivo [Link]
[Link]
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { PersonasComponent } from './personas/[Link]';
import { FormularioComponent } from './personas/formulario/[Link]';
const routes: Routes = [
{path: '', component: PersonasComponent}, //URL por defecto inicia componente Personas
{path: 'personas', component: PersonasComponent}, //URL con personas de la misma forma
{path: 'personas/agregar', component: FormularioComponent}, //URL agregar inicia el formulario
{path: 'personas/:id', component: FormularioComponent}, //URL con parámetro
]
@NgModule({
imports: [[Link](
routes
)
]
})
export class AppRoutingModule { }
[Link]
<div class="box" id="heading">
<h1>{{ titulo }}</h1>
</div>
<router-outlet></router-outlet>
Navegación con el objeto Router y Agregar Persona V 9-4
Vamos a ver a continuación como redirigir hacia otro componente de manera programática. Vamos
a aperturar [Link] y agregaremos un botón.
4
Jobs Capacity – Juntos hacia tu éxito
INSTITUTO DE EDUCACIÓN SUPERIOR “JOBS CAPACITY”
En [Link] vamos a agregar el método agregar().
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Persona } from '../[Link]';
import { PersonasService } from '../[Link]';
@Component({
selector: 'app-personas',
templateUrl: './[Link]',
styleUrls: ['./[Link]']
})
export class PersonasComponent implements OnInit {
personas: Persona[] = [];
constructor(private personasService: PersonasService,
private router: Router){
}
ngOnInit(): void {
[Link] = [Link];
}
agregar(){
[Link](['personas/agregar']);
}
}
[Link]
<div class="box">
<form class="item" #f="ngForm" (ngSubmit)="[Link] && guardarPersona()">
<input
type="text"
name="nombre"
id="nombre"
placeholder="Nombre"
[(ngModel)]="nombreInput"
required />
<input
type="text"
name="apellido"
id="apellido"
placeholder="Apellido"
[(ngModel)]="apellidoInput"
required />
<button type="submit" style="cursor: pointer">+</button>
</form>
</div>
5
Jobs Capacity – Juntos hacia tu éxito
INSTITUTO DE EDUCACIÓN SUPERIOR “JOBS CAPACITY”
[Link]
import { Component, ElementRef, EventEmitter, Output, ViewChild } from
'@angular/core';
import { Router } from '@angular/router';
import { Persona } from '../../[Link]';
import { PersonasService } from '../../[Link]';
@Component({
selector: 'app-formulario',
templateUrl: './[Link]',
styleUrls: ['./[Link]']
})
export class FormularioComponent {
nombreInput:string;
apellidoInput:string;
constructor(private personaService:PersonasService,
private router: Router){}
guardarPersona(){
let persona1 = new Persona([Link], [Link]);
[Link](persona1);
[Link](['personas']);
}
}
Paso de Parámetros y Modificar Persona V 9-5
Vamos a realizar el proceso de edición de valores de nuestra lista, para ello generaremos un enlace
sobre cada item el cual nos llevará a al formulario para realizar su edición.
[Link]
<div class="item">
<ul>
<li>
<a [routerLink]="['/personas', indice]">
{{ [Link] }} {{ [Link] }}
</a>
</li>
</ul>
</div>
Utilizamos la propiedad routerLink para dirigirnos al componente personas, y como segundo
parámetro se envía el índice de dicho elemento.
Vamos a agregar parámetros al formulario para que condicione si recibe un índice entonces que
cargue método editar caso contrario el método agregar.
6
Jobs Capacity – Juntos hacia tu éxito
INSTITUTO DE EDUCACIÓN SUPERIOR “JOBS CAPACITY”
[Link]
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { Persona } from '../../[Link]';
import { PersonasService } from '../../[Link]';
@Component({
selector: 'app-formulario',
templateUrl: './[Link]',
styleUrls: ['./[Link]']
})
export class FormularioComponent implements OnInit {
nombreInput:string;
apellidoInput:string;
index: number;
constructor(private personaService:PersonasService,
private router: Router,
private route: ActivatedRoute){}
ngOnInit(): void {
[Link] = [Link]['id'];
if([Link]){
let persona:Persona = [Link]([Link]);
[Link] = [Link];
[Link] = [Link];
}
}
guardarPersona(){
let persona1 = new Persona([Link], [Link]);
if([Link]){
[Link]([Link], persona1);
}else{
[Link](persona1);
}
[Link](['personas']);
}
}
Vamos a nuestro servicio persona y en este agregaremos métodos para agregar, encontrar y
modificar Persona.
[Link]
import { EventEmitter, Injectable } from '@angular/core';
import { LoggingService } from './[Link]';
import { Persona } from './[Link]';
@Injectable()
export class PersonasService {
7
Jobs Capacity – Juntos hacia tu éxito
INSTITUTO DE EDUCACIÓN SUPERIOR “JOBS CAPACITY”
personas: Persona[] = [
new Persona('Juan', 'Perez'),
new Persona('Laura', 'Juarez'),
];
saludar = new EventEmitter<number>();
constructor(private loggingService:LoggingService){}
agregarPersona(persona: Persona) {
[Link]('agregamos persona:' +
[Link])
[Link](persona);
}
encontrarPersona(index: number){
let persona: Persona = [Link][index];
return persona;
}
modificarPersona(index:number, persona: Persona){
let persona1 = [Link][index];
[Link] = [Link];
[Link] = [Link];
}
}
Eliminar una Persona V 9-6
Vamos a implementar nuestro proyecto para que cuando se seleccione una persona este no solo
nos permita editar si no también eliminar.
En nuestro [Link] vamos a agregar otro botón para que este elimine
condicionando si el índice es diferente a null:
<button *ngIf="index != null type="submit" style="cursor: pointer"
class="buttonRed" (click)="eliminarPersona()">-</button>
En nuestro [Link] es donde agregaremos el método eliminarPersona() después
del método guardarPersona().
eliminarPersona(){
if([Link] != null){
[Link]([Link]);
}
[Link](["personas"]);
}
8
Jobs Capacity – Juntos hacia tu éxito
INSTITUTO DE EDUCACIÓN SUPERIOR “JOBS CAPACITY”
Aperturemos [Link] para agregar el método eliminarPersona y con el método splice
eliminaremos el índice indicado:
eliminarPersona(index:number){
[Link](index,1);
}
Query Params en Angular V 9-7
Los parámetros de consulta en Angular permiten pasar parámetros opcionales a través de
cualquier ruta en la aplicación. Los parámetros de consulta son diferentes de los parámetros de
ruta normales, que sólo están disponibles en una ruta y no son opcionales (por ejemplo,
/product/:id).
Vamos a situarnos en [Link] y vamos a agregar un parámetro:
<div class="item">
<ul>
<li>
<a [routerLink]="['/personas', indice]"
[queryParams]="{modoEdicion:'1'}"
>
{{ [Link] }} {{ [Link] }}
</a>
</li>
</ul>
</div>
[Link]
import { Component, ElementRef, EventEmitter, OnInit, Output, ViewChild } from
'@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { LoggingService } from '../../[Link]';
import { Persona } from '../../[Link]';
import { PersonasService } from '../../[Link]';
@Component({
selector: 'app-formulario',
templateUrl: './[Link]',
styleUrls: ['./[Link]']
})
export class FormularioComponent implements OnInit {
nombreInput:string;
apellidoInput:string;
index: number;
modoEdicion:number;
9
Jobs Capacity – Juntos hacia tu éxito
INSTITUTO DE EDUCACIÓN SUPERIOR “JOBS CAPACITY”
constructor(private personaService:PersonasService,
private router: Router,
private route: ActivatedRoute){}
ngOnInit(): void {
[Link] = [Link]['id'];
[Link] = +[Link]['modoEdicion'];
if([Link] != null && [Link] === 1){
let persona:Persona = [Link]([Link]);
[Link] = [Link];
[Link] = [Link];
}
}
guardarPersona(){
let persona1 = new Persona([Link], [Link]);
if([Link] != null && [Link] === 1){
[Link]([Link], persona1);
}else{
[Link](persona1);
}
[Link](['personas']);
}
eliminarPersona(){
if([Link] != null){
[Link]([Link]);
}
[Link](["personas"]);
}
}
Con ello estamos aplicando el concepto de Query Params.
Child Route en Angular V 9-8
Es importante comprender que Angular como marco está basado en componentes, lo que significa
que su aplicación se divide en componentes si la estructura se dibuja en un formato de árbol con
subcomponentes que surgen de otros componentes.
Un buen ejemplo es cómo otros componentes de una aplicación Angular se encuentran
principalmente dentro del componente principal de la aplicación. De la misma manera, Angular
Router te permite tener rutas anidadas dentro de rutas ya definidas.
Vamos a abrir el archivo [Link] y modificar nuestro routes para que no se utilice
una ruta repetida.
10
Jobs Capacity – Juntos hacia tu éxito
INSTITUTO DE EDUCACIÓN SUPERIOR “JOBS CAPACITY”
const routes: Routes = [
{path: '', component: PersonasComponent},
{path: 'personas', component: PersonasComponent, children: [
{path: 'agregar', component: FormularioComponent},
{path: ':id', component: FormularioComponent}
]}
]
La definición children indica que se pueden tener rutas dentro de un componente principal.
Vamos a abrir [Link] y vamos a modificar la etiqueta de salida por:
<router-outlet></router-outlet>
Componente de Error en Angular V 9-9
Vamos a ver el manejo de un componente cuando no encontramos una ruta especificada.
Lo primero que haremos es generar un nuevo componente con el nombre error
ng g c error
en nuestro HTML modificaremos lo siguiente:
[Link]
<div class="box">
<p>
No se encuentra el recurso solicitado
</p>
</div>
Y agregar a [Link] otra variable path al final con doble asterisco para que sea
considerado como cualquier ruta.
const routes: Routes = [
{path: '', component: PersonasComponent},
{path: 'personas', component: PersonasComponent, children: [
{path: 'agregar', component: FormularioComponent},
{path: ':id', component: FormularioComponent}
]},
{path: '**', component: ErrorComponent},
]
Podemos probar nuestro servidor y comprobar con una URL alterna como, por ejemplo
[Link]
Notaremos que se ejecuta el contenido del módulo error.
11
Jobs Capacity – Juntos hacia tu éxito