Routing en Angular
En las aplicaciones Angular sólo existe la página, index.html, que es dónde se realizan todas las acciones. El index.html, en el BODY solo tiene un componente, <app-root>, donde se desarrollan todas las acciones de la app.
Todas las vistas (componentes) de nuestra app se muestran sobre el index, intercambiando el componente que se visualiza en cada acción; pero sin recargar la página SPA (Single Page Action)
Por tanto en Angular existe el Sistema de Routing, cuyo objetivo es permitir que en nuestra app haya rutas internas y la navegación.
El Routing es el responsable de reconocer la ruta que el usuario quiere visualizar en cada momento.
Tenemos dos tipo de routing:
- Routing (Rutas) simple
- Routing (Rutas) con parámetros
¿Cómo utilizamos Rounting en nuestra aplicación?
Vamos a empezar, con un ejemplo sencillo:
Empezamos por la navegación simple (Routing Simple), que permite navegar de un componente a otro.
Nos creamos una carpeta components dentro de src/app y dos componentes, en mi ejemplo, he creado Home y Cursos, con su correspondiente diseño.
Configuración del Routing en nuestra app
Ahora vamos a definir las rutas para cada componente:
En este fichero, se realiza la configuración de las rutas
- Importamos los componentes y módulos para el routing.
- Importamos los componentes que van a formar parte de la navegación.
- Definimos el array de rutas, es decir la configuracion de todas las rutas, de nuestra app y exportamos el modulo del router para poder utilizarlo dentro de Angular
- Exportamos el proveedor de rutas que se utilizaran dentro de Angular.
La configuración del Router, se realiza desde el componente principal, por lo que iremos a la carpeta app y crearemos un nuevo archivo llamado app.routing.ts
En conclusión, lo que hemos hecho en este fichero es importar nuestros componentes y definir una configuración para las rutas.
Podemos ver que tenemos dos tipos rutas, simples y con parámetros. Por defecto la ruta con el path vacío se corresponde a la ruta por defecto, que la hemos configurado como el «Home».
Otra ruta simple que hemos creado es «cursos»
¿app.module.ts?
Es el responsable de cargar los módulos, componentes y configuraciones de la app.
Aquí, en este fichero, app.module, declaramos el routing que vamos a utilizar. Declaramos las dos constantes que hemos exportado en la clase de Routing.
Cargamos routing como módulo y appRoutingProviders como servicio dentro de la misma clase.
El siguiente paso será utilizar las rutas dentro de la página principal app.component.html
Cargamos las etiquetas <MenuPrincipal /> y <router-outlet> para cargar ahí los componentes que vaya cargando el router.
Visualizamos en el navegador:
Rutas con Parámetros
En este ejemplo, vamos a recibir un parámetro, creamos el CrearCursoComponent, que recibirá como parámetro de la ruta un nombre
crearcurso/mi-nombre-nuevo
- Importamos el componente y definimos esta ruta, en app.routing.ts
- En el componente tenemos que importar los siguientes módulos para el routing
Te explico:
Params: recoge los parámetros
ActivatedRoute: obtiene los parámetros que recibe del router. Es un Observable, por tanto permite subscribirse y ver lo que tiene el parámetro.
Como vamos a capturar la información al arrancar la página, lo hacemos desde el OnInit().
El parámetro, en nuestro ejemplo, el nombre del curso, se captura mediante .suscribe()
Con params, recuperamos el valor único de la ruta, «nombreCurso», que es así es como lo hemos llamado en el path del routing y lo asignamos a nuestra variable pública nombreCurso que la enviaremos a nuestra vista (html)
En este ejemplo, recibo la ruta, creo una vista con el parámetro que recibo de la ruta /crearcurso/micurso y genero la vista capturando el valor del parámetro. Si, sólo, recibo en la ruta «/crearcurso» sin parámetro, me muestra un mensaje informando que no se ha realizado ninguna acción.
Abajo, te explico, cómo podemos capturar, errores de ruta URL, que en este caso, si el usuario introduce una ruta incorrecta, nos lanza el error.
Error 404 Errores de URL
Vamos a capturar los errores de URL dentro de nuestra app, cuando el usuario inserte una url desconocida.
- Creamos un componente, ErroRuta
- En el Routing, lo definimos de la siguiente forma: se declara en último lugar en el array de rutas y el path se define «**»
Hemos terminado, fue una breve explicación, puedes descargar el código desde Github.
Muchas gracias 🙂
Autor/a: Mónica Patricia Chachalo Iles
Curso: Microsoft MCSA Web Applications + Microsoft MCSD App Builder
Centro: Tajamar
Año académico: 2019-2020
Codigo Gihub: https://github.com/mch89/RoutingAngular