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:

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í.