Introducción a AngularJS

Índice

Introducción

Como todos sabemos, a fecha de hoy es impensable desarrollar una aplicación sin usar un framework en la parte servidora que nos facilite el desarrollo. Sin embargo en un porcentaje alto de los proyectos que he podido ver, la parte cliente puede llegar a ser muy bonita, pero dificil de mantener y un poco anárquica, en donde el desarrollador tiene que modificar el DOM cada vez que un dato cambia de forma manual, generándose un gran número de líneas de código para realizar esta labor, haciendo el proyecto más dificil de extender, comprender y mantener.

AngularJS es un framework JavaScript desarrollado por Google que nos va a hacer la vida más fácil tanto para desarrollar una completa aplicación JavaScript, como para usarlo en ciertas partes de nuestros proyectos que usan plugins JS (DatePicker, Select2, etc), sin muchos problemas.

Características de AngularJS:

  • Sige el patrón MVC.
  • Sencillo y potente sistema de Data Binding, que nos sincroniza automáticamente los datos con el DOM.
  • Modularización de tus aplicaciones, que nos permite tener un código bien organizado y testeable, separado en responsabilidades y en donde fácilmente podemos incluir módulos de terceros o distribuir módulos propios. Módulos AngularJS.
  • Inyección de dependencias, en donde las dependencias que necesitamos en nuestros módulos son instanciadas y proporcionadas por AngularJS.
  • Construcción de componentes y/o modificación de comportamiento mediante directivas. Es decir, con un marcado a nivel de elemento, atributo, clase css o comentario podemos hacer que en tiempo de ejecución esa parte se sustituya por otro HTML con su comportamiento asociado, por ejemplo:
    • <listado-cientes orderby='fecha_alta'/>
    • <div id="xyz" euro_selector/>
    • <div id="xyz" class="euro_selector"/>
    • <!-- directive: euro_selector -->
  • Funciona correctamente con otras librerías.

A continuación, vamos a ver un sencillo ejemplo de como realizar "una aplicación" en dónde se explicará los conceptos básicos y puede servir de base para un primer contacto. Pero resaltaré, que AngularJS es mucho más :-), consulta la sección referencias para produndizar más;

Aplicación a construir.

Los requisitos funcionales son:

Una actividad tiene:

  • Un enunciado y un número indeterminado de palabras a ser organizadas según las instrucciones del enunciado.
  • El usuario podrá responder escribiéndo las respuestas.
  • Un tiempo máximo en segundos para ser contestada, pasado ese tiempo el usuario ya no podrá responder. Además cuando queden 20 segundos el contador cambiará a color rojo.
  • Un número máximo de intentos, además el indicador de número de intentos cambiará a rojo al primer fallo que cometa el usuario.
  • Al hacer clic en cancelar se borrarán todas las respuestas que el usuario habia dado hasta el momento.
  • Al hacer clic en la X se borrarán todas las respuestas asociada.

Captura de pantalla de la aplicación a construir:

Si quieres verla en funcionamiento haz clic aquí.

Formato de la actividad a realizar

js/actividad.js

La actividad tiene los siguientes atributos:
Un id, un alias, un tiempo límite en segundos, un número de intentos máximo para acertar, un título y las respuestas que el usuario tiene que ordenar en base al enunciado (título).

Estado del juego del usuario al realizar la actividad

js/game.js

A continuación veremos la parte la clase que almacena la partida que está jugando el usuario, es decir el usuario realizando la actividad. Si te observas es una clase JavaScript que no se acopla a nada ni Backbone, ni AngularJS, etc.. por lo que puede ser usada y comprendida sin tener conocimientos de frameworks.

Creo que se entiende y que no hacen falta comentarios!

El HTML que importa el JS principal de la aplicación

sortwords.html

Controlador AngularJS

js/controller.js

Como ves hemos creado elementos fácilmente testeables y desligados totalmente del DOM (adiós a getElementById, getElementsByTagName, etc.) :-)

Referencias

Conclusiones

La verdad es que AngularJS me ha sorprendido satisfactoriamente, está muy bien pensado y el desarrollo se realiza con más facilidad con con otros framework como BackboneJS, de hecho puedes ver tu mismo las diferencias para casi el mismo ejercicio, pues lo implementé con Backbone hace un tiempo:

Como comenté en la introducción esto es una sólamente una introducción, en próximos artículos profundizaremos sobre el framework construyendo componentes a través de directivas y aplicaciones con varias vistas y rutas, etc.

Desde mi punto de vista, AngularJS es lo mejor que he visto en la parte cliente.

Bueno, eso es todo, un saludo.
Carlos García.

Categorías del artículo

Comentarios de los lectores