Introducción a las Rutas en Angular

Las aplicaciones en general presentan diferentes vistas, en el caso de aplicaciones web de tipo SPA (Single Page Application), el poder cambiar de vistas es un proceso normal, pero que por la naturaleza del tipo de aplicación requiere algunas tomar algunas consideraciones. En Angular, este proceso es realizado por el sistema de enrutamiento (Angular Router), el cual permite gestionar la navegación entre diferentes vistas sin necesidad de recargar la página (principio básico de las SPA)

¿Cómo funciona el enrutamiento en Angular?

El enrutamiento en Angular se basa en la manipulación del historial del navegador utilizando la API de History de JavaScript. Cuando el usuario cambia de ruta, Angular intercepta la petición y renderiza el componente correspondiente dentro del RouterOutlet sin necesidad de recargar la página.

Tipos de Rutas en Angular

En Angular, existen diferentes tipos de rutas que podemos implementar según nuestras necesidades:

🔹 Rutas Estáticas

Son rutas predefinidas en la aplicación y no cambian en función de los datos o acciones del usuario. Se definen con un path o camino fijo.

Ejemplo:

const routes: Routes = [ 
	{ path: 'home', component: HomeComponent }, 
    { path: 'about', component: AboutComponent } 
];

🔹 Rutas Dinámicas

Permiten que un componente reciba parámetros en la URL, lo que es útil para mostrar información específica, como detalles de un producto o perfil de usuario.

Ejemplo:

const routes: Routes = [ 
	{ path: 'producto/:id', component: ProductoComponent } 
];

🔹 Rutas Programadas (Programáticas)

Nos permiten cambiar de ruta desde el código de TypeScript sin necesidad de que el usuario haga clic en un enlace. Se usa el servicio Router para navegar de manera dinámica.

Ejemplo:

this.router.navigate(['/detalle-producto', id]);

Elementos claves para implementar rutas en Angular

Para implementar rutas en Angular, debemos conocer los siguientes conceptos y herramientas:

📌 RouterOutlet

Es una directiva que actúa como un contenedor donde se renderizan los componentes en función de la ruta activa. Se coloca en el app.component.html o en cualquier otro lugar donde queramos que aparezcan las vistas dinámicas.

<router-outlet></router-outlet>

📌 routerLink

Es una directiva de Angular que permite definir enlaces de navegación dentro de la aplicación sin recargar la página.

<a routerLink="/home">Ir a Inicio</a>

📌 ActivatedRoute

Es un servicio que nos permite acceder a los parámetros de la URL dentro de un componente.

constructor(private route: ActivatedRoute) { 
} 

ngOnInit() { 
	const id = this.route.snapshot.paramMap.get('id'); 
}

📌 Router

Es un servicio que nos permite cambiar de ruta de forma programática. Simplemente, lo importamos en nuestro componente y hacemos uso del mismo.

this.router.navigate(['/dashboard']);

Ahora tomemos hagamos la implementación en una aplicación real.

Configuración Inicial

Primero, creamos un nuevo proyecto de Angular si no lo tenemos:

ng new mi-proyecto-angular
cd mi-proyecto-angular
ng serve

Luego, creamos los siguientes componentes para las diferentes vistas, nos aprovechamos del cliente Angular para realizar esta tarea, en nuestro caso vamos a crear un componente para una ruta estática y otro para una ruta dinámica:

ng generate component components/quienes-somos 
ng generate component components/detalle-mascota

Configuración del Módulo de Rutas (app-routing.ts)

Definimos las rutas de la aplicación en el archivo app-routing.module.ts:

import { Routes } from '@angular/router';
import { QuienesSomosComponent } from './components/quienes-somos/quienes-somos.component';
import { MascotasListComponent } from './components/mascotas-list/mascotas-list.component';
import { DetalleMascotaComponent } from './components/detalle-mascota/detalle-mascota.component';
import { FormularioComponent } from './components/formulario/formulario.component';

export const routes: Routes = [
    { path: '', component: MascotasListComponent },
    { path: 'mascota/:id', component: DetalleMascotaComponent },
    { path: 'quienes-somos', component: QuienesSomosComponent },
    { path: 'adopcion/:id', component: FormularioComponent }
];

En navbar.component.html, agregamos enlaces de navegación con routerLink:

<nav>  
	<a routerLink="/">Inicio</a>  
    <a routerLink="/quienes-somos">Quiénes Somos</a>
</nav>

Mostrar Componentes con RouterOutlet

En app.component.html, añadimos el RouterOutlet para mostrar las vistas dinámicamente:

<app-navbar></app-navbar>
<router-outlet></router-outlet>
<app-footer></app-footer>

Implementar una Ruta Dinámica

En detalle-mascota.component.ts, obtenemos el ID de la mascota desde la URL usando ActivatedRoute:

export class DetalleMascotaComponent implements OnInit {
  mascota?: Mascota;
  loading: boolean = true;

  constructor(
    private route: ActivatedRoute,
    private router: Router,
    private mascotaService: MascotaService
  ) { }

  ngOnInit(): void {
    const id = this.route.snapshot.paramMap.get('id');

    if (id) {
      this.mascotaService.
        getMascotaById(Number(id)).
        subscribe({
          next: (mascota) => {
            this.mascota = mascota;
            this.loading = false;
          }
        })
    }
  }

Y en mascota.component.html, enlazamos a la ruta dinámica usando routerLink:

<a [routerLink]="['/mascota', mascota.id]">
	Ver detalles de {{ mascota.nombre }}
</a>

Para cambiar de ruta desde TypeScript, usamos el servicio Router. Por ejemplo, si queremos redirigir al usuario a un formulario de adopción:

import { Router } from '@angular/router'; 

export class DetalleMascotaComponent { 
	constructor(private router: Router) {
    } 
    
    irAFormulario() { 
    	this.router.navigate(['/adopcion', this.id]); 
    } 
}

Y en detalle-mascota.component.html:

<button (click)="irAFormulario()">Adoptar</button>

Siguiendo este paso a paso, podrás implementar los tipos de rutas que Angular nos permite construir y con ello lograrás mejorar la usabilidad de tus aplicaciones.

Si te gustó el contenido, compártelo en tus redes.

Para cualquier duda me puedes contactar por: