ch09.md

Capítulo 9 Routing

Los navegadores más antiguos inician una nueva solicitud al servidor cuando la URL cambia. Los navegadores modernos, también conocidos como navegadores evergreen, pueden cambiar la URL y el historial del navegador al navegar en diferentes vistas sin enviar una solicitud al servidor, utilizando una técnica llamada pushState.to facilita el enrutamiento del lado del cliente, lo que permite a las aplicaciones web cambiar la URL y el historial del navegador sin recargar la página.

Una aplicación Angular debe establecer la etiqueta HTML <base> en el archivo index.html para habilitar el enrutamiento pushState.

El router de Angular está habilitado por defecto en las nuevas aplicaciones Angular, como lo indica el método provideRouter en el archivo app.config.ts.

El método provideRouter nos permite usar un conjunto de artefactos de Angular relacionados con el enrutamiento:

• Servicios para realizar tareas comunes de enrutamiento como la navegación
• Directivas que podemos usar en nuestros componentes para enriquecerlos con lógica de navegación Acepta un único parámetro, que es la configuración de enrutamiento de la aplicación, y se define por defecto en el archivo app.routes.ts.

Controlar el acceso a la ruta

Cuando queremos controlar el acceso a una ruta particular, usamos un guard. Para crear un guard, usamos el comando ng generate de Angular CLI, pasando la palabra guard y su nombre como parámetros:

ng generate guard auth

Cuando ejecutamos el comando anterior, Angular CLI pregunta qué tipo de guard nos gustaría crear. Hay varios tipos de guards que podemos crear según la funcionalidad que proporcionan:

• CanActivate: Controla si una ruta puede ser activada
• CanActivateChild: Controla si las rutas hijas pueden ser activadas
• CanDeactivate: Controla si una ruta puede ser desactivada (la desactivación ocurre cuando navegamos fuera de una ruta)
• CanMatch: Controla si se puede acceder a una ruta en absoluto

En este caso elegimos CanActivate.

El guard que creamos es una función de tipo CanActivateFn, que acepta dos parámetros:

• route: Indica la ruta que se activará
• state: Contiene el estado del router tras una navegación exitosa

La función CanActivateFn puede devolver un valor booleano, ya sea de forma síncrona o asíncrona. En este último caso, el router esperará a que el observable o la promise se resuelvan antes de continuar. Si el evento asíncrono no se completa, la navegación no continuará. También puede devolver un objeto UrlTree, lo que provocará una nueva navegación a una ruta definida.

Evitar la navegación fuera de una ruta

El tipo de guard CanDeactivateFn controla si una ruta puede desactivarse. Aprenderemos a usarlo implementando un guard que notifica al usuario si hay pendientes en el carrito cuando navega fuera del componente del carrito:

ng generate guard checkout

Precarga de datos de ruta

Es posible que haya notado que al navegar a la ruta raíz de la aplicación por primera vez, hay un retraso en la visualización de la lista de productos. Esto es razonable, ya que estamos realizando una solicitud HTTP a la API de backend. Sin embargo, el componente de la lista de productos ya estaba inicializado en ese momento.

El comportamiento anterior puede llevar a efectos no deseados si el componente contiene lógica que interactúa con los datos durante la inicialización. Para resolver este problema, podemos usar un resolver para precargar la lista de productos y cargar el componente cuando los datos estén disponibles. Un resolver puede ser útil al manejar posibles errores antes de activar una ruta. Sería más apropiado navegar a una página de error si la solicitud a la API no tiene éxito en lugar de mostrar una página en blanco. Para crear un resolver, se utiliza el comando ng generate de Angular CLI, pasando la palabra resolver y su nombre como parámetros:

ng generate resolver products

El resolver que creamos es una función de tipo ResolveFn, que acepta dos parámetros:

• route: Indica la ruta que se activará.
• state: Contiene el estado de la ruta activada.

Una función ResolveFn puede devolver un observable o una promise. El router esperará a que el observable o la promise se resuelvan antes de continuar. Si el evento asíncrono no se completa, la navegación no continuará.

Carga lazy-loading de partes de la aplicación

Nuestra aplicación puede crecer en algún momento, y la cantidad de datos que se introducen en ella también puede aumentar. La aplicación puede tardar mucho tiempo en iniciarse inicialmente, o ciertas partes pueden tardar mucho tiempo en cargarse. Para superar estos problemas, se puede utilizar una técnica llamada lazy loading. El lazy loading significa que no se cargan inicialmente ciertas partes de la aplicación, como los componentes o rutas de Angular. Hay muchas ventajas del lazy loading en una aplicación Angular:

• Los componentes y las rutas pueden cargarse a petición del usuario.

• Los usuarios que visitan ciertas áreas de su aplicación pueden beneficiarse significativamente de esta técnica.

• Se pueden añadir más características en un área de carga lazy-loaded sin afectar el tamaño total del paquete de la aplicación. Para entender cómo funciona el lazy loading en Angular, se creará un nuevo componente que muestre el perfil del usuario actual. Una buena práctica es cargar de forma lazy-loaded las partes de la aplicación que no se utilizan con frecuencia, como el perfil del usuario actualmente conectado.

  ng generate component user

El lazy loading es una técnica preferida cuando el rendimiento de la aplicación es crítico. Angular ha introducido también una característica de mayor rendimiento para retrasar la carga de partes de una aplicación Angular, llamada vistas diferibles. Las vistas diferibles dan a los desarrolladores un control más preciso sobre las condiciones bajo las cuales se cargará una parte de la aplicación. Se explorarán las vistas diferibles en el Capítulo 15, Optimización del rendimiento.