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.

Meme Los Simpson

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

Ubicación de nuestro Router generado

Si ya tienes una a la cual les vas a agregar el Router

ng g module app-routing

Ubicación de nuestro Router generado

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.

Ejemplo Navbar

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.

Importación de componentes

Ahora vamos a crear nuestras rutas.

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

Usa forRoot en lugar de forChild

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

Importación de nuestro Router

Luego lo agregamos a nuestros Imports

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>

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.

routerLink

Y esto es todo…

Sección About
Contact

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.

--

--

--

光 — Nobody said it would be easy, mijo.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Kevin Andrey Bueno Solano

Kevin Andrey Bueno Solano

光 — Nobody said it would be easy, mijo.

More from Medium

Angular: Data-Binding

Angular Pipes

How to set up Jest in Angular App

Disabling Form Controls When Working With Reactive Forms in Angular