El equipo de AngularJS lanzó la semana pasada un nuevo release (1.3.0) de este framework de Javacript bastante poderoso, que trabaja de manera similar a EmberJS pero que esta arropando más adeptos día a día tanto por la facilidad de uso como por su versatilidad y siendo más simple de adoptar que otros frameworks.
Desde que el framework fue lanzado el equipo de desarrollo ha estado muy movido lanzando nuevos releases regularmente como podemos verlo en el GitHub del proyecto (¡Si, es código abierto!)
Dentro de las nuevas características de esta versión están, One-time binding, ngAria, ngMessages, ngModelOptions y Stric DI.
A continuación te mostramos algunos ejemplos y detalles de estas nuevas caracteristicas en AngularJS 1.3.0
One-time binding
Al anteponer el simbolo :: a nuestra variable en la vista solo detectará el cambio en su valor una vez y mantendrá este en la vista aunque en el controlador cambie.
One time binding: {{::name}}
Mas información en: https://docs.angularjs.org/guide/expression#one-time-binding
ngAria
Este es un módulo interesante permite agregar atributos ARIA (Accessible Rich Internet Application) que sirven para hacer el contenido y aplicaciones web más accesibles para personas con alguna discapacidad. Este módulo requiere agregar una librería nueva. Podemos encontrar el detalle de su uso en https://docs.angularjs.org/api/ngAria
ngMessages
Nueva directiva que nos permite validar de una manera más simple formularios y personalizar de forma sencilla los mensajes.
Por default esta directiva solo muestra un mensaje, si necesitas mostrar mensajes solo hay que activar el atributo ng-messages-multiple
La documentación de esta directiva podrás encontrarla en https://docs.angularjs.org/api/ngMessages
ngModelOptions
Esta directiva hace más fácil personalizar el comportamiento de actualización de los modelos de datos como:
- updateOn
Permite establecer que evento al detonarse debe escucharse para que se actualice el modelo.
- debounce
Valor entero para determinar cuanto tiempo debe tomar el modelo en actualizarse.
- getterSetter
Indica si las funciones asociadas al modelo seran tratadas o no como getters o setters del modelo de datos.
user.name =
Más información y ejemplos de esta directiva en https://docs.angularjs.org/api/ng/directive/ngModelOptions
Stric DI (Directive Info)
Esta opción nos permitirá identificar las funciones que no sigan el estándar determinado de documentación/anotación y que por tanto no son candidatas para la minificación de código. Esta opción nos permitirá también obtener información necesaria al momento de depurar para poder eliminar los errores en nuestro código.
Esta opción se establece cuando registramos una aplicación Angular de al siguiente forma:
Más detalle en: https://docs.angularjs.org/api/ng/directive/ngApp
Claro que la nueva versión no viene solo con nuevas características si no con mejoras necesarias para características existentes como los controles para formularios personalizados y animaciones haciendo más claro y fácil su uso.
Hablando de rendimiento, AngularJS, tuvo mejoras en el uso y consumo de memoria y se mejoro la velocidad de las operaciones en el DOM.
Si eres de los que gustan de probar si realmente las mejoras son mejoras, puedes hacer benchmarking con las pruebas que podrás encontrar en el repositorio solo no olvides seguir las instrucciones para ejecutar correctamente las pruebas.
Si te gustan las herramientas que facilitan la creación de estructuras de proyectos como YEOMAN, cabe mencionar que aun no actualizan su generador a esta última versión manteniéndose aun en la versión 1.2.26, esperemos pronto actualicen.
Ahora que si te gusta la manera tradicional, en lugar de copiar y pegar del CDN o descargar la copia ya puedes obtener la última versión vía NPM (Node Package Manager) corriendo el siguiente comando en la terminal y dentro de la carpeta de tu proyecto:
|
1 |
npm install angular |
Cuidado si el target de tu proyecto aun considera ejecutarse en navegadores IE8, acorde a lo publicado en diciembre de el año pasado en el blog de Angular y confirmado en la nota de lanzamiento, esta versión de IE ya no estará soportado por lo que se recomienda que en caso de seguir usándolo, quedarse en la versión 1.2.26
Si lo que buscas es migrar tu aplicación a la nueva versión te recomendamos seguir la guía de migración para que puedas evitarte unos cuantos dolores de cabeza y no pierdas la razón en el intento. Recuerda que hacer la migración no solo es actualizar la librería, también implica reemplazar funciones y actualizar sintaxis en algunos casos.
La lista completa de nuevas características, cambios y mejoras puedes encontrarla en el changelog del proyecto en GitHub.
Si deseas leer la nota de lanzamiento de esa nueva versión de AngularJS podrás encontrarla en el blog oficial del framework.
Recuerda que para poder usar AngularJS o cualquier otro framework es necesario que sepas Javascript para que puedas sacar un mayor provecho de la herramienta y puedas lograr mejores resultados en tus desarrollos.
Si quiere aprender más en Activ ya tenemos nuestro curso de Angular para que te vuelvas todo un experto.
Esperamos que este artículo te haya servido y si tienes dudas o comentarios o deseas más información de nuestros cursos, haznos saber en la sección de comentarios o escríbenos a info@activ.com.mx.