Framework Angular

Angular Router – Tutorial y ejemplo

Resumen: mostrar cómo usar Angular Router con un tutorial y ejemplo para las rutas en Angular.

Recuerdo que el buen AngularJS introdujo buenas cosas como las SPA que son aplicaciones de una sola página en donde los controladores se iban montando en un contenedor conforme se navegaba.

Angular 2 (o 4, 5, 8, 10, 50 o la versión que sea cuando leas este post) también tiene un Router muy eficaz y fácil de configurar. Justamente veremos eso hoy: una introducción al modo de uso del enrutador de angular.

Nota: si quieres puedes ver y editar el resultado final aquí.

Angular Router

Asumo que has generado tu proyecto y elegido que sí quieres agregar rutas al crearlo; si no, crea los archivos que indico.

Comenzamos con app-routing.module.ts que es en donde se guardan las rutas, está ubicado en el directorio app. Lo único que hace es importar el router o enrutador de Angular y exportar las rutas, que son un arreglo.

Más adelante veremos cómo configurar las rutas; por el momento se ve así:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
  // En un momento configuramos las rutas...
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Importar enrutador en app principal

Después, en nuestro app.module.ts hay que importar el enrutador:

import { AppRoutingModule } from './app-routing.module';

Y luego en @NgModule dentro de los imports agregar AppRoutingModule así:

@NgModule({
  //...
  imports: [
    BrowserModule,
    AppRoutingModule // <---- Aquí
  ],
  //...
})

De manera que ahora es parecido a lo siguiente:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Angular Router en la vista

El contenido de los componentes será colocado dentro del componente del enrutador llamado router-outlet. Por lo tanto sugiero que se coloque el componente dentro de la app principal, abajo del menú de navegación:

<nav>
  <a routerLink="/ruta">Ejemplo de ruta</a>
  <a routerLink="/otra/ruta">Otra ruta</a>
</nav>
<router-outlet></router-outlet>

Así, aunque se navegue a otro lugar, el menú de navegación quedará siempre intacto. Es momento de pasar a configurar las rutas.

Las rutas y los componentes

Cada ruta debería pertenecer a un componente; el mismo será inyectado dentro de router-outlet. Voy a generar algunos componentes y para ejemplificar usaré mascotas.

Generamos el de listar-mascotas usando la consola y el siguiente comando:

ng generate listar-mascotas

Como en la imagen:

Así voy a generar otro, el de agregar-mascota. El contenido de cada uno es como se ve a continuación:

<p>
    Aquí agregamos una mascota
</p>
<p>Aquí listamos las mascotas</p>

Verás cómo ese contenido es inyectado en el router outlet.

Configurando rutas y menú de navegación

Volvamos a app-routing.module.ts e importemos los componentes que vamos a usar en el Angular Router:

import { ListarMascotasComponent } from './listar-mascotas/listar-mascotas.component';
import { AgregarMascotaComponent } from './agregar-mascota/agregar-mascota.component';

Después, agregamos elementos al arreglo de rutas:

const routes: Routes = [
  { path: "mascotas", component: ListarMascotasComponent },
  { path: "mascotas/agregar", component: AgregarMascotaComponent },
  { path: "", redirectTo: "/mascotas", pathMatch: "full" },// Cuando es la raíz
  { path: "**", redirectTo: "/mascotas" }
];
  • Con path indicamos la ruta que estará en el navegador. Es importante que las mismas no inicien con una barra /
  • En component indicamos el componente que se usará cuando se llegue a esa ruta
  • Cuando usamos path vacía indicamos que redireccione a /mascotas con redirectTo
  • Finalmente cuando sea cualquier otra ruta (**) que no sea la vacía redireccionamos a mascotas; que aquí igual podríamos indicar un componente de 404 not found.

Hasta el momento se debería ver así:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ListarMascotasComponent } from './listar-mascotas/listar-mascotas.component';
import { AgregarMascotaComponent } from './agregar-mascota/agregar-mascota.component';

const routes: Routes = [
  { path: "mascotas", component: ListarMascotasComponent },
  { path: "mascotas/agregar", component: AgregarMascotaComponent },
  { path: "", redirectTo: "/mascotas", pathMatch: "full" },// Cuando es la raíz
  { path: "**", redirectTo: "/mascotas" }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Después agregamos enlaces en nuestro menú de navegación y toda la app se ve así:

<nav>
  <a routerLink="/mascotas">Listar</a>&nbsp;|&nbsp;<a routerLink="/mascotas/agregar">Agregar</a>
</nav>
<router-outlet></router-outlet>

Hay que usar routerLink para indicar la ruta. Aparte de eso no hay más ciencia, son simples enlaces.

Probando rutas con Angular Router

Ahora ejecutamos nuestra app con ng serve y al visitar sin ninguna ruta se hace la redirección. El menú funciona como un encanto:

Angular Router en ejecución

Notas finales

Sí, yo sé que es muy simple el estilo, pero tranquilo; puedes agregarle Angular Material o tus propios estilos 😉

No olvides que puedes probar el resultado en este enlace. Ah, la documentación oficial la encuentras aquí.

Estoy aquí para ayudarte 🤝💻


Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.
parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

Entradas recientes

Servidor HTTP en Android con Flutter

El día de hoy te mostraré cómo crear un servidor HTTP (servidor web) en Android…

3 días hace

Imprimir automáticamente todos los PDF de una carpeta

En este post te voy a enseñar a designar una carpeta para imprimir todos los…

4 días hace

Guía para imprimir en plugin versión 1 desde Android

En este artículo te voy a enseñar la guía para imprimir en una impresora térmica…

1 semana hace

Añadir tasa de cambio en sistema de información

Hoy te voy a mostrar un ejemplo de programación para agregar un módulo de tasa…

2 semanas hace

Comprobar validez de licencia de plugin ESC POS

Los usuarios del plugin para impresoras térmicas pueden contratar licencias, y en ocasiones me han…

2 semanas hace

Imprimir euro € en impresora térmica

Hoy voy a enseñarte cómo imprimir el € en una impresora térmica. Vamos a ver…

3 semanas hace

Esta web usa cookies.