Compartir
Contenidos contratados por la marca que se menciona

Así también puede usarse Angular Translate para internacionalizar tu app

Así también puede usarse Angular Translate para internacionalizar tu app
Guardar
1 Comentarios
Publicidad
Tweets por el @agbotraining.

La pasada entrega Diego Herrera, Instructor de AGBO Training y experto en AngularJS, mostraba cómo lograr que una web app se adapte a diferentes idiomas y regiones.

No todo queda ahí. En esta ocasión nos enseña una alternativa refinada para llegar al resultado deseado. ¿Vemos cómo lo hace?

Mejorando lo presente

Si echamos un ojo a la configuración de los módulos usados, vemos que mientras angular-dynamic-locale carga un documento de cultura bajo demanda y según configuración, angular-translate necesita que le indiques las traducciones de todos los idiomas de manera manual.

¿No hay una forma más elegante de trabajar con angular-translate? Sí, sí que la hay, usando un custom loader que implemente el comportamiento deseado.

Vamos a crear un documento JSON por cada idioma contemplado, y lo nombramos con el código ISO 639-1 correspondiente:

I18n5

Adaptamos la configuración del módulo angular-translate para que cargue las traducciones bajo demanda y de manera asíncrona:

Angular6
Angular7

El resultado es visualmente idéntico, salvo que ahora se está cargando un solo juego de traducciones, el del idioma que proceda, y que el código es más limpio y coherente.

Esta nueva aproximación que acabamos de implementar es perfecta para ejemplos sencillos, pero mi experiencia personal, basada en aplicaciones más grandes y complejas, es que tiene un pequeño inconveniente, que si bien no es bloqueante, sí que es molesto.

Aunque el custom loader de angular-translate se establece durante la fase de config, el documento de traducciones a cargar no se decide hasta la fase de run de AngularJS, pudiendo producir race conditions por las cuales el navegador termina de cargar éste después que la aplicación, dándose el siguiente efecto:

I18n6

Al no existir aún traducciones para esas etiquetas angular-translate no puede resolverlas. Esto sólo durará un instante, pero lo justo para que sea intrusivo. Podemos menguar este efecto estableciendo un idioma por defecto en la fase de config con el objetivo de adelantar en el ciclo de carga la disponibilidad de las traducciones. Para ello, basta con añadir una línea más en nuestro código:

Angular8

Este ejemplo que hemos visto es un caso práctico más bien sencillo, pero un caso real puede requerir otra solución algo más compleja. Por suerte, el módulo angular-translate es muy completo y ofrece distintas opciones para proveer la funcionalidad para la que fue concebido. Mi recomendación es que os paséis por su documentación y veáis las posibilidades que ofrece: fijo que cubre las necesidades de vuestras aplicaciones.

Y un poco más

A continuación Diego Herrera en acción con otra demo de AngularJS, esta vez inspirada en IMDB. Disfrútalo y engánchate a este framework.

Tener tu aplicación en varios dispositivos a la vez gracias a los navegadores web es una ventaja que no puedes perderte. Desarrolla un proyecto completo para varios clientes en el KeepCoding Startup Engineering Master Bootcamp.

Imagen | Vector de Web diseñado por Freepik

En Desarrollo para Startups

Publicidad

También te puede gustar

Ver más artículos