AngularJS es un framework (o marco de trabajo) para hacer SPA’s (Single Page Applications). Para comprender qué es realmente AngularJS, veamos el concepto de Single Page Application y un poco sobre AngularJS.

Una SPA, como lo dice su nombre, es una aplicación web que inicialmente carga una página (ej. un index.html) y posteriormente, mediante llamadas internas de AJAX (XMLHttpRequest), muestra diferentes pantallas de nuestra aplicación. Así, si tenemos un encabezado con nuestras ligas de navegación, no necesitamos estar cargando todo el HTML por cada pantalla, simplemente vamos actualizando la sección que requerimos. Funciona un poco similar a los llamados RIA’s (Rich Internet Applications) en los cuales sólo se cargaba un SWF de Flash o un XAP de Silverlight, y los datos eran cargados mediante llamadas a alguna API o servicio web.

Entendido el concepto de SPA, hagamos nuestro primer ejemplo de AngularJS. Para este ejemplo, necesitamos un editor de código o IDE, un navegador web y (opcionales) tener instalado bower y un cliente de git en nuestra máquina.

Podemos clonar el repositorio angularjs-first-steps de GitHub o de la misma página podemos descargar en formato zip los archivos.

Una vez ya sea clonado o descargado y descomprimido el archivo ZIP, abrimos el archivo index.html qué está dentro del directorio app en un navegador web. Se verá lo siguiente:

Nos aparece el nombre Guest alrededor de las llaves porque todavía no hemos cargado la biblioteca de AngularJS, y por ende no ha “compilado” el código que hemos ingresado a la vista.

Con un editor de código (en este caso Sublime Text) abrimos el archivo index.html. Lo primero que debemos hacer es cargar nuestra biblioteca de AngularJS. Para estos ejemplos, vamos a utilizar la versión 1.x, es decir, todavía no utilizaremos la versión 2 de AngularJS. Y para ello, tenemos dos opciones. La primera es cargar la biblioteca de un CDN (Content Delivery Network). La ventaja de cargarlo de un CDN es que es un servidor que está altamente optimizado y la carga será mucho más rápida. La desventaja es que dependemos de una conexión a internet. Habiendo encontrado un CDN que nos guste, cargamos la biblioteca de Angular. Yo elegí la de google developers. Y nuestro encabezado de nuestra página HTML quedará algo similar a:

Sin, embargo, aún recargando nuestra página, seguirá sin “compilar” el código. Esto es porque aunque la biblioteca haya sido incluida, todavía no le hemos indicado que nuestra página es una aplicación de AngularJS. AngularJS nos permite que toda nuestra página sea una aplicación SPA o sólo una sección de nuestro HTML. Para éste ejemplo, vamos a indicarle que todo nuestra sección de body será nuestra aplicación.

Al refrescar la página finalmente se «compilará» y ejecutará  nuestro código. Y ahora aparecerá de manera correcta.

Veamos otra forma de cargar la biblioteca de angular con la ayuda de bower. Bower es un manejador de dependencias. Con él, podemos dejar nuestras dependencias de la aplicación afuera de la misma. Cambiemos entonces nuestro ejemplo para cargar AngularJS de manera local. Lo primero es (teniendo instalado bower en nuestro sistema) instalar nuestras dependencias. Si abrimos nuestro archivo bower.json, veremos un nodo de dependencias.

Y observamos que tenemos las dependencias de angular y angular-route. Abrimos entonces una línea de comandos y desde el directorio app, ejecutamos el siguiente comando: (bower install)

Con ello, tenemos una copia local de AngularJS. Cambiamos nuestra referencia a nuestra copia local dentro de bower_components:

Adicionalmente cambiamos el nombre de Bienvenida a Oscar:

Y recargamos el navegador.

Por último, vamos a crear un controlador y darle funcionalidad a nuestra vista. Para entender mejor el ejemplo explicamos el concepto Controlador y Vista en el contexto de SPA’s. La vista es simplemente una pantalla generada con HTML, perteneciente a algún paso en el flujo de nuestra aplicación. Un controlador es el pegamento entre una vista, los datos que podamos cargar dentro de ella y la funcionalidad, es decir, los eventos que se disparan dentro de la vista. En la vista colocaríamos un botón o liga, en el controlador escuchamos por dicho evento y en un servicio podríamos hacer alguna llamada a un servicio REST. Hagamos el ejemplo con simplemente la vista y el controlador.

En nuestro bloque de Javascript, después de  la línea 42, vamos a incluir código de AngularJS.

Con ello, hemos creado un módulo llamado app, y dentro de él, le hemos adicionado un controlador llamado WelcomeController. Dentro de nuestra aplicación, le hemos pasado el $scope y al $scope le hemos agregado una variable llamada name a la que podemos tener acceso dentro de la vista. Tratando de simplificar lo anteriormente explicado, en la línea 44 creamos una nueva instancia de AngularJS; a partir de la línea 45, definimos un controlador y se lo anexamos a la aplicación actual; por último, creamos una función anónima a la cual le pasamos la variable $scope y dicha función anónima se ejecutará al momento de cargar dicho controlador. Cada atributo (en este caso name) y acción anexada a dicho scope, estará disponible en la vista de dicho controlador.

Sólo nos hace falta indicarle a AngularJS que la vista va a ir conectada con dicho controlador. Lo vamos a hacer con la directiva ngController y cambiando la directiva ngApp que habíamos utilizado al principio del ejercicio:

Hemos cambiado la línea 27 para incluir la variable que le agregamos al scope. También le indicamos a angular que el módulo que vamos a utilizar es el módulo llamado app:

Refrescamos en el navegador:

Por último agregamos un botón en la vista  y lo conectamos a la acción del controlador con la directiva ngClick:

Y dentro de nuestro controlador, creamos la misma acción (greetMe):

Finalmente recargamos el navegador:

Y al dar clic:

Nos muestra una alerta!

Con esto, vimos cómo conectar una acción (ngClick) a un método definido dentro de nuestro controlador. Como buena práctica, denotamos que el controlador se llamará NombreController. En este ejemplo nuestro controlador se llama WelcomeController. Adicionalmente, la norma en AngularJS es que a cada vista le corresponde un controlador.

Si quieren seguir aprendiendo de AngularJS los invitamos a nuestro próximo curso de AngularJS el 15 de Noviembre.