Angular - Ejemplo de rutas

Qué es un sistema de routing

Pensando en aquellas personas que comienzan con Angular su incursión en las "SPA" (Single Page Application), comenzaremos aclarando qué es un sistema de routing y por qué lo necesitamos.

En cualquier sitio web generalmente tienes varias direcciones que son entregadas por un servidor, para mostrar diferentes contenidos del sitio. Podemos tener una portada, una página de productos, una de contacto, etc. Cada una de esas páginas se presenta en una ruta diferente del sitio web, que podrían ser como example.com, example.com/productos/index.html, example.com/contacto.html, etc. Cada una de esas rutas podría tener un archivo HTML, que se sirve con el contenido de esa sección. Hasta aquí estamos seguros que los lectores no tendrán ningún problema, pues es así como funcionan, en líneas generales, prácticamente todos los sitios web.

Sin embargo, en las aplicaciones Angular sólo tenemos una página, el index.html y toda la acción se desarrolla dentro de esa página. En Angular lo común es que el index sólo tenga un componente en su BODY y realmente toda la acción se desarrollará en ese componente. Todas las "páginas" (pantallas o vistas) del sitio web se mostrarán sobre ese índex, intercambiando el componente que se esté visualizando en cada momento.

Nota: Ese es básicamente el concepto de Single Page Application, del que puedes obtener más información en un artículo genérico sobre SPA, que explica con mayor detalle este modo común de desarrollo de aplicaciones con Javascript.

Para facilitar la navegación por un sitio donde realmente sólo hay un index, existe lo que llamamos el sistema de routing, que tiene el objetivo de permitir que en el sitio web haya rutas internas, respondiendo a rutas "virtuales" como las que existen en los sitios tradicionales.

Llamamos "virtuales" a esas rutas, porque realmente sólo existe un "index.html", no habrá un archivo "contacto.html" o "productos.html" para cada ruta, sino que será realmente siempre el "index.html" el que se entregue al navegador.

El sistema de routing es el encargado de reconocer cuál es la ruta que el usuario quiere mostrar, presentando la pantalla correcta en cada momento. Esto es útil por varios motivos, entre ellos:

Permite que la aplicación responda a rutas internas. Es decir, no hace falta entrar siempre en la pantalla principal de la aplicación y navegar hasta la pantalla que queremos ver realmente. Permite que el usuario pueda usar el historial de navegación, yendo hacia atrás y hacia adelante con el navegador para volver a una de las pantallas de aplicación que estaba viendo antes.

app.routes.ts

TS

    
import { Routes } from '@angular/router';
import { PersonasComponent } from './components/personas/personas.component';
import { CrearPersonasComponent } from './components/crear-personas/crear-personas.component';
import { CanActivateViaAuthGuard } from './components/shared/guard/autho-guard';

export const ROUTES: Routes = [

    {  path: 'crear', component: CrearPersonasComponent, canActivate: [CanActivateViaAuthGuard] },
    {  path: 'crear/:idpersonas', component: CrearPersonasComponent, canActivate: [CanActivateViaAuthGuard] },
    {  path: 'listar', component: PersonasComponent, canActivate: [CanActivateViaAuthGuard] },
    {  path: 'listar/:mensaje', component: PersonasComponent, canActivate: [CanActivateViaAuthGuard] },

];