Enrutamiento y componentes de Angular UI

Angular UI Router ha ido integrando poco a poco el soporte para el enrutamiento a componentes de Angular. Este post discutirá por qué eso es útil, y cómo hacerlo usando las versiones 0.x.x y 1.0.0-beta.x de Angular UI Router.

Antecedentes

Con la introducción de los componentes de Angular en la versión 1.5, el concepto de un conjunto independiente y reutilizable de comportamientos y vistas se hizo más fácil de definir que lo que se hacía anteriormente en directivas. Estos cambios incluyen: la abstracción del alcance, la vinculación a los controladores de forma explícita, proporcionando ganchos del ciclo de vida en el controlador, así como algunas otras cosas.

Esto permitió una mejor componentización de vistas y aplicaciones enteras. Con esto llegó la comprensión de que una página web es un componente compuesto de componentes.

Dicho esto, el enrutamiento a un componente se convirtió en un comportamiento deseado.

Componentes inteligentes vs. componentes tontos

Antes de profundizar en el uso de UI Router para enrutar a los componentes, se debe discutir el concepto de componentes inteligentes y tontos.

Un componente inteligente es uno que es muy consciente de la API y los datos que impulsan una vista. Esto significa que en su controlador, típicamente está haciendo una llamada de servicio al inicializar el componente. Sabe lo que se requiere para hacer la llamada y la respuesta que debe esperar de la API.

Por otro lado, hay componentes tontos que saben qué hacer con un objeto o valor pasado y de qué interacciones es responsable. Normalmente no interactúa con ningún servicio. La mayoría de las interacciones resultan en una devolución de llamada a un componente padre para pasar la información de vuelta para ser utilizada por un componente inteligente o se relacionan puramente con los cambios de visualización.

En aras de la reutilización, los componentes tontos suelen ser los más reutilizables (piense en contenedores con cabeceras, barras de navegación, cajas de selección, etc). Los componentes inteligentes son geniales para construir aplicaciones completas desde un alto nivel, pero no son muy personalizables.

La mejor manera de hacer que un componente sea tonto es eliminar las llamadas a la API de los controladores y encontrar una manera de proporcionar esos datos a través de algún tipo de enlace. Esto es útil si usted ya tiene los mismos datos que un componente inteligente necesita, pero no quiere hacer dos visitas al servidor para ello.

Escribiendo una aplicación como un componente

Con el paso a las aplicaciones componentizadas, hubo un cambio de mentalidad relacionado con la forma en que vemos las aplicaciones. Aplicaciones enteras pueden ser vistas como un componente. Esto realmente tiene casos de uso práctico. Por ejemplo, si escribimos nuestra aplicación como un componente, podemos tomar una aplicación web independiente y potencialmente ponerla en un contenedor web híbrido y hacer una aplicación móvil a partir de ella.

La mejor manera de escribir una aplicación como un componente es aprovechar las vistas anidadas en UI Router. Esto puede ser un reto, a veces, pero permite una gran flexibilidad en el intercambio de componentes basados
en el estado de la aplicación.

Uso de Componentes en la Definición de Estado usando Plantilla

La primera integración con componentes enrutables fue, en lugar de usar una propiedad templateUrlen la definición de estado, fue usar la propiedad template, en su lugar. Un ejemplo de esto sería como
sigue:

Obviamente, esto funciona, pero cuando todos y cada uno de los estados se declaran con un elemento HTML que es simplemente un único elemento HTML sin atributos, empieza a ser tedioso.

Concedido, toda la lógica y la visualización relacionada con ese componente está aislada y es reutilizable. Si, por ejemplo, decides envolver myComponent en una plantilla de navegación, ahora puedes hacerlo sin tener que generar un nuevo componente a partir de una plantilla si hubieras configurado el mismo estado como tal:

Binding to Components

¿Cómo escribimos una aplicación completa como un componente tonto, cuando muchas de nuestras rutas necesitan hacer llamadas a servicios para mostrar información que un usuario quiere ver?

Una posible respuesta a esto es resolver los datos necesarios para que el componente funcione desde la ruta y luego enlazarlos en el componente a través de los enlaces del componente. Hay dos enfoques para hacer esto:

Crear un componente inteligente que envuelva un componente tonto. El único propósito del componente inteligente es hacer una llamada de servicio y enlazar adecuadamente con el componente tonto. Utilizar la funcionalidad de resolución proporcionada en el enrutador de la interfaz de usuario para resolver los datos directamente al componente tonto.

Hay algunas desventajas obvias en ambas opciones. Con una envoltura de componente inteligente, tienes un componente adicional que mantener. Para resolver el componente utilizando el enrutador de la interfaz de usuario, te estás atando a la capacidad del enrutador, y también es más difícil de manejar el manejo de excepciones.

Dicho esto, la creación de componentes enrutables a través de los enlaces del enrutador de la interfaz de usuario es extremadamente simple, y el enrutador de la interfaz de usuario es lo suficientemente potente y proporciona una gran funcionalidad hasta el punto de que, si está en su proyecto, es probable que permanezca allí hasta una reescritura completa de una aplicación.

Para vincularse a un componente en la versión estable de UI Router (0.x.x), UI Router crea un objeto $resolve en el contexto que utilizó para compilar el contenido del ui-view.

Esto se puede utilizar para vincularse a una declaración de componente en la propiedad template de la definición de estado.

Esto nos permite eliminar la dependencia de UserService del componente user. Para aquellos componentes inteligentes que simplemente hacen una llamada al servicio y luego muestran la información, en realidad podemos eliminar un controlador entero, también.

Enlace a componentes – 1.0.0-beta.x

Con el lanzamiento de [email protected], la propiedad component se añadió al objeto de definición de estado. Esto permite al desarrollador enlazar directamente a un componente como se define en el módulo angular. Elimina la necesidad de tener una plantilla que contenga un solo elemento como habíamos visto en el pasado.