Enrutamiento y Navegación en una aplicación Angular
Módulos, enrutamiento y navegación en Angular (II)
El enrutamiento en una aplicación Angular es como un mapa que le dice a la aplicación a dónde debe ir cuando el usuario hace clic en un enlace o ingresa una URL. Cuando trabajas con módulos en Angular, el enrutamiento se convierte en una herramienta aún más importante para organizar y navegar por tu aplicación. Vamos a explicar cómo funciona el enrutamiento en Angular con módulos de una manera sencilla:
¿Qué es el enrutamiento en Angular?
El enrutamiento en Angular es un mecanismo que permite a una aplicación web dirigir y gestionar las vistas que se muestran al usuario en función de la URL o ubicación dentro del sitio web. Es como el sistema de navegación de una aplicación web que determina qué contenido se muestra en la pantalla en función de la URL actual.
El enrutamiento en Angular lo podemos dividir en los siguientes conceptos:
- Rutas (Routes): En Angular, las rutas son definiciones que asocian una URL específica con un componente o una vista particular en tu aplicación. Por ejemplo, puedes definir una ruta que asocie la URL “/home” con un componente que muestra la página de inicio de tu sitio web.
- Enrutador (Router): El enrutador es una parte esencial del enrutamiento en Angular. Es un módulo que se encarga de interpretar la URL actual y decidir qué componente o vista se debe cargar y mostrar en función de esa URL. El enrutador es como un GPS que nos indica la ruta de un destino.
- Enlace (Link): Los enlaces son elementos HTML (como botones o anclas) que permiten a los usuarios navegar a través de la aplicación haciendo clic en ellos. Los enlaces se configuran con las rutas definidas, lo que significa que al hacer clic en un enlace, el enrutador manejará la navegación a la URL correspondiente.
- Marcador de Posición (Router Outlet): Este marcador de posición indica al enrutador dónde debe cargar y mostrar los componentes correspondientes a las rutas definidas. Es como una ventana que muestra el contenido de la ruta actual.
- Navegación: La navegación se refiere al acto de moverse de una vista a otra dentro de la aplicación haciendo clic en enlaces o manipulando la URL directamente. Angular proporciona métodos y directivas para realizar la navegación de manera programática o mediante interacción del usuario.
- Parámetros de Ruta: Además de las URL estáticas, las rutas en Angular también pueden contener parámetros dinámicos. Por ejemplo, una URL como “/product/1” podría representar la vista de detalles del producto con el ID 1. Estos parámetros se pueden capturar y utilizar en los componentes para mostrar datos específicos.
- Guards: Los Guards son funciones que se utilizan para proteger rutas y determinar si un usuario tiene permiso para acceder a una ruta específica. Los Guards pueden verificar la autenticación, autorización u otras condiciones antes de permitir que un usuario acceda a una vista.
Configuración del enrutamiento
La configuración del enrutamiento en una aplicación Angular es fundamental para establecer la navegación entre diferentes vistas o componentes de la aplicación. Cuando se trabaja con módulos en Angular, el enrutamiento también debe estar configurado teniendo en cuenta la estructura de esos módulos. Aquí hay una guía paso a paso para configurar el enrutamiento en una aplicación Angular que utiliza módulos:
Supongamos que tienes una aplicación que contiene tres módulos: AppModule, DashboardModule, y ProfileModule, y quieres configurar el enrutamiento entre estas secciones:
En nuestro módulo raíz (en este caso App) buscamos el módulo de enrutamiento (app-routing.module.ts) definimos las rutas para cada módulo. Las rutas son objetos que asocian una URL con un componente específico. Por ejemplo:
En este ejemplo, hemos definido una ruta por defecto que redirige a /dashboard y luego configurado las rutas para los módulos DashboardModule y ProfileModule. Hemos utilizado el método loadChildren para cargar los módulos de manera diferida (lazy loading), lo que significa que se cargarán cuando se acceda a esas rutas.
Lazy loading en Angular es una técnica de optimización que consiste en cargar módulos y componentes de una aplicación web solo cuando son necesarios, en lugar de cargarlos todos de una sola vez al cargar la aplicación inicialmente. Esto ayuda a reducir el tiempo de carga inicial y a mejorar el rendimiento general de la aplicación, ya que solo se traen los recursos necesarios a medida que el usuario navega por la aplicación.
Cuando se utiliza lazy loading, los módulos se dividen en grupos lógicos y se cargan de manera diferida según la ruta o el evento que los requiera. Esto permite una distribución eficiente de los recursos y un acceso rápido a las diferentes secciones de la aplicación.
Ahora debemos definir las rutas de cada módulo, por ejemplo, el caso del módulo dashboard (dashboard-routing.module.ts) tendrá solamente una ruta (su ruta raíz) que renderizará un componente. Si necesitamos que una ruta tenga parámetros, por ejemplo el ID de un elemento para ver su detalle, podemos hacerlo anteponiendo “:” seguido del nombre de la variable.
En caso de necesitas leer las variables de una ruta lo podemos hacer inyectando ActivatedRoute y utilizar su propiedad params, el cual es un observable (emite un valor cada vez que cambian sus valores) por lo que debemos de suscribirnos:
En el módulo raíz (AppModule), importa el módulo RouterModule y configura las rutas utilizando el método forRoot. Agrega estas importaciones en la sección imports del @NgModule:
Regularmente esto no hace falta si creamos los módulos mediante el CLI porque en la generación del mismo detecta el módulo raíz y lo implementa. Recuerda utilizar el parámetro “ — routing” para la creación de módulos con enrutamiento.
Posteriormente, en tu componente raíz (app.component.html), agrega un elemento <router-outlet></router-outlet>. Este es el marcador de posición donde Angular mostrará el contenido del componente correspondiente a la ruta actual.
Navegación entre rutas en Angular
Navegación desde Componentes
Para navegar desde un componente a otro, inyecta el servicio Router de Angular. Luego, puedes usar métodos como navigateByUrl o navigate para cambiar la URL y, por lo tanto, cargar el componente correspondiente.
Navegación desde Plantillas
Desde las plantillas HTML, puedes usar directivas como routerLink para crear enlaces que cambien la ruta.
Rutas anidadas
Las rutas anidadas son útiles cuando deseas dividir la navegación en secciones o módulos más pequeños. En este ejemplo, crearemos una aplicación simple con rutas anidadas para administrar libros.
En este ejemplo, vamos a configurar rutas anidadas para la sección de libros. Cuando accedas a /libros, el componente LibrosComponent se cargará y se mostrará la lista de libros (ListaLibrosComponent). Cuando navegues a /libros/detalle/:id, se mostrará el detalle de un libro en el componente DetalleLibroComponent.
