Enrutamiento en Angular
El Enrutamiento o rutas en Angular es la manera en la que navegamos entre las vistas de nuestra aplicación, en una web normal nosotros navegamos entre paginas HTML, pero en Angular navegamos entre vistas que hemos generado a base de módulos y componentes.
En palabras llanas, vamos a hacer que la etiqueta <a> nos lleve a otra página (vista), para eso vamos a ver como lo hacía el hombre primitivo en los 10.000 A.C.
<a href=”myRoute">Home</a>
Luego de siglos de evolución el hombre pudo crear un nuevo método.
<a routerLink=’myRoute’>Home</a>
Espero que haya quedado claro porque lo he dejado todo en esta explicación.
Una vez teniendo claro esto, tiremos toda la carne al asador y abramos la consola. Hay varias maneras de crear las rutas, ya sea con Angular CLI o manualmente, yo usaré el CLI porque es más rápido y así no cometo algún error al crearla.
Si vas a crear una App nueva usa el siguiente comando.
ng new myRouterApp — routing true
Si ya tienes una a la cual les vas a agregar el Router
ng g module app-routing
Perfecto, ahora vamos a crear algunos componentes para poder navegar y agregare algo de CSS (Usaré bootstrap desde su CDN).
ng g c nombreDelComponente
Componentes creados:
- Home
- Navbar
- Contact
- About
Después de tener los componentes listos usamos las clases de bootstrap o lo que sea hayas usado y crearemos algo así. Por mi parte agregué el navbar al app.componet.html para que siempre podamos verlo sin importar la vista en la que nos ubiquemos.
Ahora revisa si dentro del Head en el index.html tenemos la siguiente etiqueta, Angular la crea automáticamente pero puede ser que por alguna razón no la tengamos.
<base href=”/”>
Gracias por leer hasta aquí, recomiendo tomar un descanso de unos 5 minutos para seguir.
Luego de haber contestado los mensajes de whatsapp seguimos, hasta ahora hemos creado algunos componentes, el modulo routing y por supuesto un bonito navbar.
Vamos a la parte pesada, abrimos nuestro router.component.ts e importamos nuestros componentes, en este caso he importado el home, about y contact.
Ahora vamos a crear nuestras rutas.
Nada raro hasta la ultima línea donde aparece ´**´ esta ruta lo que va a hacer es redireccionar al HomeComponent en caso de que la ruta no exista. En la última parte del código debemos tener lo siguiente.
WARNING: Hay que tener cuidado con el RouterModule.forChild en caso de tener cambiarlo a RouterModule.forRoot, ya que este es usado para las rutas hijas y este no es el caso de uso.
Abrimos el app.module.ts e importamos nuestro Router
Luego lo agregamos a nuestros Imports
Todo bien hasta aquí, pero aun no funciona, abrimos nuestro app.component.html y agregamos la siguiente etiqueta donde queremos que se carguen las vistas.
<router-outlet></router-outlet>
“Pero aún no funciona, me has hecho perder todo este tiempo”
Tranquilo, recuerdas la parte donde el hombre primitivo usaba la etiqueta<a href=”myRoute”>Home</a>, solo debemos abrir nuestro navbar.component.html y agregar las rutas con la directiva routerLink
<a routerLink=’myRoute’>Home</a> de la siguiente manera.
Y esto es todo…
CONCLUSIONES: Hemos aprendido a hacer enrutamiento y cargar nuevas vistas dentro del DOM sin necesidad de recargar nuevamente la web, de esta manera aprovechamos la principal característica de las SPA, a continuación dejo mis redes y código en GitHub.
