> Manuales > Manual de AngularJS

Descripción general sobre AngularJS, el framework Javascript, así como los principales componentes que tiene y los conceptos que debemos conocer antes de poner manos en el código.

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.

Nota: Este artículo es una transcripción de la exposición de Alberto Basalo en DesarrolloWeb.com / EscuelaIT que se emitió en abierto por webinar. Al pie del texto encontrarás un vídeo de esta charla. El bloque anterior de esta ponencia la hemos publicado ya en el artículo "Por qué 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.

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).

Nota: Las SPA o "Aplicaciones de una sola página", son sitios web donde los usuarios perciben una experiencia similar a la que se tiene con las aplicaciones de escritorio. En este tipo de sitios la página no se recarga, no existe una navegación de una página a otra totalmente diferente, sino que se van intercambiando las "vistas". Técnicamente podríamos decir que, al interactuar con el sitio, el navegador no recarga todo el contenido, sino únicamente vistas dentro de la misma página.

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.

Nota: Por ese motivo por el cual en AngularJS tienes unos modelos un poco diferentes, algunos autores dicen que el patrón que utiliza el framework es el MVVM Model-View-View-Model. En resumen, el modelo de la vista son los datos más los datos adicionales que necesitas para mostrarlos adecuadamente.

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.

Es importante señalar aquí, aunque se volverá a incidir sobre ese punto, que nunca jamás se deberá acceder al DOM desde la parte del Javascript. Es un pecado mortal ya que esa parte debe ser programada de manera agnóstica, sin tener en cuenta la manera en la que se van a presentar los datos.

En medio tendremos el denominado Scope, que como decimos representa al modelo en Angular. En resumen no es más que un objeto Javascript el cual puedes extender creando propiedades que pueden ser datos o funciones. Nos sirve para comunicar desde la parte del HTML a la parte del Javascript y viceversa. Es donde se produce la "magia" en Angular y aunque esto no sea del todo cierto, a modo de explicación para que se entienda algo mejor, podemos decir que AngularJS se va a suscribir a los cambios que ocurran en el scope para actualizar la vista. Y al revés, se suscribirá a los cambios que ocurran en la vista y con eso actualizará el scope.

En el siguiente artículo comenzaremos ya con código, así que los impacientes tendrán ya sus deseos hechos realidad.

Puedes ver el vídeo de esta parte de la presentación sobre Qué es AngularJS.

Alberto Basalo

Alberto Basalo es experto en Angular y otras tecnologías basadas en Javascript,...

Manual