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í.
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 { }
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 { }
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.
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.
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" }
];
path
indicamos la ruta que estará en el navegador. Es importante que las mismas no inicien con una barra /
component
indicamos el componente que se usará cuando se llegue a esa ruta/mascotas
con redirectTo
**
) 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> | <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.
Ahora ejecutamos nuestra app con ng serve
y al visitar sin ninguna ruta se hace la redirección. El menú funciona como un encanto:
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í.
Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…
En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…
En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…
Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…
En este artículo te voy a enseñar cómo usar un "top level await" esperando a…
Ayer estaba editando unos archivos que son servidos con el servidor Apache y al visitarlos…
Esta web usa cookies.