AngularJS (Nuevo framework de JavaScript).

¿Qué es AngularJS?

AngularJS es Javascript. Es un proyecto de código abierto, realizado en Javascript que contiene un conjunto de librerías útiles para el desarrollo de aplicaciones web y propone una serie de patrones de diseño para llevarlas a cabo. En pocas palabras, es lo que se conoce como un framework para el desarrollo, en esta caso sobre el lenguaje Javascript con programación del lado del cliente.

Puedes encontrar el proyecto de AngularJS en su propio sitio web: AngularJS, Superheroic JavaScript MVW Framework. Al ser un proyecto de código abierto cualquier persona con un poco de curiosidad echar un vistazo con profundidad y ver cómo se ha escrito, incluso admiten colaboraciones de desarrolladores que quiera aportar cosas.

Un poco de historia

"El software sigue al hardware". Esta es una afirmación que nos indica que programamos para aquellas máquinas en las que vamos a ejecutar los programas. Puede resultar obvio, pero como ejemplo se puede señalar que no vamos a programar para las "Google Glass" si aun no las han creado, o si aun no han liberado el SDK. Cuando empezó la informática en los años 60 existían ordenadores arcaicos y como programadores estabas limitado a las posibilidades de éstos.

Conforme avanzó el desarrollo de la informática aparecieron otros ordenadores. Al principio no estaban conectados entre sí ya que no existían las redes locales, ni mucho menos Internet. Como no había redes estabas limitado a lo que ocurría dentro de esa máquina y quizás los programadores tenían una vida más sencilla: estas limitaciones provocaban que no tuvieran que preocuparse por ciertas cosas. Incluso las opciones para crear los programas -tecnologías y lenguajes- no eran demasiadas, al contrario, quizás en tu sistema operativo estabas obligado a trabajar con un lenguaje o un par de ellos nada más.

Luego aparecieron las redes, apareció Internet y los ordenadores comenzaron a conectarse entre sí. Existen servidores y terminales que ya no son tontos, pero estamos trabajando con lenguajes sencillos, como HTML -al principio ni existía CSS- y ya acercándose al final del milenio aparecen lenguajes como Javascript capaces de hacer algunas cosas sencillas.

 

Para que es AngularJS?

Mejoras del HTML

Este Javascript pretende que los programadores mejoren el HTML que hacen. Que puedan producir un HTML que, de manera declarativa, genere aplicaciones que sean fáciles de entender incluso para alguien que no tiene conocimientos profundos de informática. El objetivo es producir un HTML altamente semántico, es decir, que cuando lo leas entiendas de manera clara qué es lo que hace o para qué sirve cada cosa.

Lógicamente, AngularJS viene cargado con todas las herramientas que los creadores ofrecen para que los desarrolladores sean capaces de crear ese HTML enriquecido. La palabra clave que permite ese HTML declarativo en AngularJS es "directiva", que no es otra cosa que código Javascript que mejora el HTML. Puedes usar el que viene con AngularJS y el que han hecho terceros desarrolladores, puesto que muchas personas están contribuyendo con pequeños proyectos -independientes del propio framework- para enriquecer el panorama de directivas disponibles. Hasta este punto serás un "consumidor de directivas", y finalmente cuando vayas tomando experiencia serás capaz de convertirte en un "productor de directivas", enriqueciendo tú mismo las herramientas para mejorar tu propio HTML.

 

¿Por que usan el AngualarJS?

Promueve patrones de diseño adecuados para aplicaciones web

Angular promueve y usa patrones de diseño de software. En concreto implementa lo que se llama MVC, aunque en una variante muy extendida en el mundo de Javascript que luego comentaremos con más detalle. Básicamente estos patrones nos marcan la separación del código de los programas dependiendo de su responsabilidad. Eso permite repartir la lógica de la aplicación por capas, lo que resulta muy adecuado para aplicaciones de negocio y para las aplicaciones SPA (Single Page Aplication).

AngularJS a vista de pájaro

Ahora vamos a hacer un breve recorrido para nombrar y describir con unos pequeños apuntes aquellos elementos y conceptos que te vas a encontrar dentro de AngularJS.

Primeramente tenemos que hablar sobre el gran patrón que se usa en Angular, el conocido Modelo, Vista, Controlador.

• Vistas: Será el HTML y todo lo que represente datos o información.
• Controladores: Se encargarán de la lógica de la aplicación y sobre todo de las llamadas "Factorías" y "Servicios" para mover datos contra servidores o memoria local en HTML5.
• Modelo de la vista: En Angular el "Modelo" es algo más de aquello que se entiende habitualmente cuando te hablan del MVC tradicional, osea, las vistas son algo más que el modelo de datos. En modo de ejemplo, en aplicaciones de negocio donde tienes que manejar la contabilidad de una empresa, el modelo serían los movimientos contables. Pero en una pantalla concreta de tu aplicación es posible que tengas que ver otras cosas, además del movimiento contable, como el nombre de los usuarios, los permisos que tienen, si pueden ver los datos, editarlos, etc. Toda esa información, que es útil para el programador pero que no forma parte del modelo del negocio, es a lo que llamamos el "Scope" que es el modelo en Angular.

Además del patrón principal, descrito hasta ahora tenemos los módulos:

Módulos: La manera que nos va a proponer AngularJS para que nosotros como desarrolladores seamos cada vez más ordenados, que no tengamos excusas para no hacer un buen código, para evitar el código espaguetti, ficheros gigantescos con miles de líneas de código, etc. Podemos dividir las cosas, evitar el infierno de las variables globales en Javascript, etc. Con los módulos podemos realizar aplicaciones bien hechas, de las que un programador pueda sentirse orgulloso y sobre todo, que nos facilite su desarrollo y el mantenimiento.

Dos "mundos" en AngularJS

Ahora tenemos que examinar AngularJS bajo otra perspectiva, que nos facilite entender algunos conceptos y prácticas habituales en el desarrollo. Para ello dividimos el panorama del framework en dos áreas.

• Parte del HTML: Es la parte declarativa, con las vistas, así como las directivas y filtros que nos provee AngularJS, así como los que hagamos nosotros mismos o terceros desarrolladores.
• Parte Javascript puro: Que serán los controladores, factorías y servicios.

 

¿Como se usa el AngularJS?

Qué necesitas para desarrollar con AngularJS

Lo único que necesitas para desarrollar con AngularJS es un editor de texto y un navegador. Así de sencillo, seguramente todo el mundo tenga ya configurado su editor preferido, así que te puedes saltar si quieres estos siguientes párrafos. Para los que no tengan claro esto, os dejo un par de comentarios.

• Editor de código: puede ser cualquiera que estés acostumbrado a usar, no necesitas cambiarlo para programar con Angular. Lo que es interesante es que sea un editor para programadores, que te permita diversas ayudas al escribir el código, coloreado de sintaxis, ayudas contextuales, etc. Notepad++, Sublime Text, Komodo Edit, Brackets, etc. Cualquiera es bueno. Si estás acostumbrado a IDEs más complejos como Eclipse o PhpStorm, puedes quedarte también con ellos.
• Navegador: Puedes usar cualquier navegador para ver un desarrollo basado en Angular. Generalmente tendrás incluso varios navegadores para probar tu página en cada uno de ellos y comprobar que todo está en orden. Solo te recomendamos tener a Google Chrome entre tu batería de navegadores, pues luego hablaremos de una extensión que existe para éste que te permite examinar y depurar páginas donde AngularJS está trabajando.

Descarga de AngularJS

Si quieres trabajar con AngularJS tienes que incluir el script del framework en tu página. Esto lo puedes hacer de varias maneras, o bien te descargas la librería por completo y la colocas en un directorio de tu proyecto, o bien usas un CDN para traerte la librería desde un servidor remoto. En principio es indiferente a nivel didáctico, así que nosotros vamos a comenzar del modo más sencillo, que es utilizar el CDN.

Accedes a la página de AngularJS: https://angularjs.org/

Pulsas el botón de descarga y encontrarás diversas opciones. Escoges la versión del framework (si es que te lo permite) y que esté minimizada (minified). Luego encontrarás un campo de texto donde está la URL de la librería (esa URL está marcada con las siglas "CDN" al lado). Ya sabes que el CDN te ofrece un contenido, en este caso un script Javascript, que está alojado en otro servidor, pero que lo puedes usar desde tu página para mejorar la entrega del mismo.

Será algo como https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js aunque todo depende de la versión que haya en el momento en el que tú leas esta guía de iniciación.

Incluir AngularJS en una página web

Una vez tienes tu CDN puedes incluir el script de Angular en la página con la etiqueta SCRIPT. Ese script lo puedes colocar en el HEAD o bien antes del final del BODY, en principio no habría diferencias en lo relativo a la funcionalidad, pero sí hay una pequeña mejora si lo colocas antes de cerrar el cuerpo.

Simplemente, si lo colocas en el HEAD estás obligando a que tu navegador se descargue la librería de AngularJS, retrasando quizás la descarga de áreas de la página con contenido. Si lo colocas antes de cerrar el BODY facilitas la vida a tu navegador, y por añadido a tus usuarios, pues podrá descargar todo el HTML, ir renderizando en la pantalla del usuario los contenidos sin entretenerse descargando AngularJS hasta que sea realmente necesario.

 

Ejemplo de AngularJS

Hay un paso más para dejar lista una página donde quieras usar AngularJS. Es simplemente colocar la directiva ng-app en la etiqueta que englobe la aplicación. Más adelante hablaremos con más detalle de las directivas y daremos algunos tips para usarlas mejor. Por ahora puedes quedarte simplemente con la necesidad de informar a AngularJS del contenedor HTML donde va a desplegar su "magia".

Típicamente pondrás ng-app en la etiqueta HTML de inicio del documento.

Hola Mundo en AngularJS

Ahora vamos a poner algo de carne en el asador y vamos a observar la potencia de AngularJS con muy poco código. Realmente, como observarás, se trata de cero código (Javascript).

Observa que en el campo de texto hemos usado ng-model y le hemos asignado un valor. Ese ng-model es otra directiva que nos dice que ese campo de texto forma parte de nuestro modelo y el valor "nombre" es la referencia con la que se conocerá a este dato. Insisto en que más adelante hablaremos con detalle sobre estos datos y veremos nuevos ejemplos. Ahora vamos a crear un elemento de tu página donde volcaremos lo que haya escrito en ese campo de texto.

Como ves, dentro del H1 tenemos {{nombre}}. Esas dobles llaves nos sirven para indicarle a AngularJS que lo que hay dentro es una expresión. Allí podemos colocar cosas (código) para que Angular resuelva por nosotros. En este caso estamos colocando simplemente el nombre del modelo o dato que queremos mostrar.

Código completo

Nuestro ejemplo es perfectamente funcional. Si estabas esperando que escribiésemos algo de Javascript, lamento decepcionarte. La potencia de AngularJS es justamente que muchas cosas se pueden hacer en el documento HTML simplemente extendiendo sus posibilidades a través de directivas y expresiones. Claro que para que esto funcione, por debajo el framework hace muchas cosas, pero de momento no es el caso extenderse más. Puedes ver el código completo a continuación. Puedes copiarlo y pegarlo tal cual en tu editor de texto, en un nuevo archivo .html y debería de funcionarte sin ningún problema.

De momento es interesante que observes que sin necesidad de escribir código Javascript AngularJS es capaz de implementar una bonita funcionalidad. Solo piensa el código que necesitarías con Javascript "nativo" para hacer este ejercicio o usando otros sistemas como el popular jQuery.

 

Fuentes de Informacion

AngularJS
https://angularjs.org/

Angular
http://www.w3schools.com/angular/

Manual AngularJS
http://www.desarrolloweb.com/manuales/manual-angularjs.html

Ejemplos AngularJS
https://carlosazaustre.es/blog/empezando-con-angular-js/

Proximamente tendremos en nuestra seccion de manuales como aprender a usar AngularJS.