Enrutamiento

href != routerLink

Como la aplicación es de una sola página, se deben modificar todos los enlaces de hipertexto. De hecho, en lugar de utilizar el comportamiento HTML clásico de una etiqueta <a href="">, usará la directiva Angular routerLink. Visualmente, el resultado es el mismo, pero la directiva cambia el DOM, mientras href recarga la página.

<a routerLink="/url"> </a> 

Cuando se hace clic en el enlace, Angular escanea la tabla en busca de rutas y navega hasta el componente responsable de la representación. Si href y routerLink están en competencia, la diferencia en el rendimiento es apreciable incluso a simple vista.

<!--C:\JavaScriptYAngular\Angular\miProyectoAngular\src\app\  
app.components. html -->  
<div style="text-align:center">  
    <img width="300" alt="Angular Logo"  
        src="data:image/ 
svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcv  
MjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9  
IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIz  
MGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMw  
MDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDmuNyAxNC4yLTEyMy4x  
TDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1...

app-routing.module.ts

El archivo app-routing.module.ts es una clase TypeScript exportada. Contiene una serie de rutas llamadas routes.

const rutas: Routes = [ ]; 

Una ruta es un objeto de JavaScript que contiene una URL y un componente.

{path : 'url', component : unComponente} 

Finalmente, un array de rutas es un array simple de objetos JavaScript.

ng generate component componentes/unComponente  
ng generate component componentes/otroComponente 

// C:\JavaScriptYAngular\Angular/src/app-routing.module.ts  
import { NgModule } from '@angular/core';   
import { Routes, RouterModule } from '@angular/router';  
  
import { UnComponenteComponent } from '../app/componentes/ 
un-componente/un-componente.component';  
import { OtroComponente } from '../app/componentes/
otro-componente/otro-componente.component';  
  
  
  
const rutas: Routes = [  
 {path: 'abc', component: UnComponente},  
 {path: 'xyz', component: OtroComponente},  
];  
  
  
@NgModule({  
 imports: [RouterModule.forRoot(rutas)],  
 exports: [RouterModule]  
})  
export class AppRoutingModule { } 

Si el usuario ingresa la dirección...

Rutas

1. Ruta comodín

En este punto, la aplicación solo se procesará correctamente cuando el usuario ingrese las URL/, /abc y /xyz. Cualquier otra URL (/qwertyuiop por ejemplo) causa un error, ya que el módulo de enrutamiento de Angular no puede encontrar ninguna coincidencia en su tabla de rutas. El error no es visible en el navegador web, pero es mucho más claro en la consola.

Navegación a una ruta no administrada http://localhost:4200/azertyuiop

Para superar este tipo de problema, Angular permite el uso de una ruta comodín simbolizada por dos asteriscos (**). Es un poco la «ruta de la basura»: acepta todas las URL. La ruta comodín casi siempre debe ser la última de las rutas, ya que, si fuera la primera, habría una coincidencia y Angular nunca evaluaría las demás.

// C:\JavaScriptYAngular\Angular\miProyectoAngular\src\app\  
components\c15\c15.components.ts  
import { Component, OnInit } from '@angular/core';  
  
@Component({  
 selector: 'app-c15',  
 templateUrl: './c15.component.html',  
 styleUrls: ['./c15.component.css']  
})  
export class C15Component implements OnInit {  
  
 tecnologias = [  
   { id: 1, nombre: 'JavaScript', frameworks: ['Angular', 'React', 
'Vue'] },  
   { id: 2, nombre: 'Python', frameworks: ['Django', 'Flask'] }, 
   { id: 3, nombre: 'Go', frameworks: ['Go'] }  
 ]  
  
 constructor()...

Jerarquía en las rutas

Una aplicación de gestión implementa muy a menudo operaciones CRUD. Debe poder leer, modificar, eliminar y agregar datos. La consecuencia es que es probable que el número de rutas aumente exponencialmente.

Para mejorar la interfaz y la experiencia de usuario, Angular permite priorizar componentes y rutas. La aplicación mostrará una lista de elementos de la colección y cuatro botones correspondientes a las cuatro posibles acciones sobre el elemento. Al hacer clic, el componente responsable de la acción se insertará dentro del componente principal.

De manera más simple, agregar, eliminar y modificar un elemento de la colección solo se puede hacer dentro del componente responsable de representar la URL/coleccion.

ng generate component componentes/c15C 

ng generate component componentes/c15R 

ng generate component componentes/c15U 

ng generate component componentes/c15D 

// C:\JavaScriptYAngular\Angular\miProyectoAngular\src\app\  
components\c15-c\c15-c.component.ts  
import { Component, OnInit } from '@angular/core';  ...

Permisos

Por supuesto, algunas rutas son más sensibles que otras. Que cualquier usuario pueda ver los objetos de una colección, por qué no; pero podría ser catastrófico que cualquiera pudiera borrarlos o, peor aún, modificarlos.

Angular ofrece varias interfaces ubicadas en el paquete del enrutador para limitar el acceso a ciertas rutas y, por lo tanto, a ciertos componentes.

Estas interfaces, llamadas «guardianes», son un atributo adicional de un objeto de ruta.

{path : ‘url', component : unComponente, guardian :[ unServicio ] } 

// C:\JavaScriptYAngular\Angular\miProyectoAngular\src\app\  
app-routing.module.ts  
import { NgModule } from '@angular/core';  
import { Routes, RouterModule } from '@angular/router';  
import { C15Component } from './components/c15/c15.component';  
import { GuardianService} from './services/guardian.service';  
  
const rutas: Routes = [  
 {  
   path: 'tecnologias', component:...

Práctica

1. Enunciado

Desde la aplicación PokemonManager desarrollada en los capítulos anteriores, configure una barra de navegación en la página de inicio. En su interior, coloque cinco hipervínculos para:

• regresar a la página principal,

• mostrar el componente generations,

• mostrar el componente pokemons,

• crear una cuenta de usuario,

• conectarse.

Cree los componentes adicionales que considere necesarios y utilice las pautas routerLink y <router-outlet> en el archivo app.component.html.

Instalación de una barra de navegación

En el resto de este libro, Google Firebase se utilizará para configurar una autenticación real y ofrecer la creación de una cuenta con los botones Crear una cuenta y Conectarse.

ng generate component componentes/barraDeNavegacion 

<!-- C:\JavaScriptYAngular\Angular\PokemonManager\src\app\  
components\barra-de-navegacion\barra-de-navegacion.  
component.html -->  
<nav class="navbar" role="navigation" aria-label="main navigation">  
   <div class="navbar-brand">  ...