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

Creador de credenciales web – Aplicación gratuita

Hoy te voy a presentar un creador de credenciales que acabo de programar y que…

1 semana hace

Desplegar PWA creada con Vue 3, Vite y SQLite3 en Apache

Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…

2 semanas hace

Arquitectura para wasm con Go, Vue 3, Pinia y Vite

En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…

2 semanas hace

Vue 3 y Vite: crear PWA (Progressive Web App)

En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…

2 semanas hace

Errores de Comlink y algunas soluciones

Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…

2 semanas hace

Esperar promesa para inicializar Store de Pinia con Vue 3

En este artículo te voy a enseñar cómo usar un "top level await" esperando a…

2 semanas hace

Esta web usa cookies.