PDF de programación - Manual de AngularJS

Manual de
AngularJS

Este es un manual que nos introduce en el framework Javascript AngularJS, un conjunto de
librerías de código abierto que nos sirven para hacer aplicaciones web avanzadas del lado del
cliente. Es ideal para hacer aplicaciones de negocio y aplicaciones de gestión que se
despliegan en una única página.
Usa el patrón de diseño habitualmente encontrado en el desarrollo web MVC, aunque en una
variante llamada a veces MV* y a veces MVVM. Esto, junto con otras herramientas
disponibles en Angular nos permite un desarrollo ordenado, sencillo de realizar y sobre todo
más fácil de mantener en un futuro.
AngularJS está apoyado por Google y cada día más desarrolladores están adoptándolo, lo que
nos da una idea del prometedor futuro de la librería.

Autores del manual

Este manual ha sido realizado por los siguientes colaboradores de DesarrolloWeb.com:
Alberto Basalo
Alberto Basalo es experto en
Javascript, AngularJS y otras
tecnologías para la web. Director de
Ágora Binaria, creadores de
Docuralia. Programador, analista y
arquitecto de software.
http://lainiciativamean.org/
(8 capítulos)

Miguel Angel Alvarez
Miguel es fundador de
DesarrolloWeb.com y la plataforma de
formación online EscuelaIT. Comenzó
en el mundo del desarrollo web en el
año 1997, transformando su hobby en
su trabajo.
http://www.desarrolloweb.com
(13 capítulos)

Pedro Hurtado
Amante de las novedades, defensor de
la comunidad. Compartir es la fuente
de la Sabiduria. Desarrollador en .Net,
Nodejs, Angular convencido y porque
no el resto, como G
http://geeks.ms/blogs/phurtado/
(1 capítulo)

Xavier Jorge Cerdá
Xavier, conocido como Xavi Paper, es
CTO en Ambiental Intelligence &
Interaction, como desarrollador es
especialista en tecnologías Microsoft y
en Javascript.
http://geeks.ms/blogs/xavipaper/
(1 capítulo)

Manual de AngularJS – http://www.desarrolloweb.com/manuales/manual-angularjs.html
© Los manuales de DesarrolloWeb.com tienen el copyright de sus autores, no reproducir sin autorización

Página 1 de 81

Parte 1:
Introducción a
AngularJS

Esta es una introducción de manera conceptual al framework Javascript AngularJS.
Explicamos por qué cada vez tiene más importancia el desarrollo de aplicaciones
web con alta carga de Javascript y por qué son esenciales este tipo de librerías
para una programación más sencilla, rápida y de fácil mantenimiento.
Completaremos la introducción con una práctica en la que podremos experimentar
con un primer ejemplo en Angular.

1.1.- Por qué AngularJS
Cómo los frameworks Javascript en general y AngularJS en concreto nos sirven para
solucionar las necesidades actuales de la informática, en cuanto a desarrollo multiplataforma
de aplicaciones grandes o enormes que se asemejan a las de escritorio.

Con este artículo comenzamos una serie dedicada a AngularJS, el framework Javascript MV* que nos permite un
desarrollo rápido y potente de aplicaciones web basadas en Javascript del lado del cliente. AngularJS es un conjunto de
librerías apoyadas por Google que tiene un futuro muy prometedor y que en estos momentos se encuentra en boca de
todos. No se trata de una moda pasajera, sino de una tecnología que por su utilidad y características ha venido para
quedarse.
A lo largo de varios artículos nos iremos introduciendo en este framework, de una manera bastante práctica. Sin
embargo vamos a comenzar con una introducción más teórica y retrospectiva que nos haga entender el porqué de la
proliferación de frameworks Javascript y el motivo por el que Angular es una apuesta segura entre sus competidores.

Manual de AngularJS – http://www.desarrolloweb.com/manuales/manual-angularjs.html
© Los manuales de DesarrolloWeb.com tienen el copyright de sus autores, no reproducir sin autorización

Página 2 de 81

Nota: Esta es una transcripción libre de la charla de Alberto Basalo que nos ofreció en abierto en un webinar de DesarrolloWeb.com /

EscuelaIT. El título de esta primera parte que ahora te resumimos es "Desarrollo de aplicaciones de negocio y los retos y soluciones de

2014". Al final del artículo podrás ver el vídeo de la charla.

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

1.1.2.- El reto hoy

Hoy la situación ya no es la que se describe anteriormente, sino que el panorama ha cambiado mucho. Por un lado el
abaratamiento de las comunicaciones hace que aparezcan grandes centros de proceso de datos que nos facilitan el
acceso a tecnología de primer orden, lo que se llama la nube. Ahora cualquier empresa, incluso las más pequeñas, tienen
la posibilidad de acceder a servidores de aplicaciones.
Se ha acabado la "tiranía de Windows": hoy existen varios sistemas operativos y se usan para todo tipo de cosas. Los
Mac ya no los usan solamente los diseñadores, los Linux no son terreno exclusivo de los desarrolladores, sino que
cualquier persona usa esos sistemas para todo tipo de tareas. Los desarrolladores no pueden centrarse en un único
sistema y limitar el servicio a las personas de determinada plataforma.
La cosa no queda ahí, puesto que ya no solo hablamos de ordenadores de escritorio y portátiles, además tenemos la
tecnología móvil y los dispositivos como tablets. Yendo todavía un poco más allá tenemos los televisores inteligentes,

Manual de AngularJS – http://www.desarrolloweb.com/manuales/manual-angularjs.html
© Los manuales de DesarrolloWeb.com tienen el copyright de sus autores, no reproducir sin autorización

Página 3 de 81

las Google Glass y al final de todo, el "Internet of Things".
Esta es la foto actual, que es muy distinta a la de las últimas décadas. Tenemos la nube con sus innumerables
posibilidades y tenemos una infinita gama de ordenadores y dispositivos a los que atender.

1.1.3.- ¿En qué programar?

A toda la situación relatada anteriormente le tenemos que sumar una interminable lista de necesidades en el campo de la
informática y, por supuesto, tecnologías y lenguajes que nos sirven para resolverlas.
¿Programo para la web o para el escritorio? ¿realizo desarrollo nativo o multiplataforma? La industria te da soluciones y
aporta todo tipo de alternativas, Java, .net, Python, RoR, Objective-C y otros más arcaicos como Cobol, pero es
inevitable plantearse cuál de ellos es más adecuado para resolver los problemas.

1.1.4.- HTML5 + JS

Si quieres realizar un desarrollo que se adapte a todo tipo de sistemas y dispositivos que puedan llegar a aparecer, una
solución es buscar algo que sea común a todos los sistemas y buscar algo que tengas seguridad que lo van a entender
todos.
Existe un consenso en el mundo de la tecnología de dar soporte a HTML5 y Javascript. La situación actual y la
industria nos hace pensar que estos lenguajes estarán disponibles en todo sistema donde circule un bit. Por ello,
podemos ver a estas tecnologías de estándares abiertos como un caballo ganador.
Eso sí, HTML5 + Javascript compiten con las soluciones nativas y en términos de rendimiento es muy difícil que
puedan llegar a equipararse. El lenguaje nativo, además, siempre tendrá mayor facildad de acceso a las características
específicas y funcionalidades del dispositivo.
También compite con los lenguajes más clásicos como C, PHP, Java donde hay ya muchísimo trabajo ya realizado en
forma de librerías disponibles para los programadores. Esta situación está cambiando, pero hay que observar que hasta
hace poco era complicado hacer grandes programas con Javascript, pues el lenguaje servía para bien poco. Con la
llegada de HTML5 y las diversas API se ha extendido mucho y se ha hecho mucho más poderoso, pero todavía faltaba
mucho terreno para que Javascript se considerase un lenguaje robusto, capaz de cumplir las necesidades de aplicaciones
grandes.

1.1.5.- AngularJS y otros frameworks

Recientemente han aparecido una oleada de sistemas que han situado Javascript en otro nivel. AngularJS es uno de
ellos, pero están otros muchos como BackboneJS o EmberJS. Son los frameworks que vienen a aportar herramientas y
patrones de diseño con los que Javascript se convierte en un lenguaje capaz de servir como motor de aplicaciones
enormes.
Y tiene todo el sentido que sea así. Hoy los ordenadores modernos, por muy modestos que sean, son capaces de
procesar con velocidad ciertas cosas. Son capaces de recibir simples datos y "cocinarse" ellos mismos el HTML para
visualizarlos a base de plantillas. Antes el servidor era el que tenía que enviar el HTML completo al cliente, ahora la
tendencia es que solo envíe los datos y que el cliente (navegador o cualquier otro sistema d