¿Qué es AngularJS? Una breve introducción

Hace unas semanas me encontraba buscando información sobre frameworks JavaScript del lado cliente (client-side) para desarrollar aplicaciones web. He de decir que los resultados al principio fueron apabullantes ya que la lista de este tipo de frameworks resultó ser muy larga: Backbone.js, Ember.js, Knockout, Agility.js, KendoUI y muchos más. Entre ellos estaba AngularJS, había visto un par de screencast sobre él, así que me decidí a estudiarlo más a fondo.

Después de un tiempo leyendo documentación, algún que otro libro y poniendo sobre el terreno lo aprendido de AngularJS, puedo decir que estoy gratamente sorprendido con él y que además, dará mucho de qué hablar de aquí en adelante.

Así que, ¿qué es AngularJS?.

AngularJS es un framework JavaScript de desarrollo de aplicaciones web en el lado cliente, viene de la mano de los chicos de Google y se podría decir que utiliza el patrón MVC (Model-View-Controller), aunque ellos mismos lo definen más bien como un MVW (Model-View-Whatever (whatever works for you)). Puedes leer más sobre esto en esta publicación de Google+.

Los creadores de este framework están convencidos de que HTML no está aún preparado para servir vistas dinámicas de un modo eficiente, así que han decidido extender la sintaxis de HTML para darle más funcionalidad.

Vale, espera, ¿extender la sintaxis de HTML?. Bien, esto puede resultar algo confuso al principio así que os voy a dejar un ejemplo para que entendáis a que me refiero.



En el ejemplo anterior podéis encontrar elementos nuevos como ng-app, ng-model y el nombre de una variable rodeada de dobles corchetes. Las dos primeras son lo que en AngularJS llaman directives y la tercera es el modo de mostrar el valor de una variable del $scope (algo así como el contexto de la aplicación) en pantalla, como si de un template se tratara.

Entonces, ¿qué nos permite AngularJS?. Vamos a ver varios ejemplos donde intentaré explicar de pasada los puntos notables del framework. No obstante, me gustaría aclarar un par de conceptos que vais a ver continuamente en los ejemplos, los scopes y los controllers.

Scopes

Los scopes son los distintos contextos de ejecución sobre los que trabajan las expresiones de AngularJS, por ejemplo, cuando referenciamos un atributo del modelo mediante la directive ng-model, no estamos sino apuntando a un atributo que contiene el scope sobre el que se está trabajando. En los scopes se guarda la información de los modelos que se representan en la vista y también atributos que se utilizan para manejar la lógica de la misma.

Los scopes se manejan principalmente desde los controllers y desde las directives.

Controllers

Los controllers son los encargados de inicializar y modificar la información que contienen los scopes en función de las necesidades de la aplicación.

También podemos declarar funciones en el scope que se podrán utilizar más tarde o ser llamadas desde la vista.

Una vez explicado esto, vamos a dar un paseo por las características de AngularJS.

---

¿Qué ofrece AngularJS?

Client-side template

El sistema de plantillas en AngularJS es diferente del utilizado en otros frameworks. Por lo general es el servidor el encargado de mezclar la plantilla con los datos y devolver el resultado al navegador. En AngularJS el servidor proporciona los contenidos estáticos (plantillas) y la información que se va a representar (modelo) y es el cliente el encargado de mezclar la información del modelo con la plantilla para generar la vista.

En el siguiente ejemplo se puede observar como representamos en AngularJS una lista de contactos utilizando el motor de plantillas y la directive ng-repeat, la cual nos permite iterar sobre el array para después mostrar uno a uno la información de cada elemento contenido en él.

Data binding

Con AngularJS podemos sincronizar el modelo y la vista automáticamente utilizando ciertas directives (ng-model en el ejemplo) del framework. Esta sincronización es bidireccional, es decir, la información se sincroniza tanto si cambia el valor en la vista como si lo hace el valor en el modelo. 

Directives

Las directives son el plato fuerte de AngularJS. Mediante el uso de las mismas podemos extender la sintaxis de HTML y darle el comportamiento que deseemos. Podemos crear directives a nivel de elemento, de atributo, de clase y de comentario. Un ejemplo sería el siguiente, mediante nuestra directive focusable (una directive a nivel de atributo) podemos modificar el comportamiento de los elementos input. En este caso cada vez que el input obtiene o pierde el foco cambia su color de fondo.

Una de las cosas más interesantes de las directives es la posibilidad de declararlas a nivel de elemento, lo que nos permite crear nuevas etiquetas de HTML que facilitan la creación de componentes reutilizables.

Vamos a poner un ejemplo rápido, una nueva etiqueta HTML llamada Hello que será reemplazada por un botón que al hacer clic sobre él mostrará una alerta.

Filters

Los filters nos permiten modificar el modo en el que se va a presentar la información al usuario.
La utilización de los mismos es similar a los Pipeline de Unix:

{{ expresion | filtro }} 

Donde expresion puede ser cualquier tipo de expresión de AngularJS, como una variable del $scope, y filtro el nombre del filtro que le queremos aplicar a la expresión.

En el siguiente ejemplo hemos creado un filtro llamado toUpperCase, el cual transforma todo el texto recibido de la expresión en mayúsculas.

Services

Los services son los encargados de comunicarse con el servidor para enviar y obtener información que después será tratada por los controllers para mostrarla en las vistas.

Esta parte es más compleja de explicar con un ejemplo, por el momento nos basta con saber que los services se pueden dividir en tres categorías: services, factories y providers.
Uno de los services incluidos en el framework es $resource, el cual nos permite encapsular la interacción con servicios RESTful sin tener que tratar directamente con las llamadas http.

Otros services interesantes que incluye AngularJS son $q y las llamadas promises. Mediante este mecanismo podemos realizar acciones asíncronas y devolver valores que puede que aún no hayan sido resueltos. Cuando la acción ha finalizado el valor devuelto, llamado promise, se resuelve en función del resultado de la misma, mientras tanto la ejecución del programa sigue su curso.

---

En principio estos son los principales aspectos de AngularJS, he intentado darle un enfoque práctico mostrando con ejemplos el potencial de este framework sin entrar en detalles demasiado técnicos. En las siguientes entradas iré profundizando poco a poco en todo lo que esta librería JavaScript puede ofrecernos.

Por último, si os ha gustado lo que habéis visto hasta ahora os recomiendo que visitéis los siguientes enlaces. Espero que os sean de ayuda.

• AngularJS (Website oficial, tutoriales y documentación)
• AngularJS - GitHub (Código fuente de AngularJS)
• AngularJS - O'Really (Libro escrito por Brad Green y Shyam Seshadri, ambos colaboradores del proyecto AngularJS)
• Recipes with AngularJS - Leanpub (Libro de recetas y técnicas útiles a la hora de manejarse con el framework, se va actualizando cada cierto tiempo)
• egghead.io (Website de recetas de AngularJS)