Manual de AngularJS

http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 1 de 129

Manual de AngularJS

Introduccin: Manual de AngularJS

Este es un manual que nos introduce en el framework Javascript AngularJS, un conjunto de libreras de
cdigo abierto que nos sirven para hacer aplicaciones web avanzadas del lado del cliente. Es ideal para hacer
aplicaciones de negocio y aplicaciones de gestin que se despliegan en una nica pgina.
Usa el patrn de diseo 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 ms fcil de mantener en un futuro.
AngularJS est apoyado por Google y cada da ms desarrolladores estn adoptndolo, lo que nos da una
idea del prometedor futuro de la librera.
Encuentras este manual online en:
http://desarrolloweb.com/manuales/manual-angularjs.html

http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 2 de 129

Manual de AngularJS

Autores del manual

Las siguientes personas han participado como autores escribiendo artculos de este manual.

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formacin online
EscuelaIT. Comenz en el mundo del desarrollo web en el ao 1997,
transformando su hobby en su trabajo.

Alberto Basalo
Alberto Basalo es experto en Angular y otras tecnologas basadas en Javascript,
como NodeJS y MongoDB. Es director de gora Binaria, empresa dedicada al
desarrollo de aplicaciones y a la formacin a travs de Academia Binaria.

Pedro Hurtado
Amante de las novedades, defensor de la comunidad. Compartir es la fuente de
la Sabiduria. No te cierres en tu mundo y da lo mismo tus creencias. Estamos en
mundo abierto. Desarrollador en .Net, Nodejs, Angular convencido y porque
no el resto, como G

Xavier Jorge Cerd

http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 3 de 129

Manual de AngularJS

Xavier, conocido entre sus amigos como Xavi Paper, es CTO en Ambiental
Intelligence & Interaction, como desarrollador es especialista en tecnologas
Microsoft y en Javascript, impulsor del framework AngularJS.

http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 4 de 129

Manual de AngularJS

Introduccin a AngularJS
Esta es una introduccin de manera conceptual al framework Javascript AngularJS. Explicamos por qu
cada vez tiene ms importancia el desarrollo de aplicaciones web con alta carga de Javascript y por qu son
esenciales este tipo de libreras para una programacin ms sencilla, rpida y de fcil mantenimiento.
Completaremos la introduccin con una prctica en la que podremos experimentar con un primer ejemplo
en Angular.

Por qu AngularJS
Cmo los frameworks Javascript en general y AngularJS en concreto nos sirven para solucionar las
necesidades actuales de la informtica, en cuanto a desarrollo multiplataforma de aplicaciones
grandes o enormes que se asemejan a las de escritorio.
Con este artculo comenzamos una serie dedicada a AngularJS, el framework Javascript MV* que nos
permite un desarrollo rpido y potente de aplicaciones web basadas en Javascript del lado del cliente.
AngularJS es un conjunto de libreras 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 tecnologa
que por su utilidad y caractersticas ha venido para quedarse.
A lo largo de varios artculos nos iremos introduciendo en este framework, de una manera bastante prctica.
Sin embargo vamos a comenzar con una introduccin ms terica y retrospectiva que nos haga entender el
porqu de la proliferacin de frameworks Javascript y el motivo por el que Angular es una apuesta segura
entre sus competidores.

Nota: Esta es una transcripcin libre de la charla de Alberto Basalo que nos ofreci en abierto en un
webinar de DesarrolloWeb.com / EscuelaIT. El ttulo de esta primera parte que ahora te resumimos es
"Desarrollo de aplicaciones de negocio y los retos y soluciones de 2014". Al final del artculo podrs ver
el vdeo de la charla.

http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 5 de 129

Manual de AngularJS

Un poco de historia
"El software sigue al hardware". Esta es una afirmacin que nos indica que programamos para aquellas
mquinas en las que vamos a ejecutar los programas. Puede resultar obvio, pero como ejemplo se puede
sealar 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 informtica en los aos 60 existan ordenadores arcaicos y como
programadores estabas limitado a las posibilidades de stos.
Conforme avanz el desarrollo de la informtica aparecieron otros ordenadores. Al principio no estaban
conectados entre s ya que no existan las redes locales, ni mucho menos Internet. Como no haba redes
estabas limitado a lo que ocurra dentro de esa mquina y quizs los programadores tenan una vida ms
sencilla: estas limitaciones provocaban que no tuvieran que preocuparse por ciertas cosas. Incluso las
opciones para crear los programas -tecnologas y lenguajes- no eran demasiadas, al contrario, quizs en tu
sistema operativo estabas obligado a trabajar con un lenguaje o un par de ellos nada ms.
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 exista CSS- y ya acercndose al final del milenio aparecen lenguajes como Javascript capaces
de hacer algunas cosas sencillas.

El reto hoy
Hoy la situacin 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 tecnologa de primer orden, lo que se llama la nube. Ahora cualquier
empresa, incluso las ms pequeas, tienen la posibilidad de acceder a servidores de aplicaciones.
Se ha acabado la "tirana de Windows": hoy existen varios sistemas operativos y se usan para todo tipo de
cosas. Los Mac ya no los usan solamente los diseadores, 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 porttiles, adems
tenemos la tecnologa mvil y los dispositivos como tablets. Yendo todava un poco ms all tenemos los
televisores inteligentes, 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 dcadas. Tenemos la nube con sus
innumerables posibilidades y tenemos una infinita gama de ordenadores y dispositivos a los que
atender.

En qu programar?
A toda la situacin relatada anteriormente le tenemos que sumar una interminable lista de necesidades en el
campo de la informtica y, por supuesto, tecnologas 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 ms arcaicos
como Cobol, pero es inevitable plantearse cul de ellos es ms adecuado para resolver los problemas.
http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 6 de 129

Manual de AngularJS

HTML5 + JS
Si quieres realizar un desarrollo que se adapte a todo tipo de sistemas y dispositivos que puedan llegar a
aparecer, una solucin es buscar algo que sea comn a todos los sistemas y buscar algo que tengas seguridad
que lo van a entender todos.
Existe un consenso en el mundo de la tecnologa de dar soporte a HTML5 y Javascript. La situacin
actual y la industria nos hace pensar que estos lenguajes estarn disponibles en todo sistema donde circule
un bit. Por ello, podemos ver a estas tecnologas de estndares abiertos como un caballo ganador.
Eso s, HTML5 + Javascript compiten con las soluciones nativas y en trminos de rendimiento es muy
difcil que puedan llegar a equipararse. El lenguaje nativo, adems, siempre tendr mayor facildad de acceso
a las caractersticas especficas y funcionalidades del dispositivo.
Tambin compite con los lenguajes ms clsicos como C, PHP, Java donde hay ya muchsimo trabajo ya
realizado en forma de libreras disponibles para los programadores. Esta situacin est cambiando, pero hay
que observar que hasta hace poco era complicado hacer grandes programas con Javascript, pues el lenguaje
serva para bien poco. Con la llegada de HTML5 y las diversas API se ha extendido mucho y se ha hecho
mucho ms poderoso, pero todava faltaba mucho terreno para que Javascript se considerase un lenguaje
robusto, capaz de cumplir las necesidades de aplicaciones grandes.

AngularJS y otros frameworks

Recientemente han aparecido una oleada de sistemas que han situado Javascript en otro nivel. AngularJS es
uno de ellos, pero estn otros muchos como BackboneJS o EmberJS. Son los frameworks que vienen a
aportar herramientas y patrones de diseo 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 tena que enviar el
HTML completo al cliente, ahora la tendencia es que solo enve los datos y que el cliente (navegador o
cualquier otro sistema donde desees ver esos datos) sea el que los trate y los muestre debidamente.
Esto ha producido que una parte de la lgica de maquetado y de presentacin de la informacin se haya
trasladado del servidor hacia los clientes. La ventaja obvia es que el servidor se ha descargado de trabajo,
puesto que simplemente tiene que enviar los datos a travs de JSON al cliente y es ste el que se encargar
de producir el HTML que sea necesario. Pero no es solo una mejora en relacin al servidor en trminos de
procesamiento, tambin en trminos de bits, porque es ms ligero transferir datos simples que el HTML
completo para mostrarlos.
En definitiva, el servidor ha repartido la carga de trabajo que sola recaer sobre l entre todos los clientes
que se conectan a su servicio. Pero la mejora no se queda solamente en el servidor, sino que el usuario
tambin percibe un mejor desempeo, puesto que las acciones que realiza contra el servidor tienen una
respuesta ms rpida. Con ello poco a poco las aplicaciones cliente/servidor tienen un desempeo ms
parecido a las aplicaciones de escritorio. El usuario es el rey y demanda aplicaciones que sean rpidas y no le
hagan esperar y eso se lo dan los frameworks como AngularJS.
Al programador adems le facilitan las cosas, no solo por disponer de un conjunto de libreras, sino porque
http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 7 de 129

Manual de AngularJS

los frameworks nos traen un conjunto de paradigmas y patrones que facilitan el desarrollo del software y
sobre todo su mantenimiento. Nos referimos principalmente al llamado MVC, que es la separacin del
cdigo en diferentes responsabilidades. Ahora cada parte del cdigo debemos situarlo en un lugar
determinado, y ese orden nos facilita que los desarrollos sean ms manejables. Sobre todo esa mejora
permite que en un futuro puedas "meter mano" al software para mantenerlo cuando sea necesario. Todo
redunda en la calidad del cdigo, lo que es indispensable para los proyectos y los programadores.

Potente, sencillo y extensible

Adems hay un ecosistema de herramientas alrededor de los frameworks y no solo aquellas que estn
incorporadas en las libreras del propio AngularJS o cualquiera de sus competidores, sino una serie de
servicios web y libreras de terceros que nos facilitan una enorme gama de objetivos.
Por poner dos ejemplos tenemos Apache Cordova, que es una librera para servir de puente a HTML5/JS
hacia las caractersticas y funcionalidades de los dispositivos mviles. O sistemas como AngularFire que es
un "backend as a service", que permite crear tu propia API y que ellos se ocupen de crear todos los sistemas
para la persistencia de la informacin y la entrega de los JSON.

AngularJS mejora el HTML para crear aplicaciones web

AngularJS y otros frameworks tienen adems la caracterstica de mejorar el HTML existente, facilitando el
desarrollo de aplicaciones. En este punto cabe recalcar la palabra "aplicaciones" puesto que este tipo de
herramientas son adecuadas para realizar las llamadas "aplicaciones de gestin" o "aplicaciones de negocio".
Es importante esta mencin porque AngularJS no es adecuado para resolver todo tipo de proyectos, o al
menos no te facilitar especialmente ciertos desarrollos. Incluso por sus caractersticas habr necesidades
que ni siquiera sea adecuadas realizar en HTML5, como posiblemente un videojuego con grficos
avanzados, donde sera ms adecuado una aplicacin nativa (aunque esto en el futuro pueda cambiar).
Otro ejemplo es la realizacin de una aplicacin intensiva de SEO. En cuanto a posicionamiento orgnico
en buscadores el desarrollo con AngularJS, u otros frameworks Javascript, no es muy interesante porque el
HTML que reciben los clientes -o los bots del motor de bsqueda- est prcticamente vaco de contenido y
solo se rellena a posteriori por medio de solicitudes Ajax. Parece que Google est haciendo esfuerzos para
que esta situacin cambie y existen diversas soluciones a nivel de programacin que pueden paliar en parte
la carencia de SEO, pero lo cierto es que el desarrollo de la aplicacin se complica al aplicarlas.
En fin, AngularJS nos ofrece muchas facilidades para hacer aplicaciones web, aplicaciones de gestin o de
negocio, aplicaciones que funcionan en dispositivos y que tienen un rendimiento muy similar a las
nativas e incluso aplicaciones de escritorio con un frontal web, cada vez ms habituales.

Por qu Angular JS y no otros frameworks

En este sentido podra haber mucho que discutir entre partidarios de uno y otro framework, pero si
dejamos a un lado las preferencias personales de cada uno, por aquella tecnologa en la que haya apostado
en el pasado, AngularJS es objetivamente mejor en muchos sentidos.
Primero y ms importante es que con AngularJS requieres escribir menos cdigo que con otros frameworks.
Por ejemplo con respecto a BackboneJS hay muchas mejoras que son realmente crticas como el "doble
http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 8 de 129

Manual de AngularJS

bindign" que te permite que los distintos componentes de tu aplicacin estn al tanto de los cambios para
modificar su estado automticamente, sin necesidad de suscribirse a eventos y realizar otro tipo de acciones
por medio de lneas de cdigo. En este sentido hay tests objetivos que nos permiten ver que la misma
aplicacin hecha con AngularJS tiene sensiblemente menos cdigo que en BackboneJS y quizs con otros
frameworks pase lo mismo.
Segundo la comunidad. AngularJS tiene el apoyo de Google y una gran comunidad detrs. Las bsquedas de
AngularJS se han disparado mientras que las de otros frameworks no han mejorado o han cado. Esto
quiere decir en definitiva que encontrars ms documentacin y ms componentes de otros desarrolladores
para basar tu trabajo en ellos.
Hasta aqu el primer artculo de AngularJS, que ha sido un tanto general. Solo esperamos que te hayas
quedado con ganas de ms. En el siguiente post te explicaremos qu es AngularJS.
A continuacin encuentras la charla que ha servido de base para escribir este artculo, de Alberto Basalo.
Muy entretenida e interesante, capaz de abrirnos la mente y motivarnos a aprender AngularJS.

Para ver este vdeo es necesario visitar el artculo original en: http://desarrolloweb.com/articulos/porque-angularjs.html
Este artculo es obra de Alberto Basalo
Fue publicado por primera vez en 21/08/2014
Disponible online en http://desarrolloweb.com/articulos/por-que-angularjs.html

Qu es AngularJS
Descripcin 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 cdigo.
AngularJS es Javascript. Es un proyecto de cdigo abierto, realizado en Javascript que contiene un conjunto
de libreras tiles para el desarrollo de aplicaciones web y propone una serie de patrones de diseo 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 programacin 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 cdigo abierto cualquier persona con un poco de curiosidad echar un
vistazo con profundidad y ver cmo se ha escrito, incluso admiten colaboraciones de desarrolladores que
quiera aportar cosas.

Nota: Este artculo es una transcripcin de la exposicin de Alberto Basalo en DesarrolloWeb.com /

EscuelaIT que se emiti en abierto por webinar. Al pie del texto encontrars un vdeo de esta charla. El
bloque anterior de esta ponencia la hemos publicado ya en el artculo "Por qu AngularJS".

http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 9 de 129

Manual de 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 fciles de entender incluso para alguien que
no tiene conocimientos profundos de informtica. El objetivo es producir un HTML altamente semntico,
es decir, que cuando lo leas entiendas de manera clara qu es lo que hace o para qu sirve cada cosa.
Lgicamente, 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 cdigo Javascript que mejora el HTML.
Puedes usar el que viene con AngularJS y el que han hecho terceros desarrolladores, puesto que muchas
personas estn contribuyendo con pequeos proyectos -independientes del propio framework- para
enriquecer el panorama de directivas disponibles. Hasta este punto sers un "consumidor de directivas", y
finalmente cuando vayas tomando experiencia sers capaz de convertirte en un "productor de directivas",
enriqueciendo t mismo las herramientas para mejorar tu propio HTML.

Promueve patrones de diseo adecuados para aplicaciones web

Angular promueve y usa patrones de diseo 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 ms detalle.
Bsicamente estos patrones nos marcan la separacin del cdigo de los programas dependiendo de su
responsabilidad. Eso permite repartir la lgica de la aplicacin 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 pgina", 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 pgina no
se recarga, no existe una navegacin de una pgina a otra totalmente diferente, sino que se van
intercambiando las "vistas". Tcnicamente podramos decir que, al interactuar con el sitio, el navegador
no recarga todo el contenido, sino nicamente vistas dentro de la misma pgina.

AngularJS a vista de pjaro

Ahora vamos a hacer un breve recorrido para nombrar y describir con unos pequeos apuntes aquellos
elementos y conceptos que te vas a encontrar dentro de AngularJS.
Primeramente tenemos que hablar sobre el gran patrn que se usa en Angular, el conocido Modelo, Vista,
http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 10 de 129

Manual de AngularJS

Controlador.
Vistas: Ser el HTML y todo lo que represente datos o informacin.
Controladores: Se encargarn de la lgica de la aplicacin y sobre todo de las llamadas "Factoras"
y "Servicios" para mover datos contra servidores o memoria local en HTML5.
Modelo de la vista: En Angular el "Modelo" es algo ms de aquello que se entiende habitualmente
cuando te hablan del MVC tradicional, osea, las vistas son algo ms que el modelo de datos. En
modo de ejemplo, en aplicaciones de negocio donde tienes que manejar la contabilidad de una
empresa, el modelo seran los movimientos contables. Pero en una pantalla concreta de tu
aplicacin es posible que tengas que ver otras cosas, adems del movimiento contable, como el
nombre de los usuarios, los permisos que tienen, si pueden ver los datos, editarlos, etc. Toda esa
informacin, 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.

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

Adems del patrn principal, descrito hasta ahora tenemos los mdulos:
Mdulos: La manera que nos va a proponer AngularJS para que nosotros como desarrolladores seamos
cada vez ms ordenados, que no tengamos excusas para no hacer un buen cdigo, para evitar el cdigo
espaguetti, ficheros gigantescos con miles de lneas de cdigo, etc. Podemos dividir las cosas, evitar el
infierno de las variables globales en Javascript, etc. Con los mdulos podemos realizar aplicaciones bien
hechas, de las que un programador pueda sentirse orgulloso y sobre todo, que nos facilite su desarrollo y el
mantenimiento.

http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 11 de 129

Manual de AngularJS

Dos "mundos" en AngularJS

Ahora tenemos que examinar AngularJS bajo otra perspectiva, que nos facilite entender algunos conceptos y
prcticas 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 sern los controladores, factoras y servicios.

Es importante sealar aqu, aunque se volver a incidir sobre ese punto, que nunca jams se deber acceder
al DOM desde la parte del Javascript. Es un pecado mortal ya que esa parte debe ser programada de manera
agnstica, 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 ms 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 explicacin
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 revs, se suscribir a los cambios que ocurran en la vista y con eso
actualizar el scope.
En el siguiente artculo comenzaremos ya con cdigo, as que los impacientes tendrn ya sus deseos hechos
realidad.
Puedes ver el vdeo de esta parte de la presentacin sobre Qu es AngularJS.

Para ver este vdeo es necesario visitar el artculo original en: http://desarrolloweb.com/articulos/quees-angularjs-descripcion-framework-javascript-conceptos.html
Este artculo es obra de Alberto Basalo
Fue publicado por primera vez en 27/08/2014
Disponible online en http://desarrolloweb.com/articulos/que-es-angularjs-descripcion-framework-javascriptconceptos.html
http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 12 de 129

Manual de AngularJS

AngularJS Vs jQuery
Complementarias? Competidoras? Analizamos similitudes y diferencias de jQuery y AngularJS,
casos en los que sera ms aconsejable una u otra librera y una comparativa de cdigo, de un
mismo problema, resuelto con ambas herramientas.
No quiero comenzar a escribir sin explicar bien el ttulo de este artculo. Quien tenga alguna idea de
AngularJS quizs piense que hemos patinado al intentar enfrentarlo a jQuery pues son libreras con
filosofas diferentes, que sirven para resolver distintos tipos de problemas. En definitiva, las dos son para
endulzar el Javascript del lado del cliente, pero cada una es adecuada para un tipo de problemas. Sobre todo
esto hablaremos con bastante detalle a lo largo del artculo, para no causar confusin entre los lectores,
tanto noveles como experimentados. Unimos adems una comparativa de las filosofas de ambas
herramientas, reflejada en el cdigo de resolucin de un mismo problema, lo que nos ayudar a entender
mejor sus diferencias.
Dicho eso, aclaro que la eleccin del ttulo responde a sta es una duda habitual de las personas que se
interesan por Angular u otras libreras MV* de Javascript. Si t tienes la duda, o quieres entender mejor la
filosofa de AngularJS, puedes seguir leyendo. Si t ya conoces perfectamente las diferencias y no necesitas
saber ms, puedes saltarte este artculo y seguir tranquilamente por el siguiente del Manual de AngularJS.

Muchos de nosotros hemos entrado en el mundo de las libreras Javascript de la mano de jQuery. Incluso
hay tambin muchos desarrolladores que han entrado en el lenguaje Javascript aprendiendo jQuery. El caso
es que en el pasado lustro jQuery ha dominado el mundo del desarrollo del lado del cliente y sigue usndose
de manera muy habitual, hasta el punto de considerarse casi un estndar. Sin embargo, nuevas libreras
Javascript y frameworks como AngularJS van un paso ms all de donde se queda jQuery, aportando
muchas otras utilidades y patrones de diseo de software.
Despus de haber invertido tanto tiempo en el aprendizaje de jQuery, una de las preguntas que muchos nos
hacemos cuando conocemos AngularJS es Qu me queda de todo eso cuando me pase al desarrollo con
AngularJS? Qu pasa con jQuery? Sirven para hacer lo mismo? son competidores? complementarios?

Nota: Parte de este artculo es transcripcin de una parte de la presentacin sobre AngularJS que nos
ofreci en DesarrolloWeb.com Alberto Basalo. Adems adicionalmente hemos aadido una
comparativa entre el "Hola mundo" tpico de AngularJS con esta librera y el cdigo que deberas
emplear si usas jQuery.

http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 13 de 129

Manual de AngularJS

AngularJS y jQuery son dos libreras de alcances distintos

Si queremos entrar en esta discusin, y para no liar a aquellos desarrolladores con menos experiencia,
debemos decir que jQuery y AngularJS son libreras bien diferentes. El alcance y el tipo de cosas que se
hacen con una y otra librera son distintos.
jQuery es una librera que nos sirve para acceder y modificar el estado de cualquiera de los elementos de la
pgina. A travs de jQuery y los selectores de CSS (as como los selectores creados por el propio jQuery)
eres capaz de llegar a los elementos de la pgina, a cualquiera de ellos, y puedes leer y modificar sus
propiedades, suscribirte a eventos que ocurran en esos elementos, etc. Con jQuery podamos manejar
cualquier cosa que ocurra en esos elementos de una manera mucho ms cmoda que con Javascript "a pelo"
y compatible con la mayor gama de navegadores.
Sin embargo Angular pasa de ser una librera para convertirse en un framework de aplicaciones web. No
solo te permite una serie de funciones y mecanismos para acceder a los elementos de la pgina y
modificarlos, sino que tambin te ofrece una serie de mecanismos por los cuales extender el HTML, para
hacerlo ms semntico, incluso ahorrarte muchas lneas de cdigo Javascript para hacer las mismas cosas
que antes hacas con jQuery. Pero la principal diferencia y por la cual AngularJS toma la denominacin de
"framework", es que te marca una serie de normas y hbitos en la programacin, principalmente gracias al
patrn MVC implementado en AngularJS.

Nota: Para ms informacin puedes leerte los captulos iniciales del Manual de AngularJS, donde
aprenders ms sobre las caractersticas del framework.

jqLite dentro de AngularJS

"AngularJS se ha comido a jQuery". Dentro de AngularJS tienes una pequea implementacin de jQuery.
Todos hemos usado millones de veces jQuery y es una librera excelente porque nos facilita el acceso al
DOM y adems nos ofrece un API de funciones que son compatibles con todos los navegadores.
Eso mismo lo tienes dentro del script de AngularJS, por lo que si no lo deseas, no necesitas usar jQuery
para nada. Dentro de Angular tienes jqLite "jQuery Lite" que viene a ser una librera de acceso al DOM,
con la mnima funcionalidad necesaria.
Esto quiere decir que las directivas que trae AngularJS usan jQuery por debajo, o algo muy similar, un
subconjunto de jQuery. Por supuesto, cuando t programes tus propias directivas puedes usar la librera de
acceso al DOM que viene con AngularJS. Si esa pequea librera no te resulta suficiente y necesitas mayor
funcionalidad, nadie te impide usar el jQuery de verdad.
Si AngularJS detecta que ests usando jQuery, todo el tema de acceso al DOM lo har a travs de jQuery,
dejando su implementacin (jqLite) sin usar. Si detecta que no tienes jQuery, entonces pone en marcha su
propia librera de acceso al DOM.

Nota: Incluso jQuery puede traer mejoras de rendimiento con respecto a la misma funcionalidad que
viene en AngularJS. No es el caso ahora estudiar el rendimiento de una y otra librera sino entender sus
http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 14 de 129

Manual de AngularJS
diferencias. No obstante, a pesar de jQuery poder dar un poco ms de rendimiento en tiempo de
ejecucin, se notar solamente con trabajos intensivos y habra que tener en cuenta el tiempo de carga
de la librera adicional para comparar definitivamente usar Angulas a secas o Angular con jQuery.

Entonces uso jQuery dentro de AngularJS s o no?

S, puedes usarlo, aunque no es absolutamente necesario.
Sin embargo, debe quedar claro que el uso de jQuery debe quedar restringido a las vistas, filtros y creacin
de nuevas directivas, nunca al uso de factoras, servicios o controladores. Cuando una persona que viene de
jQuery y comienza a usar AngularJS es normal que caiga en costumbres y mecanismos a los que est
habituado con aquella librera. Por ejemplo, se corre el riesgo de querer acceder al DOM desde los
controladores y es algo que no se debe realizar bajo ningn concepto.
En ese sentido, para las personas que usan AngularJS y estn acostumbradas a jQuery, en un principio al
menos puede ser recomendable evitar siempre que se pueda usar jQuery. Es decir, "no usar jQuery hasta
que no sea estrictamente necesario". Y cuando lo uses, insistimos, siempre ser desde la definicin de las
directivas, nunca desde los propios controladores.
Si tus requisitos son ms sencillos, realizacin de sitios web en los que tienes poco peso de Javascript y
limitado a crear interfaces de usuario dinmicas o pequeos comportamientos interactivos, puedes seguir
usando jQuery. AngularJS est ms destinada a aplicaciones web complejas, ms parecidas a las aplicaciones
de escritorio, con uso muy intensivo de Javascript. No todos los problemas tpicos de un sitio web sera
adecuado resolver con AngularJS, pues a veces ser como "matar moscas a caonazos" y por la complejidad
de Angular te puede generar cdigo ms difcil de producir y sobre todo de entender para una persona con
menos experiencia.
Adems el hecho de Angular usar patrones de diseo como el MVC puede despistar bastante a las personas
con menos bagaje en el mundo de la programacin. Los patrones de diseo son algo que est para
ayudarnos, pero no todos los proyectos y desarrolladores los necesitan, pues complica la curva de
aprendizaje de las tecnologas y en ocasiones si nuestro problema es sencillo no ofrecen una solucin
sensiblemente mejor.

Comparativa de cdigo jQuery / AngularJS

Ha quedado claro que Angular va ms all del objetivo de jQuery. Son dos libreras distintas, que muchas
veces se pueden complementar, pero dependiendo del tipo de proyecto y de las cosas que tengas que hacer
con Javascript elegirs una u otra. No obstante, queremos hacer esta comparativa de cdigo para observar
algunas de las diferencias de filosofa entre jQuery y AngularJS y tambin comprobar de paso la potencia de
este ltimo.
En este caso vamos a comparar el cdigo que vimos en el Hola Mundo de AngularJS. La idea es
simplemente escribir un nombre en un campo de texto y volcarlo en una etiqueta H1.
Esto en jQuery se podra hacer con un cdigo como este:
<!DOCTYPE html>

http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 15 de 129

Manual de AngularJS

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ej Hola Mundo desarrollado en jQuery</title>
</head>
<body>
<h1>Hola</h1>
<form>
Cmo te llamas? <input type="text" id="nombre">
</form>

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function(){
var campoTexto = $("#nombre");
var titular = $("h1");
campoTexto.on("keyup", function(){
titular.text("Hola " + campoTexto.val());
});
});
</script>
</body>
</html>

En AngularJS ya vimos el cdigo necesario en un artculo anterior, pero lo reproducimos para poder
compararlos fcilmente.
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<meta charset="UTF-8">
<title>Ej Hola Mundo desarrollado en AngularJS</title>
</head>
<body>
<h1>Hola {{nombre}}</h1>
<form>
Cmo te llamas? <input type="text" ng-model="nombre">
</form>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</body>
</html>

Nota: Esta comparativa la puedes ver realizada en vdeo, en ingls, aunque resulta realmente fcil de
seguirlo si entiendes un poco estos cdigos: https://www.youtube.com/watch?v=uFTFsKmkQnQ

Como habrs observado, con AngularJS se simplifica nuestra vida. No solo que no necesitas hacer muchas
de las cosas que en jQuery tienes que programar "a mano", como el acceso al campo de texto para recuperar
http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 16 de 129

Manual de AngularJS

el valor, la creacin del evento de teclado para hacer cosas cuando se escribe dentro del campo de texto, etc.
Lo que ms debera llamar nuestra atencin es que el cdigo de AngularJS es mucho ms entendible, incluso
por personas que no tengan idea de programar. Como puedes deducir, en Angular escribimos generalmente
menos cdigo Javascript, pero s es importante decir que debido al uso del patrn MV* (separacin del
cdigo por sus diferentes objetivos), en ejemplos ms avanzados observars que entran en juego diferentes
factores que complican las soluciones. Generalmente, aunque en la mtrica de lneas de cdigo AngularJS
pueda ganar a jQuery, tambin debes saber que te exigir mayor capacidad de abstraccin y entender
diversos conceptos de patrones de diseo de software.
Todo ello nos debe hacer entender mejor la potencia de AngularJS. Pero ojo, sin desmerecer a jQuery, pues
debe quedar claro que cada librera es til en su campo.

Este artculo es obra de Miguel Angel Alvarez

Fue publicado por primera vez en 16/10/2014
Disponible online en http://desarrolloweb.com/articulos/angularjs-vs-jquery.html

Primeros pasos con AngularJS

Qu necesitas para trabajar con AngularJS, como descargar el framework y cmo realizar un
primer programa, el tpico Hola Mundo.
Ya hemos conocido por qu AngularJS nos ayuda en el desarrollo de sitios web modernos y tambin hemos
explorado en detalle diversos conceptos iniciales para manejar esta librera, as que que estamos en
condiciones de poner manos en el cdigo.
En este artculo queremos ofrecer una introduccin muy bsica a AngularJS, creando un
extraordinariamente sencillo "Hola mundo" con el que podremos empezar a apreciar la potencia de este
framework Javascript. Los impacientes e manejar cdigo estaris satisfechos despus de la lectura de este
artculo, pero antes que nada tenemos que saber qu materiales necesito en mi ordenador para comenzar a
trabajar.

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 prrafos. Para los que no tengan claro esto, os dejo un par de comentarios.
http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 17 de 129

Manual de AngularJS

Editor de cdigo: puede ser cualquiera que ests 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 cdigo, coloreado de sintaxis, ayudas contextuales, etc.
Notepad++, Sublime Text, Komodo Edit, Brackets, etc. Cualquiera es bueno. Si ests
acostumbrado a IDEs ms complejos como Eclipse o PhpStorm, puedes quedarte tambin con
ellos.
Navegador: Puedes usar cualquier navegador para ver un desarrollo basado en Angular.
Generalmente tendrs incluso varios navegadores para probar tu pgina en cada uno de ellos y
comprobar que todo est en orden. Solo te recomendamos tener a Google Chrome entre tu batera
de navegadores, pues luego hablaremos de una extensin que existe para ste que te permite
examinar y depurar pginas donde AngularJS est trabajando.

Descarga de AngularJS
Si quieres trabajar con AngularJS tienes que incluir el script del framework en tu pgina. Esto lo puedes
hacer de varias maneras, o bien te descargas la librera por completo y la colocas en un directorio de tu
proyecto, o bien usas un CDN para traerte la librera desde un servidor remoto. En principio es indiferente
a nivel didctico, as que nosotros vamos a comenzar del modo ms sencillo, que es utilizar el CDN.
Accedes a la pgina de AngularJS: https://angularjs.org/
Pulsas el botn de descarga y encontrars diversas opciones. Escoges la versin del framework (si es que te
lo permite) y que est minimizada (minified). Luego encontrars un campo de texto donde est la URL de la
librera (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 pgina
para mejorar la entrega del mismo.

Nota: La versin minimizada pesa menos en Kb, por lo que ser la adecuada para cualquier sitio que
tengas en produccin. Sin embargo la versin sin comprimir "Uncompressed" tiene el cdigo completo,
con comentarios, sangrado, etc. lo que hace que sea ms fcil de leer por humanos. Puedes usar si lo
deseas la versin sin comprimir en la etapa de desarrollo.

Ser algo como https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js aunque todo

depende de la versin que haya en el momento en el que t leas esta gua de iniciacin.

Incluir AngularJS en una pgina web

Una vez tienes tu CDN puedes incluir el script de Angular en la pgina con la etiqueta SCRIPT. Ese script
lo puedes colocar en el HEAD o bien antes del final del BODY, en principio no habra diferencias en lo
relativo a la funcionalidad, pero s hay una pequea mejora si lo colocas antes de cerrar el cuerpo.
Simplemente, si lo colocas en el HEAD ests obligando a que tu navegador se descargue la librera de
AngularJS, retrasando quizs la descarga de reas de la pgina con contenido. Si lo colocas antes de cerrar el
BODY facilitas la vida a tu navegador, y por aadido 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
http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 18 de 129

Manual de AngularJS

realmente necesario.

Declarar directivas
Hay un paso ms para dejar lista una pgina donde quieras usar AngularJS. Es simplemente colocar la
directiva ng-app en la etiqueta que englobe la aplicacin. Ms adelante hablaremos con ms 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".
Tpicamente pondrs ng-app en la etiqueta HTML de inicio del documento.
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<meta charset="UTF-8">
<title>Ej de AngularJS</title>
</head>
<body>

... Aqu el cuerpo de tu pgina ...

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</body>
</html>

As como ng-app, existen muchas otras directivas para enriquecer tu HTML, aun veremos alguna ms en
este artculo.

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
cdigo. Realmente, como observars, se trata de cero cdigo (Javascript).

Nota: El cdigo de este Hola Mundo lo puedes encontrar tambin, prcticamente la misma
implementacin, en la home de AngularJS.

Vamos a colocar un formulario con un campo de texto.

<form>
Cmo te llamas? <input type="text" ng-model="nombre">
</form>

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 ms adelante hablaremos con detalle sobre
http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 19 de 129

Manual de AngularJS

estos datos y veremos nuevos ejemplos.

Ahora vamos a crear un elemento de tu pgina donde volcaremos lo que haya escrito en ese campo de
texto.
<h1>Hola {{nombre}}</h1>

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

Cdigo completo
Nuestro ejemplo es perfectamente funcional. Si estabas esperando que escribisemos 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 travs 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 ms.
Puedes ver el cdigo completo a continuacin. Puedes copiarlo y pegarlo tal cual en tu editor de texto, en
un nuevo archivo .html y debera de funcionarte sin ningn problema.
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<meta charset="UTF-8">
<title>Ej de AngularJS</title>
</head>
<body>
<h1>Hola {{nombre}}</h1>
<div class="contenedor">
<form action="">
Cmo te llamas? <input type="text" ng-model="nombre">
</form>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</body>
</html>

En el siguiente artculo nos extenderemos un poco ms en las explicaciones. De momento es interesante

que observes que sin necesidad de escribir cdigo Javascript AngularJS es capaz de implementar una bonita
funcionalidad. Solo piensa el cdigo que necesitaras con Javascript "nativo" para hacer este ejercicio o
usando otros sistemas como el popular jQuery.

http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 20 de 129

Manual de AngularJS

Este artculo es obra de Miguel Angel Alvarez

Fue publicado por primera vez en 04/09/2014
Disponible online en http://desarrolloweb.com/articulos/primeros-pasos-angularjs.html

Binding en AngularJS, y doble binding

El enlace de datos es una de las cosas que facilita la programacin con AngularJS, en ingls Data
binding, siendo que en Angular tenemos un doble binding.
Este artculo es solamente para repasar, y poner los puntos sobre las ies, un concepto que ya hemos visto a
lo largo del Manual de AngularJS, pero que no hemos tratado de manera aislada. Se trata del data binding,
uno de los puntos fuertes de Angular y donde reside la "magia" del framework.
El binding es algo que conoces ya en Javascript comn, e incluso en libreras como jQuery, aunque es
posible que no le has dado ese nombre todava. La traduccin de "binding" sera "enlace" y sirve para eso
justamente, realizar un nexo de unin entre unas cosas y otras. Data binding sera "enlace de datos".
Adems, una de las caractersticas de AngularJS es producir automticamente lo que se llama el "doble
binding" que nos facilita enormemente nuestro trabajo por ahorrarnos muchas lneas de cdigo para
realizarlo a mano. El doble binding no existe en todos los frameworks MVC de Javascript como
BackboneJS, donde solo tenemos un "bindeo" simple.

Qu es el binding
El binding no es ms que enlazar la informacin que tenemos en el "scope" con lo que mostramos en el
HTML. Esto se produce en dos sentidos:
One-way binding: En este caso la informacin solamente fluye desde el scope hacia la parte visual, osea,
desde el modelo hacia la representacin de la informacin en el HTML. Lo conseguimos con la sintaxis
"Mustache" de las dos llaves.
{{ dato }}

Ese dato estaras trayndolo desde el scope y mostrndolo en la pgina. La informacin fluye desde el scope
hacia la representacin quiere decir que, si por lo que sea se actualiza el dato que hay almacenado en el
http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 21 de 129

Manual de AngularJS

modelo (scope) se actualizar automticamente en la presentacin (pgina).

Two-way binding: En este segundo caso la informacin fluye desde el scope hacia la parte visual (igual
que en "one-way binding") y tambin desde la parte visual hacia el scope. La implementas por medio de la
directiva ngModel.
<input type="text" ng-model="miDato" />

En este caso cuando el modelo cambie, el dato que est escrito en el campo de texto (o en el elemento de
formulario donde lo uses) se actualizara automticamente con el nuevo valor. Adems, gracias al doble
binding (two-way) en este caso, cuando el usuario cambie el valor del campo de texto el scope se actualizar
automticamente.

Cmo puedo experimentar el binding

Realmente en los ejemplos ms sencillos de AngularJS ya hemos experimentado el binding. No me hace
falta ni Javascript para poder hacer un ejemplo donde se pueda ver en marcha perfectamente.
<div ng-app>
<input type="text" ng-model="dato" />
{{dato}}
<input type="button" value="hola" ng-click="dato='hola'" />
</div>

Mira, tienes tres elementos destacables.

Un campo de texto con ng-model="dato". En ese campo tenemos un "doble binding".
Una expresin {{dato}} donde se mostrar aquello que haya escrito en el campo de texto. En este
caso tenemos un binding simple, de un nico sentido.
finalmente tienes un botn que no tiene bindig alguno. Simplemente, cuando lo pulses, ests
ejecutando una expresin (con ng-click) para cambiar el scope en su variable "dato".
El binding one-way lo ves muy fcilmente. Simplemente escribe algo en el campo de texto y observa como
se actualiza el lugar de la pgina donde ests volcndo el valor con {{dato}}.
Para poder ver bien el doble binding he tenido que crear el botn, que hace cambios en el scope. Aclaro de
nuevo que el doble binding de todos modos lo tienes en el INPUT text. Direccin 1) lo ves cuando escribes
datos en el campo de texto, que viajan al modelo automticamente (y sabemos que es cierto porque vemos
cmo {{dato}} actualiza su valor. Direccin 2) lo ves cuando haces click en el botn. Entonces se actualiza
ese dato del modelo y automticamente viaja ese nuevo valor del scope hacia el campo de texto.

Por qu el binding es tan til

Piensa en una aplicacin que realizases con Javascript comn (sin usar librera alguna), o incluso con jQuery
que no tiene un binding automtico. Piensa todo el cdigo que tendras que hacer para implementar ese
http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 22 de 129

Manual de AngularJS

pequeo ejemplo. Suscribirte eventos, definir las funciones manejadoras para que cuando cambie el estado
del campo de texto, volcarlo sobre la pgina. Crear el manejador del botn para que cuando lo pulses se
enve el nuevo texto "hola" tanto al campo de texto como a la pgina, etc.
No estamos diciendo que sea difcil hacer eso "a mano", seguro que la mayora es capaz de hacerlo en
jQuery, pero fjate que para cada una de esas pequeas tareas tienes que agregar varias lneas de cdigo,
definir eventos, manejadores, especificar el cdigo para que los datos viajen de un lugar a otro. Quizs no es
tan complicado, pero s es bastante laborioso y en aplicaciones complejas comienza a resultar un infierno
tener que estar pendiente de tantas cosas.
Otra ventaja, aparte del propio tiempo que ahorras, es una limpieza de cdigo muy destacable, ya que no
tienes que estar implementando muchos eventos ni tienes necesidad de enviar datos de un sitio a otro. Tal
como te viene un JSON de una llamada a un servicio web lo enganchas al scope y automticamente lo
tienes disponible en la vista, lo que es una maravilla. Esto se ve de manera notable en comparacin con
otros frameworks como BackboneJS.

Nota: Osea que el doble binding de Angular nos ahorra mucho trabajo, pero ojo, quizs no sea
necesario para cualquier tipo de aplicacin. Si tus necesidades no son muy grandes igual no consigues
adelantar tanto. Incluso en aplicaciones con inmensa cantidad de datos puede que el doble binding te
pueda ralentizar un poco la aplicacin porque toda esa gestin del binding se haga pesada, igual de
manera innecesaria. En esos casos quizs otra librera funcione mejor que AngularJS. Sin embargo, la
inmensa mayora de las aplicaciones se beneficiarn de ese doble binding.

Dnde encontrars el binding

El binding que dispones en AngularJS se implementa automticamente en muchas otras directivas que
existen en el framework.
Es muy til cuando trabajamos con colecciones y directivas como ngOptions o ngRepeat, que nos sirven
para realizar recorridos a esas colecciones para crear los campos OPTION de un SELECT o simplemente
para repetir cualquier pedazo del DOM. En estos casos, cuando la coleccin cambia, nuestra pgina se
actualiza automticamente.
Tambin puedes hacer binding a atributos de diversas etiquetas de la pgina, con las directivas ngHref o
ngSrc, ngStyle, ngClass. Tambin funciona en formularios con una especie de framework de validacin
"Validations" o con el propio ngSubmit. Todo eso lo iremos viendo ms adelante con ejemplos.

Este artculo es obra de Miguel Angel Alvarez

Fue publicado por primera vez en 20/10/2014
Disponible online en http://desarrolloweb.com/articulos/binding-angularjs-doble-binding.html

http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 23 de 129

Manual de AngularJS

Desarrollo declarativo con AngularJS

Comenzamos a introducirnos en el mundo de Angular con una serie de artculos bsicos dedicados a lo que
se conoce como el HTML declarativo, una de las caractersticas de esta librera, que nos permite realizar
aplicaciones sencillas sin necesidad de Javascript. El proceso consiste en crear una serie de declaraciones en
el propio lenguaje de marcacin en las que se indica qu cometido tienen los elementos de la pgina dentro
de nuestra aplicacin web.

Directivas y expresiones en AngularJS

Una primera aproximacin a los componentes que forman parte de las aplicaciones bsicas que
podremos desarrollar con AngularJS, las directivas y las expresiones.
Hemos visto que Angular tiene como caracterstica que extiende el HTML, pudiendo llegar a programar
funcionalidad de la aplicacin sin necesidad de escribir cdigo Javascript. Ahora vamos a ver de manera ms
detallada algunos de los componentes tpicos que encontramos en las aplicaciones desarrolladas con esta
potente librera.
Al trabajar con AngularJS seguimos desarrollando encima del cdigo HTML, pero ahora tenemos otros
componentes tiles que agregan valor semntico a tu aplicacin. De alguna manera ests enriqueciendo el
HTML, por medio de lo que se conoce como "directiva".

Qu son las directivas

Las directivas son nuevos "comandos" que vas a incorporar al HTML y los puedes asignar a cualquiera de
las etiquetas por medio de atributos. Son como marcas en elementos del DOM de tu pgina que le indican a
AngularJS que tienen que asignarles un comportamiento determinado o incluso transformar ese elemento
del DOM o alguno de sus hijos.
Cuando se ejecuta una aplicacin que trabaja con Angular, existe un "HTML Compiler" (Compilador
HTML) que se encarga de recorrer el documento y localizar las directivas que hayas colocado dentro del
cdigo HTML, para ejecutar aquellos comportamientos asociados a esas directivas.

http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 24 de 129

Manual de AngularJS

AngularJS nos trae una serie de directivas "de fbrica" que nos sirven para hacer cosas habituales, as como
t o terceros desarrolladores pueden crear sus propias directivas para enriquecer el framework.

Directiva ngApp (ng-app)

Esta es la marca que indica el elemento raz de tu aplicacin. Se coloca como atributo en la etiqueta que
deseas que sea la raz. Es una directiva que autoarranca la aplicacin web AngularJS. Se leera "Enyi ap" y lo
ms comn es ponerlo al principio de tu documento HTML, en la etiqueta HTML o BODY, pero tambin
lo podras colocar en un rea ms restringida dentro del documento en otra de las etiquetas de tu pgina.
<html ng-app>

Nota: Como puedes comprobar, ng-app es una directiva y se indica como si fuera un atributo el
HTML. Pero no lo es ningn atributo real de HTML. Si usas un validador de HTML te advertir que
ese atributo es inexistente y se interpretar por un error de validacin. Para solucionar este posible
inconveniente, la prctica aconsejable es colocar el prefijo "data-" a cada directiva.
<html data-ng-app>

De ese modo tu cdigo validar perfectamente, ya que en HTML5 se pueden crear cualquier tipo de
atributos personalizados que comiencen por "data-" y asignarles cualquier tipo de dato que queramos
almacenar en la etiqueta.

Para no causar confusiones, tambin podemos agregar que a nivel de Javascript las directivas las encontrars
nombradas con notacin "camel case", algo como ngApp. En la documentacin tambin las encuentras
nombradas con camel case, sin embargo, como el HTML no es sensible a las maysculas y minsculas no
tiene tanto sentido usar esa notacin y por ello se separan las palabras de las directivas por un guin "-".
Opcionalmente ngApp puede contener como valor un mdulo de AngularJS a cargar. Esto lo veremos ms
adelante cuando trabajemos con mdulos.

Directiva ngModel (ng-model)

La directiva ngModel informa al compilador HTML de AngularJS que que ests declarando una variable de
tu modelo. Las puedes usar dentro de campos INPUT, SELECT, TEXTAREA (o controles de formulario
personalizados).

Nota: De nuevo, cabe decir que no forma parte del estndar HTML sino que es una extensin que
tenemos gracias a AngularJS.

La indicas con el atributo del HTML ng-model, asignando el nombre de la variable de tu modelo que ests
declarando.
http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 25 de 129

Manual de AngularJS

<input type="text" ng-model="busqueda">

Con eso le ests diciendo al framework que est atento a lo que haya escrito en ese campo de texto, porque
es una una variable que vas a utilizar para almacenar algo y porque es importante para tu aplicacin.
Tcnicamente, lo que haces con ngModel es crear una propiedad dentro del "scope" (tu modelo) cuyo valor
tendr aquello que se escriba en el campo de texto. Gracias al "binding" cuando modifiques ese valor en el
scope por medio de Javascript, tambin se modificar lo que haya escrito en el campo de texto. Aunque
todo esto lo experimentars y entenders mejor un poco ms adelante cuando nos metamos ms de lleno en
los controladores.

Expresiones
Con las expresiones tambin enriquecemos el HTML, ya que nos permiten colocar cualquier cosa y que
AngularJS se encargue de interpretarla y resolverla. Para crear una expresin simplemente la englobas
dentro de dobles llaves, de inicio y fin.
Ahora dentro de tu aplicacin, en cualquier lugar de tu cdigo HTML delimitado por la etiqueta donde
pusiste la directiva ng-app eres capaz de colocar expresiones. En Angular podemos una gama de tipos de
expresiones, de momento hagamos una prueba colocando una expresin as.
<h1>{{ 1 + 1}}</h1>

Angular cuando se pone a ejecutar la aplicacin buscar expresiones de este estilo y lo que tengan dentro, si
es algo que l pueda evaluar, lo resolver y lo sustituir con el resultado que corresponda.
Puedes probar otra expresin como esta:
{{ "Hola " + "DesarrolloWeb" }}

Al ejecutarlo, AngularJS sustituir esa expresin por "Hola DesarrolloWeb". Estas expresiones no me
aportan gran cosa de momento, pero luego las utilizaremos para ms tipos de operaciones.
Lo habitual de las expresiones es utilizarlas para colocar datos de tu modelo, escribiendo los nombres de las
"variables" que tengas en el modelo. Por ejemplo, si tienes este cdigo HTML, donde has definido un dato
en tu modelo llamado "valor":
<input type="text" ng-model="valor" />

Podrs volcar en la pgina ese dato (lo que haya escrito en el campo INPUT) por medio de la siguiente
expresin:
{{valor}}

http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 26 de 129

Manual de AngularJS

Otro detalle interesante de las expresiones es la capacidad de formatear la salida, por ejemplo, diciendo que
lo que se va a escribir es un nmero y que deben representarse dos decimales necesariamente. Vemos
rpidamente la sintaxis de esta salida formateada, y ms adelante la utilizaremos en diversos ejemplos:
{{ precio | number:2 }}

Cabe decir que estas expresiones no estn pensadas para escribir cdigo de tu programa, osea, lo que
llamamos lgica de tu aplicacin. Como decamos, estn sobre todo pensadas para volcar informacin que
tengas en tu modelo y facilitar el "binding". Por ello, salvo el operador ternario (x ? y : z), no se pueden
colocar expresiones de control como bucles o condicionales. Sin embargo, desde las expresiones tambin
podemos llamar a funciones codificadas en Javascript (que estn escritas en los controladores, como
veremos enseguida) para poder resolver cualquier tipo de necesidad ms compleja.
Hasta aqu hemos descrito todos los componentes de AngularJS que ya conociste en el artculo de los
Primeros pasos con AngularJS. Ahora vamos a conocer otros componentes de las aplicaciones que
podemos hacer con este framework Javascript.

Este artculo es obra de Alberto Basalo

Fue publicado por primera vez en 14/09/2014
Disponible online en http://desarrolloweb.com/articulos/directivas-expresiones-angularjs.html

Directivas ngInit, ngRepeat y ngClick

Ejemplo AngularJS en el que vamos a poder explorar el desarrollo nicamente con cdigo HTML
y aprender las directivas ngInit, ngRepeat y ngClick.
Seguimos aprendiendo AngularJS y en este artculo vamos a avanzar un poquito ms y hacer un ejemplo
prctico en el que no tenemos todava necesidad de escribir cdigo Javascript. Es interesante entretenerse
con estos ejemplos, pues resultan muy sencillos y nos ayudan a mantener una progresin muy asequible en
el principio de nuestro aprendizaje. Tambin es apropieado para observar bien lo que a veces llamamos la
"magia de AngularJS". Veremos que, con muy poco o nada de cdigo, se pueden hacer cosas medianamente
importantes, al menos para los desarrolladores que sabemos lo laborioso que sera montar esto por nuestra
cuenta con Javascript a secas.
Nos servir tambin para aprender nuevas directivas, de las ms sencillas y usadas habitualmente, como son
ngInit y ngClick o ngRepeat. As que si os parece comenzamos con un poco de teora para explicar estas
directivas.

http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 27 de 129

Manual de AngularJS

Directiva ngInit
Esta directiva nos sirve para inicializar datos en nuestra aplicacin, por medio de expresiones que se
evaluarn en el contexto actual donde hayan sido definidas. Dicho de otra manera, nos permite cargar cosas
en nuestro modelo, al inicializarse la aplicacin.
As de manera general podemos crear variables en el "scope", inicializarlas con valores, etc. para que en el
momento que las vayas a necesitar estn cargadas con los datos que necesitas.

Nota: Realmente no hemos explicado todava en el Manual de AngularJS, al menos suficientemente

bien, qu es eso del "scope" y ya estamos abusando en el nmero de veces que usamos el trmino. Por
ahora hemos comentado que el scope mantiene los datos de tu aplicacin, lo que en el paradigma de la
programacin MVC se llama "modelo". As pues, si digo que creo variables en el scope lo puedes
entender como la definicin de un dato de tu aplicacin, que se guarda en el denominado "modelo" del
MVC. Para los que tienen dudas sobre qu es el MVC os recomendamos leer el artculo Qu es MVC.

<div ng-app ng-init="miArrayDatos = [];">

Con esto consigues que tu aplicacin inicialice en el scope un dato llamado miArrayDatos como un array
vaco. Pero no le prestes demasiada atencin al hecho de haber colocado la directiva ngInit dentro de la
misma etiqueta que inicializa la aplicacin, pues podra ir en cualquier otra etiqueta de tu HTML. Realmente,
colocarla en esa divisin marcada con ngApp es considerado una mala prctica. Ten en cuenta lo siguiente
cuando trabajes con ngInit:
El nico caso apropiado donde se debera de usar ngInit es en enlace de propiedades especiales de
ngRepeat. Si lo que quieres es inicializar datos en tu modelo para toda la aplicacin, el lugar apropiado sera
en el controlador. Enseguida vemos un ejemplo de uso apropiado, cuando conozcamos la directiva
ngRepeat.

Nota: Aclaramos ya que en el ejemplo final de este artculo vamos a usar ngInit para asociar datos al
scope, e inicializarlos. Sin embargo, debemos de ser conscientes que para ello deberamos usar un
controlador. Como no hemos llegado a los controladores todava, y queremos limitarnos solo a trabajar
con el HTML, nos sirve como mtodo alternativo.

http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 28 de 129

Manual de AngularJS

Directiva ngRepeat
Esta directiva te sirve para implementar una repeticin (un bucle). Es usada para repetir un grupo de
etiquetas una serie de veces. Al implementar la directiva en tu HTML tienes que decirle sobre qu estructura
se va a iterar. ngRepeat se usa de manera muy habitual y se ver con detenimiento en decenas de ejemplos.
De momento puedes quedarte que es como un recorrido for-each en el que se itera sobre cada uno de los
elementos de una coleccin.
La etiqueta donde has colocado el atributo ng-repeat y todo el grupo de etiquetas anidadas dentro de sta,
funciona como si fuera una plantilla. Al procesarse el compilador HTML de AngularJS el cdigo HTML de
esa plantilla se repite para cada elemento de la coleccin que se est iterando. Dentro de esa plantilla tienes
un contexto particular, que es definido en la declaracin de la directiva, que equivale al elemento actual en el
bucle. Se ve mejor con un ejemplo.
<p ng-repeat="elemento in miColeccion">
Ests en: <span>{{elemento}}</span>
</p>

El dato miColeccion sera un dato de tu modelo, habitualmente un array sobre el que puedas iterar, una vez
por cada elemento. Pero tambin podra ser un objeto y en ese caso la iteracin se realizara en cada una de
sus propiedades.
En lo relativo al contexto prpio del bucle te puedes fijar que dentro de la iteracin podemos acceder al
dato "elemento", que contiene como valor, en cada repeticin, el elemento actual de la coleccin sobre el
que se est iterando.
Esta directiva es bastante sofisticada y explicar cada una de sus posibilidades nos llevara algo de tiempo. Sin
embargo, vamos a mostrar cmo podemos trabajar con ngRepeat en conjunto con ngInit, para completar la
explicacin de punto anterior.
<p ng-repeat="elemento in miColeccion" ng-init="paso=$index;">
Elemento con id {{paso}}: <span>{{elemento}}</span>
</p>

La directiva ngRepeat maneja una serie de propiedades especiales que puedes inicializar para el contexto
propio de cada repeticin. Para inicializarlas usamos la directiva ngInit indicando los nombres de las
variables donde vamos a guardar esas propiedades. En este caso estamos indicando que dentro de la
repeticin vamos a mantener una variable "paso" que tendr el valor de $index, que equivale al nmero
ndice de cada repeticin. Osea, en la primera iteracin paso valdr cero, luego valdr uno y as todo
seguido. Igual que tienes $index, Angular te proporciona otras propiedades tiles como $first (que valdr
true en caso que sea la primera iteracin) o $last (true solo para la ltima iteracin)

Nota: El que acabas de ver sera el nico uso de ngInit considerado como buena prctica, en conjunto
con ngRepeat para inicializar sus propiedades.

http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 29 de 129

Manual de AngularJS

Dejamos de momento ngRepeat, aunque vuelvo a sealar que hay otra serie de cosas interesantes en la
directiva para las repeticiones, como filtros, rdenes, etc.

Directiva ngClick
Terminamos nuestra dosis de teora con una explicacin de la directiva ngClick. Como podrs imaginarte es
utilizada para especificar un evento click. En ella pondremos el cdigo (mejor dicho la expresin) que se
debe ejecutar cuando se produzca un clic sobre el elemento donde se ha colocado la directiva.
Tpicamente al implementar un clic invocars una funcin manejadora de evento, que escribirs de manera
separada al cdigo HTML.
<input type="button" value="Haz Clic" ng-click="procesarClic()">

Esa funcin procesarClic() la escribirs en el controlador, factora, etc. Sera el modo aconsejado de
proceder, aunque tambin podras escribir expresiones simples, con un subconjunto del cdigo que podras
escribir con el propio Javascript. Incluso cabe la posibilidad de escribir varias expresiones si las separas por
punto y coma.
<input type="button" value="haz clic" ng-click="numero=2; otraCosa=dato " />

No difiere mucho a como se expresan los eventos clic en HTML mediante el atributo onclick, la diferencia
aqu es que dentro de tus expresiones podrs acceder a los datos que tengas en tu modelo.

Nota: Aunque tcnicamente pueda escribir expresiones directamente en el cdigo HTML, en el valor
del atributo ng-click, tienes que evaluar con cuidado qu tipo de cdigo realizas porque dentro de la
filosofa de AngularJS y la del MVC en general, no puedes escribir en tu HTML cdigo que sirva para
implementar la lgica de tu aplicacin. (El cdigo que necesitas para hacer las funcionalidades de tu
aplicacin no lo colocas en la vista, lo colocas en el controlador).

Ejemplo de uso de estas directivas en AngularJS

Ahora que hemos conocido las directivas, nos falta ponerlo todo junto para hacer un pequeo ejercicio
bsico con AngularJS.

Nota: Como advertimos al principio del artculo, solo voy a usar cdigo HTML para este ejercicio. Por
ese motivo hay un par de cosas que no seran consideradas buenas prcticas, como el uso de ngInit para
inicializar el array "pensamientos" y el hecho de haber colocado dentro de un ng-click expresiones que
sera mejor haber escrito en una funcin de nuestro controlador.

En esta aplicacin tenemos un campo de texto para escribir cualquier cosa, un "pensamiento". Al pulsar
sobre el botn se agregar dentro de un array llamado "pensamientos" lo que se haya escrito en el campo de
http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 30 de 129

Manual de AngularJS

texto. Adems encuentras un bucle definido con ng-repeat que itera sobre el array de "pensamientos"
mostrando todos los que se hayan agregado.
<div ng-app ng-init="pensamientos = [];">
<h1>Altavoz AngularJS</h1>
<p>
Qu hay de nuevo?
<br />
<input type="text" ng-model="nuevoPensamiento" />
<input type="button" value="Agregar" ng-click="pensamientos.push(nuevoPensamiento); nuevoPensamiento = '';" />
</p>
<h2>Pensamientos que has tenido</h2>
<p ng-repeat="pensamiento in pensamientos" ng-init="paso = $index">
Pensaste esto: {{pensamiento}} (Iteracin con ndice {{paso}})
</p>
</div>

El dato del array "pensamientos" lo generas en el scope con el ng-init de la primera etiqueta. En el campo
de texto tenemos la directiva ng-model para indicarle que lo que se escriba formar parte de nuestro modelo
y se almacenar en la variable nuevoPensamiento. Como ves, en el ng-click se hace un push de ese nuevo
pensamiento dentro del array de pensamientos. En ng-repeat se itera sobre la coleccin de pensamientos,
escribindolos todos por pantalla, junto con el ndice de ese pensamiento actual en el array "pensamientos".
Puedes ponerlo en marcha y jugar un poco con la aplicacin haciendo tus cambios para calmar tu curiosidad
o responder posibles dudas.

Este artculo es obra de Miguel Angel Alvarez

Fue publicado por primera vez en 15/09/2014
Disponible online en http://desarrolloweb.com/articulos/directivas-nginit-ngrepeat-ngclick-angularjs.html

Videotutoriales AngularJS, solo con directivas en HTML

Ejemplos prcticos de AngularJS en los que solo estamos realizando cdigo HTML, con directivas
embutidas en el cdigo HTML.
En lo que hemos visto hasta aqu del Manual de AngularJS ya hemos tenido ocasin de conocer varias
cosillas simples que nos sirven para hacer ejemplos. He hecho a lo largo de los artculos anteriores ya hemos
podido hacer algunas muestras de cmo trabajar con el framework.
Queremos ahora introducir unos vdeos que nos van a aclarar todava un poco ms los primeros pasos en
AngularJS. Estos vdeos estn extractados del #programadorIO de AngularJS desde cero punto cero. En
este artculo adems compartimos el cdigo fuente utilizado.

http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 31 de 129

Manual de AngularJS

1) "Hola mundo" en AngularJS

En este primer ejercicio vimos lo mnimo necesario para comenzar una aplicacin con AngularJS.
Revisamos el uso de la directiva ngApp, la directiva ngModel y una expresin en la que volcamos un dato
que hay en el modelo. Es muy sencillo, as que nadie se puede perder.

Para ver este vdeo es necesario visitar el artculo original en:

http://desarrolloweb.com/articulos/videotutoriales-angularjs-directivas-html-ejemplos-practicos.html

El cdigo fuente realizado es el siguiente:

<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<meta charset="UTF-8">
<title>hola mundo en Angular</title>
</head>
<body>

<input type="text" ng-model="campotexto">

<br />
{{ campotexto }}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.24/angular.min.js"></script>
</body>
</html>

2) Campos select y recomendaciones de inicializacin

En este ejercicio incorporamos un campo SELECT que tambin asociamos al modelo de nuestra aplicacin
mediante la directiva ngModel. Gracias a ello podemos mostrar dentro del cuerpo de la pgina el valor del
SELECT por medio de una expresin.

Para ver este vdeo es necesario visitar el artculo original en:

http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 32 de 129

Manual de AngularJS
http://desarrolloweb.com/articulos/videotutoriales-angularjs-directivas-html-ejemplos-practicos.html

El cdigo es el siguiente:
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<meta charset="UTF-8">
<title>hola mundo en Angular</title>
</head>
<body>

<input type="text" ng-model="campotexto">

<br />
{{ campotexto }} - {{ camposelect }}
<br />
<select ng-model="camposelect">
<option value="uno">1</option>
<option value="dos">2</option>
</select>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.24/angular.min.js"></script>
</body>
</html>

3) Directiva ngClick
En este tercer vdeo vamos a explicar la directiva ngClick que ya nos permite agregar algo de interaccin en
los elementos de la pgina. Colocaremos un botn y dentro de l el atributo ng-click que nos permitir
asignarle un comportamiento.
Aclaramos en el vdeo que no es la manera ms recomendable de actuar, puesto que los comportamientos
deberan escribirse (su cdigo) dentro de los controladores. No obstante nos ofrece una idea de las
posibilidades de AngularJS y est bien para comenzar a dar los primeros pasos.
Mediante el botn escribimos dos comportamientos en el vdeo (aunque en el cdigo fuente que tenemos
solo se conserv uno de los comportamientos). El primero que vers en la grabacin es asignarle un valor al
campo SELECT. De ese modo se muestra cmo el campo de seleccin pierde el valor a null con el que lo
inicializa automticamente AngularJS. En el segundo comportamiento simplemente se coloca un nuevo
texto en el campo de texto.

Para ver este vdeo es necesario visitar el artculo original en:

http://desarrolloweb.com/articulos/videotutoriales-angularjs-directivas-html-ejemplos-practicos.html

Este es el cdigo fuente que qued del ejemplo realizado en el vdeo.

http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 33 de 129

Manual de AngularJS

<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<meta charset="UTF-8">
<title>hola mundo en Angular</title>
</head>
<body>

<input type="text" ng-model="campotexto">

<br />
{{ campotexto }} - {{ camposelect }}
<br />
<select ng-model="camposelect">
<option value="uno">1</option>
<option value="dos">2</option>
</select>
<input type="button" ng-click="campotexto='DesarrolloWeb.com'" value="Pulsa aqu">

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.24/angular.min.js"></script>
</body>
</html>

Estos son los tres ejemplos que te mostramos por ahora, aunque la sesin se complet con dos nuevas
muestras de uso de AngularJS, en las que se mostr cmo crear un controlador. Sin embargo, como no
hemos visto controladores todava en este manual, nos reservamos para un poco ms adelante comentarte
acerca de esos vdeos. Si te interesan, lo nico que debes hacer es irte a la lista de reproduccin de los
videotutoriales de Angular en nuestro canal de Youtube.
En el siguiente artculo continuaremos hablando de modelos y luego de controladores, con lo que
podremos comenzar a ver cdigo fuente Javascript con buenas prcticas, en vez de mezclar la interaccin
con la presentacin, tal como nos hemos obligado a hacer con lo que sabemos en estos primeros pasos con
la librera Javascript.
De momento te sugiero que practiques por tu cuenta y trates de hacer ejemplos como stos u otros ms
complejos que se te ocurran, pues con la prctica es como se afianzan los conocimientos. Observars que
jugar con AngularJS se hace muy divertido y que se consiguen comportamientos interesantes con muy poco
o ningn cdigo Javascript.

Este artculo es obra de Miguel Angel Alvarez

Fue publicado por primera vez en 22/09/2014
Disponible online en http://desarrolloweb.com/articulos/videotutoriales-angularjs-directivas-html-ejemplospracticos.html

http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 34 de 129

Manual de AngularJS

Separando el cdigo Javascript

Despus de aprender el desarrollo declarativo, conocemos las prcticas habituales en AngularJS, que nos
indican que cada cdigo debe ir en su lugar adecuado. Conocemos primeramente los mdulos y
controladores que nos permitirn organizar nuestro cdigo separando el Javascript del HTML.

Mdulo, objeto module en AngularJS

Qu son los mdulos en AngularJS como crear un objeto module en el framework y qu tipo de
cosas se podrn hacer con ellos.
Los mdulos son una de las piezas fundamentales en el desarrollo con AngularJS y nos sirven para
organizar el cdigo en esta librera. Lo puedes entender como un contenedor donde situas el cdigo de los
controladores, directivas, etc.
La incorporacin de mdulos en AngularJS es motivada por la realizacin de aplicaciones con mejores
prcticas. Son como contenedores aislados, para evitar que tu cdigo interacte con otros scripts Javascript
que haya en tu aplicacin (entre otras cosas dejarn de producirse colisiones de variables, nombres de
funciones repetidos en otras partes del cdigo, etc.). Los mdulos tambin permiten que el cdigo sea ms
fcilmente reutilizable, entre otras ventajas.

Indicar el mdulo al arrancar la aplicacin

Cuando arrancas una aplicacin AngularJS, usando ng-app generalmente pondrs el nombre del mdulo
que quieres ejecutar en tu aplicacin.
<HTML ng-app="miAplicacion">

Nota: La manera recomendada de arrancar la aplicacin es con la directiva ngApp, aunque tambin
podras si lo deseas arrancarla con el mtodo angular.bootstrap().

http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 35 de 129

Manual de AngularJS

angular.bootstrap(document.getElementById('miapp'), [modulos opcionales];

En ese caso se supone que para identificar tu aplicacin dentro del DOM le has colocado un identificador
"miapp". Aprecia tambin que los mdulos son opcionales e incluso que podra haber varios mdulos que
deseas arrancar, algo posible, pero raramente usado.
Recuerda que hasta ahora, en lo que llevamos del Manual de AngularJS, en la directiva ngApp, atributo ngapp, no colocbamos ningn valor. Eso era porque hasta el momento no habamos trabajado con mdulos.
Sin embargo, a partir de ahora que los aprendemos a utilizar recuerda que los vas a tener que indicar al
arrancar la aplicacin.

Nota: Aunque en varios lugares de este manual nos podamos referir a ngApp como "directiva"
queremos aclarar que realmente no lo es. La propia documentacin de AngularJS tambin la llama as,
pero simplemente es un atributo y sirve para arrancar desde la function BootStrap, que es llamada desde
la function angularInit. https://github.com/angular/angular.js/blob/master/src/Angular.js Tampoco
queremos liarte de momento con estos detalles, solo era una aclaracin que pensamos es importante
hacer.

Creacin de mdulos
Desde Javascript crears los mdulos usando el mtodo angular.module() e indicndole una serie de
parmetros. Echa un vistazo a esta sintaxis.
angular.module('miAplicacion', [ ... ], function(...){ ... })

La variable "angular" la tienes como variable global cuando cargas AngularJS, dentro tiene un objeto que
estar disponible en cualquier parte de tu cdigo. Luego ves "module", que es un mtodo del objeto
"angular" y que sirve para crear el mdulo. El primer argumento es el nombre del mdulo, que corresponde
con el nombre de tu aplicacin. En el segundo parmetro puedes indicar una serie de mdulos adicionales,
separados por comas, que seran tus dependencias. Pueden ser mdulos de otros autores o puede que t
mismo hayas decidido organizar tu cdigo en diferentes mdulos. El tercer parmetro es opcional y en l
colocamos una funcin que sirve para configurar AngularJS.
Para comenzar crears tus mdulos probablemente de una manera sencilla, tal como puedes ver a
continuacin:
angular.module('nuevaApp', []);

En el cdigo anterior "nuevaApp" es el nombre de tu mdulo. Como se coment anteriormente, ese

mdulo se debe indicar en el bootstrap (arranque) de tu aplicacin, comnmente en la directiva ngApp.
<html ngApp="nuevaApp">

http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 36 de 129

Manual de AngularJS

El objeto module
Esta llamada a angular.module() te devuelve un objeto module, que tiene una serie de mtodos como
config, run, provider, service, factory, directive, controller, value, etc. que son los que nos sirven para
controlar la lgica de presentacin y la lgica de negocio. Vers dos variantes de cdigo en este sentido:
OPCIN 1) Puedes "cachear" (almacenar) el mdulo en una variable y luego usarlo para crear tus
controladores, factoras, etc.
var nuevaApp = angular.module('nuevaApp', []);
nuevaApp.controller( ... );

OPCIN 2) Aunque en muchos casos vers que ese objeto module ni siquiera se guarda en una variable,
sino que se encadenan las creaciones de los controladores o factoras todo seguido. A esto ltimo se suele
llamar estilo "Fluent"
angular
.module('nuevaApp', [])
.controller( ... )
.factory( ... );

Estas dos opciones proponen estilos de cdigo distintos. En la segunda opcin, al encadenar las llamadas
desde la creacin del mdulo hasta los controladores u otras cosas que necesitemos, nos estamos ahorrando
la creacin de una variable global, eliminando posibilidad de que colisione con otras del mismo nombre que
haya en otras partes de tu aplicacin. Como te imaginars, se recomienda la OPCIN 2).

Nota: Los mdulos tienen mucha importancia en AngularJS, por lo que aprenderemos a hacer muchas
cosas con ellos. De momento me interesan para crear controladores y poder avanar un poco en los
ejemplos prcticos del Manual de AngularJS, as que no nos vamos a detener mucho en ellos todava.

Acceder a un mdulo ya creado en nuestra aplicacin

El mdulo lo crears una vez, pero puedes necesitarlo en diversos puntos de tu cdigo. Si lo has cacheado
en una variable global, tal como se comentaba en la OPCIN 1) del punto anterior, podrs acceder a l en
cualquier lugar de tu aplicacin. Sin embargo, habamos dicho que no era la opcin ms recomendable, as
que necesitamos alguna otra manera de acceder a un mdulo ya creado.
Lo conseguimos por medio del mismo mtodo module() que utilizamos para crear el mdulo, solo que en
esta ocasin solo le indicaremos el mdulo al que queremos acceder.
angular.module('nuevaApp')

http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 37 de 129

Manual de AngularJS

Por si no has visto la diferencia con angular.module('nombreModulo', []) creamos un mdulo y con
angular.module('nombreModulo') recuperamos un mdulo que haya sido creado anteriormente con el
nombre 'nombreModulo'.

Mdulos en adelante
Me gustara terminar el artculo con un ejemplo prctico de uso mdulos en AngularJS pero si utilizamos
simplemente el nuevo conocimiento de este artculo sera complicado. En realidad los mdulos sirven como
base para implementar muchas cosas en AngularJS, por lo que enseguida les sacaremos bastante provecho.
En el siguiente artculo nos introduciremos en los controladores y comenzaremos a utilizar el famoso
"scope". Para todo ello es condicin indispensable comenzar con un mdulo, as que las prcticas en esta
ocasin las dejaremos para ms adelante.

Este artculo es obra de Pedro Hurtado

Fue publicado por primera vez en 29/09/2014
Disponible online en http://desarrolloweb.com/articulos/modulo-objeto-module-angularjs.html

Controladores, controller en AngularJS

Comenzamos a entender los controladores. Conocemos lo que es un controller en AngularJS, para
qu se usa y qu tipo de cdigo deben tener, introducimos tambin el concepto de scope en
Angular.
Los controladores nos permiten mediante programacin implementar la lgica de la presentacin en
AngularJS. En ellos podemos mantener el cdigo necesario para inicializar una aplicacin, gestionar los
eventos, etc. Podemos decir que gestionan el flujo de la parte del cliente, lo que sera programacin para
implementar la funcionalidad asociada a la presentacin.
En lneas generales podemos entender que los controladores nos sirven para separar ciertas partes del
cdigo de una aplicacin y evitar que escribamos Javascript en la vista. Es decir para que el HTML utilizado
para la presentacin no se mezcle con el Javascript para darle vida.

Nota: Los que ya conocen el MVC podrn hacerse una idea ms concreta del cometido de los
controladores. Si no es tu caso, no te preocupes porque en futuros artculos podrs leer de manera
terica el MVC y de manera particular cmo se aplica este paradigma en AngularJS. Para los que no
sepan MVC y quieran aprender de qu se trata en general, recomendamos la lectura del artculo sobre el
paradigma MVC.

http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 38 de 129

Manual de AngularJS

Un controlador puede ser agregado al DOM mediante la directiva ngController (con el atributo ngcontroller en la etiqueta HTML) y a partir de entonces tendremos disponible en esa etiqueta (y todas sus
hijas) una serie de datos. Esos datos son los que necesitars en la vista para hacer la parte de presentacin y
es lo que asociaramos en el MVC con el "modelo". En la terminologa de Angular al modelo se le llama
"scope" y dentro de poco vamos a explicarlo un poco mejor.
A los controladores podemos inyectarles valores o constantes. Como su propio nombre indica, las
constantes son las que no van a cambiar a lo largo del uso de la aplicacin y los valores son aquellas
variables cuyo dato puede cambiar durante la ejecucin de una aplicacin. Tambin podremos inyectar
servicios y factoras, componentes muy parecidos entre s y que veremos ms adelante.

Nota: Sin entrar a describir de momento lo que son "services" y "factories" puedes simplemente
recordar que su utilidad es la de encapsular cdigo.

Concepto de Scope
Para poder introducir los controladores debemos detenernos antes en un concepto que se repite hasta la
saciedad dentro de la literatura de AngularJS, el "scope". De hecho, tal como dice la documentacin de
AngularJS, el cometido de un controlador consiste en desempear una funcin constructora capaz de
aumentar el Scope.
El "scope" es la pieza ms importante del motor de AngularJS y es donde estn los datos que se
tienen que manejar dentro de la parte de presentacin.
El scope es un gran contenedor de datos, que transporta y hace visible la informacin necesaria para
implementar la aplicacin, desde el controlador a la vista y desde la vista al controlador. En trminos de
cdigo el scope no es ms que un objeto al que puedes asignar propiedades nuevas, con los datos que
necesites, o incluso con funciones (mtodos).
Esos datos y esas funciones estn visibles tanto en el Javascript de los controladores como en el HTML de
las vistas, sin que tengamos que realizar ningn cdigo adicional, pues Angular ya se encarga de ello
automticamente. Adems, cuando surgen cambios en los datos se propagan entre los controladores y las
vistas automticamente. Esto se realiza por un mecanismo que llamamos "binding", y en AngularJS tambin
"doble binding" (en espaol sera enlace), que explicaremos con detalle en futuros artculos.
As pues, desde los controladores vamos a ser capaces de trabajar con el scope de una manera minuciosa,
http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 39 de 129

Manual de AngularJS

agregando o modificando informacin segn lo requiera nuestra aplicacin.

Nota: Hasta el momento en este Manual de AngularJS hemos usado el scope en varias ocasiones y ya
hemos dicho que representa al modelo, del paradigma MVC. Siempre que hemos usado el scope en
HTML ha sido 1) agregando partes de la pgina al modelo mediante la directiva ngModel, por ejemplo
datos que se escriban en un campo de texto o se selecionen en un campo select, o 2) volcando
informacin en el HTML mediante expresiones escritas entre dos llaves {{ }}.

Todo eso estaba muy bien, sin embargo en trminos de programacin necesitamos un lugar donde escribir
todo el Javascript necesario para implementar la lgica de la aplicacin. Integrar el Javascript dentro del
HTML no es nada recomendable, por diversos motivos que ya se conocen. Ya dijimos adems que dentro
del cdigo HTML, no se puede (o mejor dicho, no se debera) hacer clculos, asignaciones de valores y en
resumen cdigo que represente la lgica de nuestras aplicaciones. Todo ello ir en los controladores.

Qu hacer y qu no hacer desde los controladores

Ahora vamos a ver qu tipo de operaciones debemos incluir dentro del cdigo de los controladores. Entre
otras cosas y por ahora debes saber:
Los controladores son adecuados para inicializar el estado del scope para que nuestra
aplicacin tenga los datos necesarios para comenzar a funcionar y pueda presentar informacin
correcta al usuario en la vista.
Adems es el lugar adecuado para escribir cdigo que aada funcionalidades o
comportamientos (mtodos, funciones) al scope.
Con el controlador no deberas en ningn caso manipular el DOM de la pgina, pues los
controladores deben de ser agnsticos a cmo est construido el HTML del documento donde van a estar
trabajando.
Tampoco son adecuados para formatear la entrada de datos o filtrar la salida, ni intercambiar estados entre
distintos controladores. Para hacer todo eso existen dentro de AngularJS diversos componentes
especializados.

Cmo es un controlador en AngularJS

El cdigo necesario para crear un controlador en AngularJS tendr este aspecto:
var app = angular.module("miapp", []);
app.controller("miappCtrl", function(){
var scope = this;
scope.datoScope = "valor";

scope.metodoScope = function(){
scope.datoScope = "otra cosa";
}
});

http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 40 de 129

Manual de AngularJS

Como puedes comprobar, resulta un tanto complejo. Adems tenemos que explicarte cmo se engancha
este controlador dentro del cdigo HTML. Para explicar todo eso con calma necesitamos alargarnos
bastante, as que lo veremos en el siguiente artculo. Adems, te explicaremos varias alternativas de cdigo
para trabajar con controladores que se usan habitualmente en AngularJS, con mejores y peores prcticas.

Este artculo es obra de Xavier Jorge Cerd

Fue publicado por primera vez en 05/10/2014
Disponible online en http://desarrolloweb.com/articulos/controladores-controller-angularjs.html

Variantes para crear controladores en AngularJS

Este artculo contiene varias aproximaciones a controladores creados en AngularJS con diferentes
estilos de codificacin que nos aportan diferentes posibilidades.
De momento est bien de teora. Despus de aprender qu son los controladores y qu funciones
desempean en Angular, estamos seguros que querrs poner manos en el cdigo y lo vamos a hacer con un
nuevo ejercicio que, aun siendo sencillo, nos facilite experimentar con un primer controlador.
Adems, estudiaremos diversas variantes que nos pueden aportar algunas ventajas, inconvenientes y resolver
ciertas situaciones. Las veremos todas con ejemplos y las explicaciones sobre qu diferencias nos
encontramos.
El proceso de crear y usar un controlador es sencillo, pero no inmediato, requiere un pequeo guin de
tareas que paso a detallar para que tengas claro de antemano lo que vamos a hacer. Es ms largo expresarlo
con texto que con cdigo y aunque al principio parezca bastante, en seguida lo hars mecnicamente y no
tendrs que pensar mucho para ello. Bsicamente para poner nuestro primer controlador en marcha
necesitamos:
Crear un mdulo (module de AngularJS)
Mediante el mtodo controller() de nuestro "module", asignarle una funcin constructora que
Angular usar cuando deba crear nuestro controlador
Usar la directiva ng-controller, asignndole el nombre de nuestro controlador, en el HTML.
Colocaremos esa directiva en el pedazo del DOM donde queremos tener acceso al scope.

http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 41 de 129

Manual de AngularJS

En este punto queremos aclarar que existen diversas alternativas de cdigo para crear el Javascript necesario
para definir nuestro controlador. Vamos a comenzar por una que es muy habitual de ver en diversos
tutoriales y documentacin, aunque no es la mejor. Todas las formas funcionan, pero hay algunas que en
determinadas circunstacias pueden ser mejores. Luego las estudiaremos y explicaremos el motivo por el que
seran todava ms recomendadas para crear tus controladores.

Nota: El objetivo de este primer controlador es simplemente observar cul es el cdigo y la sintaxis
para crearlos. Realmente observars es un controlador muy tonto, pero espero me disculpes.
Buscaremos ms adelante ejemplos ms tiles.

OPCIN 1)
angular
.module('pruebaApp', [])
.controller('pruebaAppCtrl', function($scope){
$scope.algo = "Hola Angular, usando controller ms simple";
});

De esta manera estoy creando un mdulo llamado "pruebaApp". Sobre el mdulo invoco el mtodo
controller() y creo un controlador llamado "pruebaAppCtrl". En la creacin del controlador vers que se
especifica una funcin, ella es la que hace de constructora de nuestro controlador. A esa funcin le llega
como parmetro $scope que es el nombre de variable donde tendrs una referencia al conodido "scope" que
almacena los datos de mi modelo.
Dentro de la funcin del controlador hacemos poca cosa. De momento simplemente le asigno un valor a un
atributo de $scope. He creado un atributo nuevo en el objeto $scope que no exista y que se llama "algo"
($scope.algo). Con ello simplemente le estoy agregando un dato al modelo. Gracias al "binding" o enlace,
ese dato luego lo podr utilizar en el HTML.
De hecho, queremos ya echarle un vistazo al HTML que podramos tener para usar este controller.
<div ng-app="pruebaApp" ng-controller="pruebaAppCtrl">
{{algo}}
</div>

Como puedes ver, en el HTML indicamos el nombre del mdulo que se usar para implementar esta
aplicacin (que corresponde con el nombre del mdulo creado en el cdigo Javascript) y el nombre del
controlador (tambin corresponde con el nombre del controller que he creado con Javascript). Adems en
el HTML podrs encontrar la expresin {{algo}} que lo que hace es volcar como texto en la pgina el
contenido de la variable "algo". Esa variable pertenece al scope y la hemos inicializado en el cdigo del
controller.
El resultado es que en nuestra pgina aparecer el texto "Hola Angular, usando controller", que es el valor
que fue asignado en el atributo "algo" de $scope. De momento la aplicacin no es nada espectacular pero lo
http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 42 de 129

Manual de AngularJS

interesante es ver cmo se usa un controller.

VARIANTE OPCIN 1)
Existe una variante de este mismo ejemplo, al crear el controlador, que deja nuestro cdigo un poco ms
complejo, pero que ayuda en determinadas circunstancias. La clave aqu son los minimificadores de
Javascript (o minificadores), que sabemos que reducen el peso en bytes del cdigo compactndolo de
distintas maneras. Si los usas, el cdigo que hemos visto en el anterior apartado puede dar errores una vez
minimificado.
El problema qte puede surgir est en la inyeccin del $scope, que se recibe como parmetro en la funcin
constructora del controller.
function($scope)

Angular, al ver el nombre del parmetro "$scope", sabe perfectamente lo que tiene que inyectar en ese lugar.
Sin embargo, una vez minimificado, el nombre de esa variable "$scope" puede haberse cambiado por algo
como "a", lo que hara imposible que el framework sepa lo que debe de enviar. Eso se soluciona con un
cdigo como el siguiente.
angular
.module('pruebaApp', [])
.controller('pruebaAppCtrl', ['$scope', function($scope){
$scope.algo = "Hola Angular, usando controller!";
}]);

En este caso, en la llamada al mtodo que crea el controlador, controller(), ves un array que nos sirve para
inyectar las dependencias.
['$scope', function($scope){ ... }]

En este caso le estamos diciendo que el primer parmetro del controlador es '$scope', gracias al primer
elemento del array. Como las cadenas como '$scope' no se alteran despus de la minimizacin, podemos
estar seguros que le llegarn perfectamente a Angular. Entonces sabr que en el primer parmetro de la
funcin constructora del controlador esperas recibir el $scope'. Esto ser as independientemente del
nombre de la variable que se uses como primer parmetro.
Es cierto que la sintaxis parece un poco rebuscada, pero poco a poco te acostumbrars, pues realmente es
muy repetitivo.

Nota: Esto que acabamos de explicar para el tema de la inyeccin de dependencias sirve igual con
muchos otros elementos que podras necesitar en tus controladores. Osea, puedes inyectar del mismo
modo otras cosas aparte del $scope, como $http, etc. Esta variante de la opcin 1, debido al modo de
declarar la inyeccin de dependencias, es ms adecuada y es algo retomaremos tambin en futuras
entregas de este manual.
http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 43 de 129

Manual de AngularJS

OPCIN 2)
He colocado como primera opcin porque es ms habitual en tutoriales y puedes haberla ledo en la
documentacin del framework o en diversas presentaciones por ah. Sin embargo, es ms recomendada esta
segunda alternativa que os presentamos a continuacin.
angular
.module('pruebaApp', [])
.controller("pruebaAppCtrl", function(){
this.algo = "Esto funciona! Gracias Angular";
});

Como estars observando, el controlador es prcticamente igual. Ahora la diferencia es que no ests
inyectando el $scope. Ahora el contexto donde adjuntar las variables que queremos enviar a la vista no lo
sacamos de $scope, sino que lo obtenemos directamente a travs de la variable "this".
En este caso, para cargar un nuevo dato al modelo, llamado "algo", lo hacemos a travs de this.algo y le
asignamos aquello que deseemos.
Esta alternativa implica algn cambio en el HTML con respecto a lo que vimos anteriormente.
<div ng-app="pruebaApp" ng-controller="pruebaAppCtrl as vm">
{{vm.algo}}
</div>

El cambio fundamental lo encuentras al declarar la directiva, en el valor del atributo ng-controller.

ng-controller="pruebaAppCtrl as vm"

En este caso estamos dicindole no solo el nombre del controlador, sino adems estamos informando que
dentro de ese DOM el scope ser conocido con la variable "vm". Por tanto, ahora cuando deseemos
acceder a datos de ese modelo que nos ofrece el controlador debemos indicar el nombre del scope.
{{vm.algo}}

Nota: La recomendacin de esta opcin 2 se basa en que as puedes tener varios controladores en tu
pgina, incluso anidados unos dentro de otros, y los datos que nos ofrece cada uno estn separados en
distintos espacios de nombres. Esto quizs ahora no te dice nada, pero s que evita en el futuro
habituales problemticas de desarrollo con AngularJS.

http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 44 de 129

Manual de AngularJS

Ahora que hemos visto estas dos opciones y dado que nos recomiendan la segunda, la utilizaremos de
manera preferente a lo largo del manual. De momento esto es todo, esperamos que con lo que sabes ya
tengas ideas para ir probando nuevos ejemplos. Nosotros en el siguiente artculo crearemos un controlador
que ser un poco ms complejo y til.
Acabamos este artculo con un vdeo de nuestro canal de Youtube donde encontrars ms informacin
sobre la creacin de controladores en AngularJS. Veremos diferentes variantes del cdigo realizadas en
directo. Tambin encontrars explicaciones ofrecidas por varios compaeros expertos en este framework
Javascript.

Para ver este vdeo es necesario visitar el artculo original en:

http://desarrolloweb.com/articulos/ejercicio-controladores-angularjs.html
Este artculo es obra de Alberto Basalo
Fue publicado por primera vez en 07/10/2014
Disponible online en http://desarrolloweb.com/articulos/ejercicio-controladores-angularjs.html

Segundo ejercicio con controller en AngularJS

Crearemos una aplicacin sencilla con la intencin de practicar con controller en AngularJS,
inicializando datos en el Scope, creando manejadores de eventos, etc.
Vamos a hacer un ejercicio prctico de todo lo que venimos aprendiendo con AngularJS y donde afianzar
particularmente lo aprendido sobre la creacin de controladores .
El ejercicio es muy sencillo en realidad. Es un "acumulador" en el que tenemos un campo de texto para
escribir una cantidad y un par de botones con operaciones de sumar y restar. Luego tenemos un contador
que se va incrementando con esas operaciones de sumas y restas sobre un total. En si no sirve para mucho
lo que vamos a construir, lo hacemos ms bien con fines didcticos.

Puedes ver el ejercicio en marcha en Codepen antes de pasar a estudiar y explicar el cdigo con el que se ha
hecho.

Cdigo HTML
Veamos primero la parte del HTML usada para resolver este ejercicio.

http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 45 de 129

Manual de AngularJS

<div ng-app="acumuladorApp" ng-controller="acumuladorAppCtrl as vm">

<h1>Acumulador</h1>
<h2>Control de operacin:</h2>
Cunto? <input type="text" ng-model="vm.cuanto" size="4" />
<br />
<input type="button" value="+" ng-click="vm.sumar()"/>
<input type="button" value="-" ng-click="vm.restar()"/>
<h2>Totales:</h2>
En el acumulador llevamos <span>{{vm.total}}</span>
</div>

Voy describiendo los detalles ms importantes que debes apreciar.

Al hacer el bootstrap (arranque) de la aplicacin (directiva ngApp) se indica el nombre del mdulo:
"acumuladorApp".
Se indica el nombre del controlador con la directiva ngController y el valor "acumuladorAppCtrl".
Con la sintaxis de "acumuladorAppCtrl as vm" indicamos que el scope dentro del espacio de
etiquetas marcado para este controlador, se conocer por "vm". Podramos llamar como
desesemos al scope, en lugar "vm", en definitiva es como una variable donde tendremos
propiedades y mtodos. En otras palabras, se ha creado un namespace (espacio de nombres) para
los datos que nos vienen del modelo (scope) gracias al controlador "acumuladorAppCtrl".
Puedes llamar de cualquier manera tambin tanto a mdulo como a controlador, pero se usan esos
por convencin.
El campo INPUT de texto tiene una directiva ngModel para decirle a AngularJS que ese es un dato
del modelo. Ftate que el nombre del dato en el modelo se accede a travs del espacio de nombres
definido en el controlador: "vm.cuanto".
Luego encuentras dos INPUT tipo button que me sirven para realizar la accin de acumular,
positiva o negativamente. Ambos tienen una directiva ngClick que nos sirve para expresar lo que
debe ocurrir con un clic. Lo interesante aqu es que llamamos a dos funciones que estn definidas en
el scope, mediante el espacio de nombres "vm", nuestro modelo. El cdigo de esos mtodos
(funciones que hacen en este caso de manejadores de eventos) ha sido definido en el controlador, lo
veremos ms adelante.
Por ltimo encontramos un {{vm.total}} que es un dato que estar en el scope y en el que llevamos
la cuenta de todo lo que se ha sumado o restado con el acumulador.

Nota: Por si no te has dado cuenta, el espacio de nombres donde tendremos al scope se ha nombrado
como "vm". Ya dijimos que se puede usar cualquier nombre de varialble, eso es lo de menos, lo que
queremos que se note es que "vm" son las siglas de "View Model", osea, el "modelo de la vista". Es algo
que tiene que ver con el paradigma MVC en la variante en la que trabajamos con Angular. Hablaremos
de eso ms adelante.

http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 46 de 129

Manual de AngularJS

Cdigo Javascript
Ahora pasemos a la parte donde codificamos nuestro Javascript para darle vida a este ejercicio.
angular
.module('acumuladorApp', [])
.controller("acumuladorAppCtrl", controladorPrincipal);

function controladorPrincipal(){
//esta funcin es mi controlador
var scope = this;
scope.total = 0;
scope.cuanto = 0;

scope.sumar = function(){
scope.total += parseInt(scope.cuanto);
}
scope.restar = function(){
scope.total -= parseInt(scope.cuanto);
}
};

Vamos describiendo las principales partes del cdigo.

Con "angular" en la primera lnea accedo a la variable que me crea angular, disponible para acceder a
las funcionalidades del framework.
En la segunda lnea creamos el mdulo, indicando el nombre (que es igual a lo que se puso como
valor en la directiva ngApp del HTML) y el array de las dependencias, de momento vaco.
En la tercera lnea, con un encadenamiento (chaining) definimos el controlador. Indicamos como
primer parmetro el nombre del controlador, definido en la directiva ngController del HTML, y
como segundo parmetro colocamos la funcin que se encargar de construir el controlador.
Indicamos el nombre de la funcin simplemente, sin los parntesis, pues no es una llamada a la
funcin sino simplemente su nombre.
Luego se define la funcin del controlador. Esa funcin es capaz de escribir datos en el scope, as
como mtodos.
En la funcin accedemos al scope por medio de "this". Fjate que en la primera lnea de la funcin
tienes var scope = this; esto es simplemente opcional y se puede hacer para mantener la
terminologa de AngularJS de llamar scope a lo que vas generando en el controlador, pero podra
perfectamente referirme a l todo el tiempo con "this".
En el scope inicializo dos valores, total y cuanto, mediante scope.total=0 y scope.cuanto=0.
Luego genero dos mtodos que usaremos para los manejadores de eventos de los botones de sumar
y restar. Esas funciones tienen el scope disponible tambin y en su cdigo se accede y modifica a los
datos del scope.

http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 47 de 129

Manual de AngularJS

Nota: Tambin hay varias aproximaciones para definir este Javascript con los modulos y controladores
de Angular. Es recomendable la creacin de una envoltura para tu Javascript, por medio de una funcin
que se autoinvoca. Esto lo veremos ms adelante, puesto que no queremos complicar ms el cdigo
todava.

Con eso tenemos el ejercicio completo, todo lo dems para que esto funcione es tarea de AngularJS. De
manera declarativa en el HTML hemos dicho qu son las cosas con las que se va a trabajar en la aplicacin y
luego hemos terminado de definir e inicializar los datos en el controlador, as como escribir en cdigo las
funcionalidades necesarias para que el ejercicio tome vida.

Variante de este mismo ejercicio pero sin "controller as"

En la resolucin, que hemos comentado antes, a este ejercicio hemos usado una alternativa de la directiva
de ngController en la que se le asigna un espacio de nombres al scope "acumuladorAppCtrl as vm". Esto se
conoce habitualmente como "controller as" y ya comentamos en el artculo anterior dedicado a los
controladores que es algo relativamente nuevo y que muchas veces la codificacin que encontrars en otros
textos es un poco diferente.
Solo a modo de gua para quien est acostumbrado a trabajar de otra manera, y para que entiendas otros
cdigos antiguos que podrs encontrar en otras guas de Angular, pongo aqu el cdigo de este mismo
ejercicio pero sin el "controller as".
El cdigo HTML
<div ng-app="acumuladorApp" ng-controller="acumuladorAppCtrl">
<h1>Acumulador</h1>
<h2>Control de operacin:</h2>
Cunto? <input type="text" ng-model="cuanto" size="4" />
<br />
<input type="button" value="+" ng-click="sumar()"/>
<input type="button" value="-" ng-click="restar()"/>
<h2>Totales:</h2>
En el acumulador llevamos <span>{{total}}</span>
</div>

El cdigo Javascript
var acumuladorApp = angular.module('acumuladorApp', []);
acumuladorApp.controller("acumuladorAppCtrl", ["$scope", function($scope){
//esta funcin es mi controlador
//var $scope = this;
$scope.total = 0;
$scope.cuanto = 0;

$scope.sumar = function(){
$scope.total += parseInt($scope.cuanto);
}

http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 48 de 129

Manual de AngularJS

$scope.restar = function(){
$scope.total -= parseInt($scope.cuanto);
}
}]);

No comento el cdigo ms, pues es muy parecido al anterior, simplemente se deja de usar el espacio de
nombres y al definir la funcin del controlador se inyecta el $scope de otra manera. Te dejo a ti la tarea de
encontrar todas las diferencias.

Este artculo es obra de Miguel Angel Alvarez

Fue publicado por primera vez en 07/10/2014
Disponible online en http://desarrolloweb.com/articulos/segundo-ejercicio-controller-angularjs.html

http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 49 de 129

Manual de AngularJS

Explorando directivas a fondo

Para trabajar con AngularJS necesitamos dominar una serie de directivas que se encuentran presentes en el
ncleo del framework, adems de apoyarnos en otras directivas creadas por la comunidad. Las directivas
enriquecen nuestro HTML y nos permiten realizar operaciones tiles sobre la pgina. Ahora exploraremos
algunas directivas fundamentales con mayor detalle.

Directiva ngClass en AngularJS

Explicaciones de las alternativas posibles de uso de la directiva ngClass de AngularJS con ejemplos
prcticos.
Seguimos aprendiendo aspectos bsicos sobre AngularJS y nos vamos a detener en una directiva muy til
que nos ayuda a definir clases CSS (class) que se le deben aplicar a los elementos bajo ciertas circunstancias.
La idea es poder definir el aspecto de nuestra aplicacin en base a los datos que tengamos en el modelo,
aplicando unas class de CSS u otras dependiendo de valores de propiedades del scope o de expresiones que
podamos construir.

Existen tres posibles variantes de tipos que acepta la directiva ngClass y que podemos usar siempre que
deseemos.
Asignarle una propiedad del scope que sea una cadena de texto. En este caso esa cadena se coloca
como valor en el atributo class. Si en esa cadena existen varios nombres de clases separados por un
espacio en blanco, esas clases se aplicarn en conjunto al elemento.
Asignarle una propiedad del scope que contenga un array de cadenas. En ese caso se asignan como
clases todos los nombres que haya en las casillas del array.
Asignarle como valor a ng-class un objeto. En ese caso tendr pares clave valor para especificar
nombres de clases y expresiones que deban cumplirse para que stas se apliquen. Lo veremos mejor
con un ejemplo.
Ahora veremos ejemplos de cada una de las tres posibilidades comentadas.
http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 50 de 129

Manual de AngularJS

Ejemplo 1) Asignar una propiedad del scope que contiene una cadena
Es tan sencillo como indicar esa propiedad dentro del atributo ng-class, como se ve a continuacin.
<h1 ng-class="vm.tamTitular">Acumulador</h1>
<select ng-model="vm.tamTitular">
<option value="titularpeq">Peque</option>
<option value="titulargran">Gran</option>
</select>

Como puedes ver, tenemos un encabezado H1 con ng-class asignado a vm.tamTitular. Esa propiedad del
scope se cre a partir de un campo SELECT que est a continuacin. Por tanto, cuando cambie el option
seleccionado en el campo, cambiar la class asociada al elemento H1.
Tal como habrs deducido, las dos posibles class que se le van a asignar al encabezado sern los value de los
OPTION.

Ejemplo 2) Asignar un array de cadenas

Es tan sencillo como definir un array de alguna manera y luego introducirlo dentro de nuestra directiva. Por
facilitar las cosas voy a definir el array de manera literal en el controlador.
vm.clases = ["uno", "dos", "tres"];

Luego podremos asociar ese array de cadenas, colocando todos los nombres de clases a un elemento de la
pgina con la directiva ngClass.
<h2 ng-class="vm.clases">Control de operacin:</h2>

Como resultado de esa directiva a nuestro encabezado H2 se le van a aplicar las tres clases "uno", "dos" y
"tres".

Ejemplo 3) Asignar un objeto con uno o varios pares clave, valor

Este es el uso ms complejo de ngClass, pero tambin el ms potente. Nos permite definir expresiones y
gracias a ellas Angular sabr si debe colocar o no una clase CSS en concreto. Se ve bien con un ejemplo
delante.
<p ng-class="{positivo: vm.total>=0, negativo: vm.total<0}">
En el acumulador llevamos <span>{{vm.total}}</span>
</p>

Este prrafo nos muestra un valor total de una cuenta. Ese valor lo sacamos de la propiedad vm.total y esa
misma propiedad es la que usamos para definir la clase de CSS que vamos a asociar como estilo al prrafo.
http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 51 de 129

Manual de AngularJS

Ahora echa un vistazo al atributo ng-class y vers que lo que le indicamos es un objeto, pues est entre
llaves. Ese objeto tiene un nmero de pares clave/valor indeterminado, puede ser uno o varios. Cada uno
de esos pares clave/valor nos sirven para definir si debe o no aplicarse una clase en concreto.
En la clave colocas el nombre de la clase, class de tu CSS, que Angular puede colocar si se cumple una
expresin boleana. Como valor colocamos la expresin boleana a evaluar por AngularJS para que el sistema
deduzca si se debe aplicar esa clase o no.
En nuestro ejemplo se aplicar la clase "positivo" en caso que la propiedad vm.total sea mayor o igual que
cero. Se aplicar la clase "negativo" en caso que la propiedad vm.total tenga un valor menor que cero.

Ejercicio englobando estos tres usos de ngClass

Bien, con esto ya sabes todo lo que necesitas para poder trabajar con tus ngClass. A continuacin
encuentras un ejercicio en el que simplemente se usan estos mismos ejemplos relatados hasta ahora. Si lo
has entendido no tendrs problema alguno al ver el cdigo siguiente.

Nota: Para la realizacin de este cdigo hemos partido como base del ejemplo relatado en el artculo
Segundo ejercicio con controller en AngularJS. En realidad solo hemos agregado los tres posibles usos
de la directiva ngClass explicados en este artculo.

Lo vemos por partes. Primero el cdigo HTML:

<div ng-app="acumuladorApp" ng-controller="acumuladorAppCtrl as vm">
<h1 ng-class="vm.tamTitular">Acumulador</h1>
<select ng-model="vm.tamTitular">
<option value="titularpeq">Peque</option>
<option value="titulargran">Gran</option>
</select>
<h2 ng-class="vm.clases">Control de operacin:</h2>
Cunto? <input type="text" ng-model="vm.cuanto" size="4" placeholder="0" />
<br />
<input type="button" value="+" ng-click="vm.sumar()"/>
<input type="button" value="-" ng-click="vm.restar()"/>
<h2>Totales:</h2>
<p ng-class="{positivo: vm.total>=0, negativo: vm.total<0}">
En el acumulador llevamos <span>{{vm.total}}</span>
</p>
</div>

Ahora puedes ver el cdigo CSS con la definicin de varias clases con las que vamos a jugar.
.negativo {
color: red;
}
.positivo {
color: #33f;

http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 52 de 129

Manual de AngularJS

}
.titularpeq{
font-size: 10pt;
}
.titulargran{
font-size: 18pt;
}
.uno{
background-color: #666;
}
.dos{
color: #fff;
}
.tres{
font-size: 30px;
}

Por ltimo el cdigo Javascript de nuestro controlador. Como deca, encontrars diversas cosas adicionales
a las comentadas en este artculo, pero no te deben extraar porque fueron explicadas anteriormente en el
Manual de AngularJS.
angular
.module('acumuladorApp', [])
.controller("acumuladorAppCtrl", controladorPrincipal);

function controladorPrincipal(){
//esta funcin es mi controlador
var vm = this;
vm.total = 0;
//scope.cuanto = 0;
vm.tamTitular = "titularpeq"

vm.sumar = function(){
vm.total += parseInt(vm.cuanto);
}
vm.restar = function(){
vm.total -= parseInt(vm.cuanto);
}
vm.clases = ["uno", "dos", "tres"];
};

Eso es todo, esperamos que puedas disfrutar de esta til directiva en tus proyectos. Con un poco de
imaginacin comprobars la potencia de ngClass.

Este artculo es obra de Miguel Angel Alvarez

Fue publicado por primera vez en 27/10/2014
Disponible online en http://desarrolloweb.com/articulos/directiva-ngclass-angularjs.html

http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 53 de 129

Manual de AngularJS

Trabajando con campos checkbox en AngularJS

Explicaciones y prcticas con campos input checkbox con AngularJS, conociendo las directivas
ngChecked, ngTrueValue, ngFalseValue, ngChecked.
En el estilo de aplicaciones que se hacen con AngularJS trabajas de manera intensiva con campos de
formulario. Puedes leer este artculo para aprender todo sobre los checkbox y hacer algn ejemplo prctico.
En Angular los campos input checkbox tienen una serie de directivas que podemos usar:
* ngModel:
* ngTrueValue:
* ngFalseValue:
* ngChange:

Nota: Adems, tenemos ngChecked, aunque esta directiva no est en la documentacin del campo
checkbox, sino en otra pgina. https://docs.angularjs.org/api/ng/directive/ngChecked Viene a explicar
que sirve para conservar un valor en el atributo checked. Ese atributo en HTML funciona como un
boleano, si se encuentra el atributo se entiende que est chequeado y si no se encuentra checked es que
no debe estar marcado. Por ello los navegadores no estn obligados a memorizar ningn valor en el
checked. En esos casos puedes usar ngChecked. En definitiva, en la prctica ese campo sirve para
indicar una variable del scope donde se pueda deducir si el elemento debe estar o no marcado (checked).

Directiva ngModel
Si quieres usar un checkbox lo ms normal es que indiques la referencia de tu modelo donde quieres que se
guarde su estado.
<input type="checkbox" ng-model="vm.activo" />

A partir de este momento el checkbox est asociado a tu scope en vm.activo. Pero un detalle, en el scope
todava no est creada esa propiedad hasta que no pulses encima del checkbox para activarlo o desactivarlo.
En ese momento pasa a existir vm.activo en el modelo, aunque tambin si lo deseamos podemos
inicializarla en un controlador.
http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 54 de 129

Manual de AngularJS

vm.activo = true;

Como sabes, durante la vida de tu aplicacin, el estado del checkbox se traslada automticamente desde la
vista al modelo y desde el modelo a la vista, por el proceso conocido por "doble binding". En resumen, si
en cualquier momento desde el Javascript cambias el valor de vm.activo, siempre se actualizar la vista. Por
supuesto, si en la vista pulsas sobre el campo para activarlo o desactivarlo, en el modelo tambin quedar
reflejado el nuevo estado.

Directivas ngTrueValue y ngFalseValue

En tu modelo, la propiedad vm.activo podr tener dos valores, true o false, que corresponden a los estos de
estar marcado el checkbox o no marcado. Sin embargo, puede resultar til tener otros valores en caso de
estar activos o no, en vez del boleano. Para ello usas estas directivas.
<input type="checkbox" ng-model="vm.clarooscuro" ng-true-value="claro" ng-false-value="oscuro" />

Directiva ngChange
Esta directiva sirve para especificar acciones cuando cambia el estado del checkbox. Pero atencin, porque
son solo cambios debidos a la interaccin con el usuario. Es decir, si mediante Javascript cambiamos el
modelo asociado a ese checkbox, cambindolo de un estado a otro no se activar el evento ng-change. La
vista seguir alterando el estado del campo, gracias al mencionado binding, pero la expresin que hayas
colocado en ng-change no se ejecutar.
<input type="checkbox" ng-change="vm.avisar()">

Ejemplo de uso de estas directivas en checkbox

Ahora puedes ver un cdigo HTML que trabaja con campos checkbox y que pone en marcha los puntos
vistos en este artculo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Trabajando con checkboxes AngularJS</title>
</head>
<body ng-app="app" ng-controller="appCtrl as vm">

<p>
<input type="checkbox" ng-model="vm.activo" ng-change="vm.avisar()">
Este campo es vm.activo y su valor en el modelo es {{ vm.activo }}.
<br />
Tiene adems un ng-change asociado con el mtodo vm.avisar().
</p>
<p>

http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 55 de 129

Manual de AngularJS

<input type="checkbox" ng-model="vm.clarooscuro" ng-true-value="claro" ng-false-value="oscuro" />

Este campo tiene el value modificado. Ahora vale {{ vm.clarooscuro }}
</p>
<p>
<input type="button" ng-click="vm.activo=true" value="pulsa para cambiar la propiedad del modelo del primer checkbox a true"> Observars
que aunque el estado pueda cambiar, no se invoca al ng-change de ese primer checkbox.
</p>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.24/angular.min.js"></script>
<script>
var app = angular.module("app", [])
app.controller("appCtrl", function(){
var vm = this;
//podramos inicializar valores del modelo
//vm.activo = false;

vm.avisar = function(){
console.log("cambi");
}
});
</script>
</body>
</html>

Observa que al iniciarse por primera vez la pgina los valores del modelo (definidos en los checkboxes con
ng-model) no estn inicializados. Por ello las expresiones donde se vuelcan estos datos no muestran valor
alguno. Luego, cuando cambias el estado de los checkboxes ya se empieza a ver el estado de los elementos.
Esta situacin podra cambiar solo con inicializar esas propiedades en el controlador. Lo hemos colocado en
el cdigo comentado para que se vea bien.
El otro detalle que igual no salta a la vista es la llamada a la funcin del modelo vm.avisar(), colocada en el
ng-change del primer checkbox, que no se llama cuando se cambia el estado del campo como consecuencia
del Javascript. Demostrar eso es el motivo de la existencia del botn.
Hay infinidad de prcticas con checkboxes. Con lo que has visto aqu seguramente sepas desempear
cualquier situacin.

Este artculo es obra de Miguel Angel Alvarez

Fue publicado por primera vez en 17/11/2014
Disponible online en http://desarrolloweb.com/articulos/trabajando-campos-checkbox-angularjs.html

Filtrar, ordenar y otras variables embutidas en la directiva ngRepeat

Usos ms detallados de la directiva ngRepeat para filtrar, ordenar los elementos y acceder a
variables embutidas que nos dan informacin sobre las repeticiones.
La directiva ngRepeat de AngularJS es una de esas cosas que llaman la atencin, por la sencillez y rapidez
con la que se puede implementar un bucle que nos repite una plantilla HTML, pero sobre todo por su
http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 56 de 129

Manual de AngularJS

potencia.
La directiva ya la hemos usado en diversos ejemplos anteriormente, incluso tenemos un artculo anterior
donde se introdujeron algunos detalles bsicos de ng-repeat para empezar a usarla. Ahora queremos
profundizar un poco ms en otros usos que resultarn muy tiles para cualquier tipo de aplicacin web.
En la documentacin de la directiva ngRepeat encuentras muchos datos tiles, aqui te vamos a resumir
algunos y vamos a realizar un ejemplo que lo ponga todo en prctica.

Sintaxis ngRepeat
Nos tenemos que familiarizar primero con la sintaxis usada para especificar el comportamiento del bucle en
ngRepeat. Aunque ya lo hemos visto en cantidad de ejemplos, comencemos por repasar la sintaxis bsica.
<p ng-repeat="elem in elementos">
{{ elem }}
</p>

En la directiva indicamos el recorrido a una coleccin y la variable donde vamos a tener el elemento actual:
"elem in elementos". En este caso "elementos" es la coleccin que vamos a recorrer en el bucle y "elem" es
la variable donde vamos a tener el elemento actual en cada repeticin.
Pero eso no es lo nico que se puede marcar en esta directiva, tambin podremos especificar otras cosas,
colocando el caracter "|" (tubera / pipe) como separador.
ng-repeat="elem in elementos | filtros | ordenacion"

Tcnicamente podemos decir que dentro del HTML de tu repeticin tendrs un scope local, donde
encontrars el elemento actual sobre el que ests iterando, as como otras variables tiles que veremos
tambin, como $index que nos devuelve el ndice actual en el recorrido.

Filtrado en ngRepeat
El filtrado nos sirve para hacer una bsqueda dentro de los elementos de la coleccin que tenemos en un
array o en un objeto en nuestro modelo.

http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 57 de 129

Manual de AngularJS

Nota: Por supuesto, la coleccin est del lado del cliente completa y lo que hace el filter es simplemente
definir cules elementos de esa coleccin desean visualizarse en la repeticin. Osea, es un filtrado de
datos de los que ya disponemos, no un buscador que pueda buscar entre miles de elementos y solo
recibir unos pocos en el cliente. Cuando ests filtrando ya tienes esos elementos en la memoria de
Javascript en un array u objeto.

Se indica con la palabra filter, seguida por ":" y la cadena o variable donde est la cadena que nos sirve para
filtrar.
ng-repeat="cerveza in vm.cervezas | filter:'pale' "

Esto nos mostrar solo aquellas cervezas que tienen la palabra "pale" escrita por algn lado. Por supuesto,
en lugar de un literal de cadena para el filtrado, puedes usar una variable de tu modelo.
ng-repeat="cerveza in vm.cervezas | filter:vm.filtroCliente"

Ahora utilizars el contenido de la variable vm.filtroCliente para mostrar aquellos elementos que
corresponda.

Orden de los elementos en la repeticin

Ahora veamos cmo expresar el orden de visualizacin de los elementos en la repeticin. Para ello usamos
la palabra "ordenBy", seguido de ":" y el campo sobre el que se debe ordenar. Opcionalmente colocamos
despus si el orden es ascendente o descendente.
ng-repeat="cerveza in vm.cervezas | orderBy:'name':true"

En este caso ordenamos los elementos por el campo "name". Lgicamente debe de ser un atributo del
objeto que ests recorriendo en la coleccin. Luego opcionalmente colocamos un boleano para indicar el
orden. De manera predeterminada el orden es ascendente. Si el boleano es true, entonces el orden se hace
descendente y si es false, entonces es ascendente.
Nuevamente, el orden se indicar habitualmente a partir de variables de Javascript o del modelo de nuestra
vista. En un cdigo que podra ser como este:
ng-repeat="cerveza in vm.cervezas | orderBy:vm.campo:vm.orden"

Variables de la repeticin en el scope local

Como hemos dicho existe un scope local que nos expone el elemento actual de nuestra repeticin. Pero
adems tenemos una serie de variables que AngularJS nos ofrece de manera adicional. Son variables que
resultarn muy tiles para tus necesidades habituales en recorridos.
http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 58 de 129

Manual de AngularJS

Por ejemplo en el scope actual tenemos la variable $index, que nos indica el ndice actual en la iteracin. El
primer ndice recuerda que es cero, el segundo ser uno, etc. Para mostrar ese ndice hacemos como con
cualquier otro dato que exista en el scope, meterlo dentro de una expresin encerrada con dobles llaves.
<p ng-repeat="elem in elementos">
El elemento actual es {{ $index }} y su valor es {{ elem }}
</p>

Junto con el $index, este es el conjunto de variables inyectadas automticamente en el scope local:
$index, numrcico. Es el ndice de la iteracin.
$first, boleano, tendr el valor true para el primer elemento de la iteracin.
$middle, boleano, ser true en los elementos que no sean primero o ltimo.
$last, boleano, solo ser true en el ltimo elemento.
$even, boleano, ser true en caso que ese elemento sea impar en la lista de repeticin.
$odd, boleano, ser true en caso que el elemento sea de ndice par.

Ejercicio de repeticin con ng-repeat con filtrado, orden y variables de scope

local
Ahora vamos a ver el cdigo de un ejercicio que nos facilite practicar con estos sistemas para personalizar la
repeticin de un template en AngularJS.
El ejemplo es parecido al ejercicio anterior donde conocimos JSONP en AngularJS, solo que ahora
aplicamos las posibilidades de ngRepeat vistas en este artculo. Para ello hemos incorporado un par de
controles especiales, que nos permiten:
Escribir un texto para realizar el filtrado
Seleccionar el campo sobre el que queremos la ordenacin y si sta debe ser ascendente (orden
alfabtico porque se trata de campos que tienen cadenas) o descendente.
<div ng-app="apiApp" ng-controller="apiAppCtrl as vm">
<h1>Pruebo Ajax con JSONP</h1>
<p>
Busca cerveza:
<input type="text" ng-model="vm.nombre"> <input type="button" value="Buscar" ng-click="vm.buscaCervezas()">
</p>
<aside>
<h2>Filtra:</h2>
<input type="text" ng-model="vm.filtroCliente">
<h2>Orden</h2>
<p>
<button ng-click="vm.orden=false">Alfabetico</button>

http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 59 de 129

Manual de AngularJS

<br />
<button ng-click="vm.orden=true">Contrario</button>
</p>
<p>
<input type="radio" name="campo" ng-model="vm.campo" value="name"> Nombre
<br />
<input type="radio" name="campo" ng-model="vm.campo" value="description"> Descripcin
</p>
</aside>
<section>
<ul>
<li ng-repeat="cerveza in vm.cervezas | filter:vm.filtroCliente | orderBy:vm.campo:vm.orden" ng-class="{even: $even, odd: $odd}">
<span>{{$index +1}}.- {{cerveza.name}},</span> {{ cerveza.description }}
</li>
</ul>
</section>
</div>

Para el texto del filtrado usamos el INPUT type text que hemos marcado con ng-model="vm.filtroCliente".
Para el orden tenemos dos tipos de controles, diferentes para poder practicar con ms cosas. Tenemos un
par de botones que nos permiten marcar orden alfabtico o contrario, que tienen sus correspondientes ngclick para definir comportamientos. Por otra parte tenemos un par de campos INPUT de radio para definir
si queremos que se ordene por el nombre de la cerveza o su campo descripcin.
Pero sobre todo te tienes que fijar en el listado de cervezas que realizamos con una lista UL y sus
correspondientes LI. Echa un vistazo a la directiva y al template que engloba:
<li ng-repeat="cerveza in vm.cervezas | filter:vm.filtroCliente | orderBy:vm.campo:vm.orden" ng-class="{even: $even, odd: $odd}">
<span>{{$index +1}}.- {{cerveza.name}},</span> {{ cerveza.description }}
</li>

Aqu tenemos varios elementos que destacar:

La repeticin se hace con la coleccin que tenemos en vm.cervezas (que se puebla con una llamada
Ajax con JSONP
Dentro de nuestro template, el LI y todo su contenido, tendremos disponible la cerveza actual en
una variable llamada "cerveza" del scope actual.
Para el filtrado usamos el contenido del campo de texto con ng-model="vm.filtroCliente".
Para el orden usamos tanto el valor vm.campo como el vm.orden que se sacan de los botones y los
radiobuttons.
Adems puedes ver otra directiva nueva hasta este momento en el Manual de AngularJS que es ngclass. Nos sirve para indicarle la class de CSS que queremos aplicar a un elemento HTML. En este
caso usamos los valores $even y $odd del scope local (datos creados automticamente por Angular)
para colocarle la clase adecuada. De esta manera conseguimos el tpico estilo de filas coloreadas
http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 60 de 129

Manual de AngularJS

como una cebra.

Por ltimo puedes reparar dentro del contenido de los LI que estamos usando el $index, que es otra
variable del scope local, que nos viene de fbula para numerar las filas de los elementos de la lista.
El Javascript tendr una pinta como la siguiente:
angular
.module('apiApp', [])
.controller('apiAppCtrl', controladorPrincipal);

function controladorPrincipal($scope, $http){

var vm=this;

vm.orden = false;
vm.campo = "name";

var url = "http://api.openbeerdatabase.com/v1/beers.json?callback=JSON_CALLBACK";

if(vm.nombre){
url += "&query=" + vm.nombre
}
vm.buscaCervezas = function(){
$http.jsonp(url).success(function(respuesta){
console.log("res:", respuesta);
vm.cervezas = respuesta.beers;
});
}
}

Realmente en este Javascript hay poco que necesites aprender, que no hayas visto ya en artculos anteriores.
Te podr interesar la inicializacin de datos en el scope qe encuentras en las primeras lneas de la funcin
del controlador.
Aunque para la materia que nos trata no importa demasiado, s que necesitars unos estilos CSS para
formatear un poco la presentacin de ese HTML, de manera que quede bonito y puedas apreciar algunas
cosas como los colores de fondo de tipo cebra para los elementos de la lista.
body{ font-family: sans-serif;}
li{
font-size: 0.8em;
margin-bottom: 10px;
padding: 10px;
}
li span{
font-weight: bold;
display: block;
font-size: 1.2em;
}
aside{
width: 200px;
float: right;

http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 61 de 129

Manual de AngularJS

padding: 20px;
display: table-cell;
}
aside h2{
margin-bottom: 3px;
}
section{
display: table-cell;
}
li.even{
background-color: #d5d5d5;
}
li.odd{
background-color: #d5d5ff;
}

Eso es todo de momento, espero que puedas aprovechar ya mismo algunas de estas potentes caractersticas
de ngRepeat. Como habrs encontrado, esta directiva permite hacer cosas impactantes sin escribir nada de
cdigo, algo que apreciars sobre todo si tienes algo de experiencia en Javascript o libreras como jQuery.
Pero OJO, esa misma potencia puede que resulte perjudicial para tu aplicacin si se usa sin control, nunca
intentes usar ng-repeat con conjuntos masivos de datos, a lo sumo con elementos de 100 en 100, aplicando
tcnicas como la paginacin para reducir los elementos en la vista.

Este artculo es obra de Alberto Basalo

Fue publicado por primera vez en 11/11/2014
Disponible online en http://desarrolloweb.com/articulos/filtrar-ordenar-variables-directiva-ngrepeat.html

http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 62 de 129

Manual de AngularJS

Ajax en Angular
Introduccin a los mecanismos para realizar conexiones con el servidor asncronas por HTTP con
AngularJS. Lo que comnmente conocemos por Ajax, con ejemplos que nos facilitarn entender una de las
facetas ms potentes de este frameweork Javascript y el desarrollo frontend basado en las cada vez ms
populares API REST.

Ajax con AngularJS para acceso a API

Nos introducimos en el uso de Ajax mediante AngularJS. Lo vamos a hacer de una manera muy
habitual en el desarrollo con este framework que es accediendo a un servicio web que nos ofrece
un API REST.
A la vez que aprendemos tcnicas de Ajax vamos a repasar diversas de las prcticas que ya te hemos ido
contando a lo largo del Manual de AngularJS.
Ya lo sabes, Ajax es una solicitud HTTP realizada de manera asncrona con Javascript, para obtener datos
de un servidor y mostrarlos en el cliente sin tener que recargar la pgina entera. Adems para los despistados
que no lo sepan todava, tenemos un artculo que te explica muy bien qu son exactamente las API REST.

Service $http
El servicio $http (service en ingls, tal como se conoce en AngularJS) es una funcionalidad que forma parte
del ncleo de Angular. Sirve para realizar comunicaciones con servidores, por medio de HTTP, a travs de
Ajax y va el objeto XMLHttpRequest nativo de Javascript o va JSONP.
Despus de esa denominacin formal, que encontramos en la documentacin de AngularJS, te debes de
quedar por ahora en que nos sirve para realizar solicitudes y para ello el servicio $http tiene varios tipos de
acciones posibles. Todos los puedes invocar a travs de los parmetros de la funcin $http y adems existen
varios mtodos alternativos (atajos o shortcuts) que sirven para hacer cosas ms especficas.
Entre los shortcuts encuentras:

http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 63 de 129

Manual de AngularJS

$http.get() $http.post() $http.put() $http.delete() $http.jsonp() $http.head() $http.patch()

Tanto el propio $http() como las funciones de atajos te devuelven un objeto que con el "patrn promise" te
permite definir una serie de funciones a ejecutar cuando ocurran cosas, por ejemplo, que la solicitud HTTP
se haya resuelto con xito o con fracaso.

Nota: Si vienes de jQuery ya habrs podido experimentar las promesas "promise" en las llamadas a la
funcin $.ajax, $.get, $post, etc. En AngularJS funciona de manera muy similar.

El service $http es bastante complejo y tiene muchas cosas para aportar soluciones a las ms variadas
necesidades de solicitudes HTTP asncronas. De momento nos vamos a centrar en lo ms bsico que ser
suficiente para realizar un ejemplo interesante.

Inyeccin de dependencias con $http

Si vas a querer usar el servicio $http lo primero que necesitars ser inyectarlo a tu controlador, o a donde
quiera que lo necesites usar. Esto es parecido a lo que mostramos cuando estbamos practicando con
controladores e inyectbamos el $scope.
angular
.module('apiApp', [])
.controller('apiAppCtrl', ['$http', controladorPrincipal] );

Como puedes ver, en la funcin de nuestro controlador, llamada controladorPrincipal, le estamos indicando
que recibir un parmetro donde tiene que inyectar el service $http.
Al declarar la funcin recibirs esa dependencia como parmetro.
function controladorPrincipal($http){

Ahora, dentro del cdigo de ese controlador podrs acceder al servicio $http para realizar tus llamadas a
Ajax.

Realizar una llamada a $http.get()

El mtodo get() sirve para hacer una solicitud tipo GET. Recibe diversos parmetros, uno obligatirio, que es
la URL y otro opcional, que es la configuracin de tu solicitud.
$http.get("http://www.example.com")

Lo interesante es lo que nos devuelve este mtodo, que es un objeto "HttpPromise", sobre el cual podemos
operar para especificar el comportamiento de nuestra aplicacin ante diversas situaciones.
http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 64 de 129

Manual de AngularJS

Respuesta en caso de xito

De momento, veamos qu deberamos hacer para especificarle a Angular lo que deve de hacer cuando se
reciba respuesta correcta del servidor.
$http.get(url)
.success(function(respuesta){
//cdigo en caso de xito
});

Como puedes ver en este cdigo es que $http nos devuelve un objeto. Sobre ese objeto invocamos el
mtodo success() que sirve para indicarle la funcin que tenemos que ejecutar en caso de xito en la
solicitud Ajax. Esa funcin a su vez recibe un parmetro que es la respuesta que nos ha devuelto el servidor.

Nota: En Angualar 1.4 cambiaron el estndar de respuesta en caso de xito o fracaso de la conexin
Ajax. El nuevo mecanismo es bastante parecido, con funciones callback que se cargan a partir del
mtodo then(). Lo tienes descrito con ejemplos en el artculo de Estndar del patrn promise para los
mtodos del servicio $http en Angular 1.4.

Ejemplo completo de solicitud Ajax con $http

Vistos estos nuevos conocimientos sobre el "service" $http estamos en condiciones de hacer un poco de
Ajax para conectarnos con un API REST que nos ofrezca unos datos. Esos datos son los que utilizaremos
en nuestra pequea aplicacin para mostrar informacin.

Nota: Vamos a usar un API llamada REST Countries, que puedes encontrar en
http://restcountries.eu/
Este API nos devuelve JSON con datos sobre los pases del mundo. En principio puedes hacer diversas
operaciones con los comandos sobre el API, pero vamos a ver solamente unas pocas que nos permiten
recibir los datos de los pases agrupados por regiones.
Las URL que usaremos para conectarnos al API son como estas:
http://restcountries.eu/rest/v1/region/africa http://restcountries.eu/rest/v1/region/europe
Puedes abrirlas en tu navegador y observar cmo la respuesta es un conjunto de datos en notacin
JSON.

Aunque sencilla, esta aplicacin ya contene varias cosillas que para una mejor comprensin conviene ver
por separado.
Este es nuestro HTML:
<div ng-app="apiApp" ng-controller="apiAppCtrl as vm">

http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 65 de 129

Manual de AngularJS

<h1>Pruebo Ajax</h1>
<p>
Selecciona:
<select ng-model="vm.url" ng-change="vm.buscaEnRegion()">
<option value="http://restcountries.eu/rest/v1/region/africa">Africa</option>
<option value="http://restcountries.eu/rest/v1/region/europe">Europa</option>
<option value="http://restcountries.eu/rest/v1/region/americas">America</option>
</select>
</p>
<ul>
<li ng-repeat="pais in vm.paises">
Pas: <span>{{pais.name}}</span>, capital: {{pais.capital}}
</li>
</ul>
</div>

Puedes fijarte que tenemos un campo SELECT que nos permite seleccionar una regin y para cada uno de
los OPTION tenemos como value la URL del API REST que usaramos para obtener los pases de esa
regin.
Aprecia que en el campo SELECT est colocada la directiva ngChange, que se activa cuando cambia el
valor seleccionado en el combo. En ese caso se hace una llamada a un mtodo llamado buscaEnRegion()
que veremos luego escrito en nuestro controlador.
Tambin encontrars una lista UL en la que tienes una serie de elementos LI. Esos elementos LI tienen la
directiva ngRepeat para iterar sobre un conjunto de pases, de modo que tengas un elemento de lista por
cada pas.
Ahora puedes fijarte en el Javascript:
angular
.module('apiApp', [])
.controller('apiAppCtrl', ['$http', controladorPrincipal]);

function controladorPrincipal($http){
var vm=this;

vm.buscaEnRegion = function(){
$http.get(vm.url).success(function(respuesta){
//console.log("res:", respuesta);
vm.paises = respuesta;
});
}
}

Creamos un module y luego un controlador al que inyectamos el $http como se explic al inicio del artculo.
Luego, en la funcin que construye el controlador, tenemos un mtodo que se llama buscaEnRegion() que
es el que se invoca al modificar el valor del SELECT. Ese mtodo es el que contiene la llamada Ajax.

http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 66 de 129

Manual de AngularJS

Realmente el Ajax de este ejercicio se limita al siguiente cdigo:

$http.get(vm.url).success(function(respuesta){
//console.log("res:", respuesta);
vm.paises = respuesta;
});

Usamos el shortcut $http.get() pasando como parmetro la URL, que sacamos del value que hay marcado
en el campo SELECT del HTML. Luego se especifica una funcin para el caso "success" con el patrn
"promise". Esa funcin devuelve en el parmetro "respuesta" aquello que nos entreg el API REST, que es
un JSON con los datos de los pases de una regin. En nuestro ejemplo, en caso de xito, simplemente
volcamos en un dato del modelo, en el "scope", el contenido de la respuesta.
En concreto ves que la respuesta se vuelca en la variable vm.paises, que es justamente la coleccin por la
que se itera en el ng-repeat de nuestro HTML.

Cdigo completo del ejercicio

Quizs se puede ver y entender mejor el ejercicio en global si vemos el cdigo completo de una sola vez.
Pero ya sabes que para aprender bien las cosas debes practicar por tu cuenta, creando ahora tu propio
ejemplo Ajax, accediendo a este API REST o a cualquier otra que te apetezca. Vers que es muy sencillo y
con poco cdigo puedes hacer cosas bastante ms espectaculares de lo que nosotros hemos realizado en
este ejemplo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Probando Ajax en AngularJS</title>
<style>
body{ font-family: sans-serif;}
li{
font-size: 0.8em;
}
li span{
font-weight: bold;
}
</style>
</head>
<body>
<div ng-app="apiApp" ng-controller="apiAppCtrl as vm">
<h1>Pruebo Ajax</h1>
<p>
Selecciona:
<select ng-model="vm.url" ng-change="vm.buscaEnRegion()">
<option value="http://restcountries.eu/rest/v1/region/africa">Africa</option>
<option value="http://restcountries.eu/rest/v1/region/europe">Europa</option>
<option value="http://restcountries.eu/rest/v1/region/americas">America</option>
</select>
</p>

http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 67 de 129

Manual de AngularJS

<ul>
<li ng-repeat="pais in vm.paises">Pas: <span>{{pais.name}}</span>, capital: {{pais.capital}}</li>
</ul>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.24/angular.min.js"></script>
<script>
angular
.module('apiApp', [])
.controller('apiAppCtrl', ['$http', controladorPrincipal]);

function controladorPrincipal($http){
var vm=this;

vm.buscaEnRegion = function(){
$http.get(vm.url).success(function(respuesta){
//console.log("res:", respuesta);
vm.paises = respuesta;
});
}
}

</script>
</body>
</html>

En el siguiente artculo explicaremos cmo acceder por Ajax a un JSON pero con JSONP.

Este artculo es obra de Miguel Angel Alvarez

Fue publicado por primera vez en 03/11/2014
Disponible online en http://desarrolloweb.com/articulos/ajax-angularjs-acceso-apirest.html

JSONP en AngularJS
Ejercicio Ajax en el que realizamos un acceso a API REST que devuelve informacin mediante
JSONP, realizado con el service $http de AngularJS.
JSONP es un mecanismo muy til cuando estamos trabajando con Ajax en Javascript y queremos traernos
datos que residen en otro servidor. Existe una problemtica por la cual no puedes cargar datos con
Javascript que te vengan desde servidores de otros dominios, pues puede darte un error de seguridad si es
que el servidor al que te conectas no est configurado para aceptar solicitudes "cross domain".
Ahora no buscamos tanto introducir esta variante de JSON, pues ya la vimos con detalle en el artculo
dedicado a JSONP. Simplemente te queremos explicar cmo debes usar JSONP dentro de AngularJS de
una manera muy sencilla. Es un excelente ejercicio para practicar con todo lo que llevamos visto en el
Manual de AngularJS.

http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 68 de 129

Manual de AngularJS

Conexiones HTTP asncronas en AngularJS

Para realizar solicitudes al servidor asncronas (lo que se conoce habitualmente por Ajax en el mundo del
desarrollo web) con AngularJS necesitamos un servicio llamado $http. Este "service" nos lo ofrece Angular
de manera completa en su "core" y est preparado para hacer todo tipo de conexiones. Existen varios
"shortcuts" que sirven para hacer operaciones tpicas, con es el caso de traernos datos ofrecidos por medio
de JSONP, as como GET, POST, etc.
En concreto para nuestro ejemplo usaremos el mtodo jsonp() de $http, que recibe la URL del recurso
JSONP al que quieres acceder. Al invocar ese mtodo recibimos un objeto de respuesta sobre el que
podemos configurar comportamientos para el caso de que la solicitud tenga xito, fracaso, etc. Esto se hace
con el conocido patrn promise de Javascript.

Nota: En el artculo dedicado a Ajax en AngularJS explicamos ms detalles de este "service" ofrecido
por AngularJS.

Funcin callback del JSONP en la URL de conexin

La verdad es que Angular hace todo el trabajo "sucio" por debajo y t lo nico que necesitas hacer es
invocar el mtodo correcto del service $http. As que el mtodo de acceso es prcticamente el mismo que si
estuvieras trayendo los datos con un JSON normal.
En este caso la diferencia es que le tienes que indicar un nombre de la funcin callback de tu JSONP. La
restauracin del dato se hace de manera automtica por AngularJS, lo nico que necesitas es que en la URL
compuesta de tu JSONP indiques el nombre de la funcin callback como "JSON_CALLBACK". Eso en
JSONP se indica con el parmetro en la URL de conexin llamado "callback", que escribes de la siguiente
manera.

Nota: Esa funcin callback es la que usamos en Javascript del navegador para restaurar los datos del
JSONP. Como decimos es algo que realmente no necesitas preocuparte mucho, pues es transparente
para ti. Si quieres obtener ms informacin podras consultar el artculo sobre JSONP.

http://example.com/url.json?callback=JSON_CALLBACK

http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 69 de 129

Manual de AngularJS

Ejemplo realizado en AngularJS para traer datos de API REST con JSONP
Ahora vamos a realizar un ejemplo en AngularJS para practicar lo aprendido. De este modo vers que es
todo muy sencillo. En este ejemplo traemos datos de cervezas de un API REST pblica llamada "Open
Beer Database". Los datos los obtenemos por JSONP y puedes ver un ejemplo de conexin y cdigo en
esta pgina de la documentacin del API.
http://openbeerdatabase.com/documentation/examples-jsonp
En nuestro caso concreto accedemos a cervezas en vez de cerveceras, pero el ejemplo es bien similar.
Nuestra URL para obtener datos del API es como esta:
http://api.openbeerdatabase.com/v1/beers.json?callback=JSON_CALLBACK&query=ale
Como puedes ver, en la URL indicamos en el parmetro "callback" el nombre de la funcin callback que
nos pide Angular. Adems hay un segundo parmetro llamado "query" con el que podemos expresar unas
palabras clave para hacer bsquedas de cervezas que contengan esas palabras.
Sabiendo esto, ahora pasemos a ver nuestro cdigo. Esta es la parte del HTML.
<div ng-app="apiApp" ng-controller="apiAppCtrl as vm">
<h1>Pruebo Ajax con JSONP</h1>
<p>
Busca cerveza:
<input type="text" ng-model="vm.nombre"> <input type="button" value="Buscar" ng-click="vm.buscaCervezas()">
</p>
<ul>
<li ng-repeat="cerveza in vm.cervezas"><span>{{cerveza.name}},</span> {{ cerveza.description }}</li>
</ul>
</div>

Como ves, tenemos un campo de texto donde podemos escribir un dato y un botn de buscar. Al darle a
buscar llamamos a un mtodo de nuestro "scope" para traernos las cervezas que tengan el texto escrito en el
campo de texto, ya sea en su nombre o descripcin.
Luego tenemos un bucle definido con ng-repeat en el que recorremos una coleccin de cervezas.
Ahora puedes ver la parte del Javascript:
angular
.module('apiApp', [])
.controller('apiAppCtrl', controladorPrincipal);

function controladorPrincipal($scope, $http){

var vm=this;

vm.buscaCervezas = function(){
var url = "http://api.openbeerdatabase.com/v1/beers.json?callback=JSON_CALLBACK";
if(vm.nombre){
url += "&query=" + vm.nombre;

http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 70 de 129

Manual de AngularJS

}
$http.jsonp(url).success(function(respuesta){
console.log("res:", respuesta);
vm.cervezas = respuesta.beers;
});
}
}

Bien, supongo que estos cdigos ya te irn sonando y en concreto este ejercicio es muy parecido al anterior
en el que conocimos Ajax. En la parte importante, nuestro controlador, apreciars que tenemos un mtodo
llamado buscaCervezas() que es el que se encarga de hacer todo el trabajo.
En ese mtodo primero construimos la URL para acceder al API, agregndole el nombre de la cerveza que
quieres buscar.
Luego accedemos por medio de $http.jsonp() a la URL construida y definimos una funcin que se ejecutar
en caso de xito de la conexin Ajax (success). en esa funcin simplemente volcamos las cervezas
encontradas en el scope, con lo que se actualiza automticamente la vista en el bloque donde tenamos la
directiva ng-repeat de nuestro HTML.
Con esto es todo. Solo te queda practicar lo aprendido por tu cuenta para no dejarte un detalle sobre las
conexiones JSONP en AngularJS.

Este artculo es obra de Miguel Angel Alvarez

Fue publicado por primera vez en 06/11/2014
Disponible online en http://desarrolloweb.com/articulos/jsonp-angularjs-ejercicio-ajax-apirest.html

Operacin post HTTP con $http en AngularJS

Cmo realizar una operacin POST con Ajax, para enviar datos al servidor por medio del HTTP
con la librera AngularJS y el service $http.
Hemos visto cmo realizar operaciones bsicas de Ajax con AngularJS, en las que recibimos informacin
del servidor, por medio de get. Ahora veamos tambin cmo se enviaran datos al servidor por medio de la
operacin post del HTTP. Como siempre las cosas con AngularJS se hacen muy sencillas.
El servicio ("service" en la terminologa de Angular) $http nos ofrece una serie de mtodos "shortcut"
enfocados en realizar las operaciones tpicas implementadas dentro del protocolo HTTP. Para enviar datos
post disponemos de $http.post(). En ese mtodo podemos enviar como parmetro, aparte de la URL del
servidor donde haremos el post, un objeto con los datos que se desean enviar.

http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 71 de 129

Manual de AngularJS

$http.post("recibe.php", {uno: 1, fruta: "manzana"});

Como ves, la primera direccin es la URL relativa donde enviar los datos (tambin podra ser absoluta) y el
segundo parmetro son los datos que queremos enviar al destino.
Este mtodo devuelve como resultado un objeto sobre el que podemos implementar con el patrn promesa
algunas operaciones en diversas situaciones con respecto a esa conexin con el servidor, algo que ya viste en
lo ejemplos de Ajax anteriores. Lo que vamos a aprender de momento es realizar acciones en caso de xito
y para ello tenemos que indicarlas con una funcin en "success".
var conAjax = $http.post("recibe.php", {uno: 1, fruta: "manzana"});
conAjax.success(function(respuesta){
console.log(respuesta);
});

En la funcin que asociamos al caso success, como ya habrs visto muchas veces, recibimos un parmetro
con la respuesta que nos devuelve el servidor. En este caso simplemente la volcamos a la consola de
Javascript.

Nota: Este cdigo lo encontrars habitualmente encadenando llamadas, sin necesidad de declarar la
variable "conAjax". Luego haremos ejemplos que usen esa comn forma de codificar.

Recibir los datos en el servidor

Los datos que ests enviando por post Angular los empaqueta como JSON y te llegarn al servidor, aunque
no por el mtodo comn POST, en pares clave/valor como quizs ests acostumbrado. En realidad nos lo
enva como content-type, "application/json" en un nico objeto, lo que es til porque nos acepta datos ms
complejos, con anidacin de objetos JSON.

Nota: Para que nos entendamos, en un lenguaje como PHP, cuando enviamos datos por post los
recoges con el array $_POST. Ese array no aceptara diversos niveles de anidacin para recibir datos
complejos, osea, podemos tener claves con valores simples. Pero se nos queda un poco corto para
aplicaciones modernas. En PHP si accedes a $_POST encontrars que el array est vaco.

http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 72 de 129

Manual de AngularJS

Este asunto de los niveles de anidacin en los datos que se envan con JSON se ve por ejemplo en este
cdigo, perfectamente vlido y habitual.
$http.post("recibe2.php", {
nombre: "Miguel",
fechaNacimiento: "21/02/1975",
sitiosPreferidos: [
"DesarrolloWeb.com",
"Guiarte.com"
],
direccion: {
calle: "De la alegra",
numero: 18,
ciudad: "Villadigital"
}
})
.success(function(respuesta){
console.log(respuesta);
});

Ese objeto complejo JSON lo recibirs en el servidor tal cual. El cdigo para recogerlo depender de tu
lenguaje de servidor. Por ejemplo en PHP lo hara de esta manera:
file_get_contents("php://input")

Eso nos devolvera una cadena de texto, que si quieres volcar a un objeto nativo de PHP usars la funcin
json_decode(). Tu cdigo podra quedarte parecido a este:
$objDatos = json_decode(file_get_contents("php://input"));

A partir de ese momento encontrars que puedes acceder a los datos del JSON recibido como ests
acostumbrado en el trabajo con objetos PHP.
echo $objDatos->nombre;
echo $objDatos->sitiosPreferidos[0];
echo $objDatos->direccion->calle;

Enviar un formulario por POST

Si lo que quieres es enviar los datos que se encuentran en un formulario por POST al servidor, para
recibirlos en un JSON, la verdad es que el procedimiento es bien parecido a lo que has visto. Simplemente
tendremos que crear nuestro modelo con los datos del formulario, algo que hace Angular por ti agregando
la directiva ngModel, y enviarlo por $http.post().

http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 73 de 129

Manual de AngularJS

Echa un vistazo a este formulario:

<div ng-app="app" ng-controller="appCtrl as vm">
<h1>Pruebo Ajax</h1>
<section>
<form ng-submit="vm.enviar()">
Nombre: <input type="text" ng-model="vm.fdatos.nombre">
<br>
Edad: <input type="text" ng-model="vm.fdatos.edad">
<br>
<input type="submit" value="Enviar">
</form>
</section>
</div>

Observa que en ng-model hemos volcado los campos del formulario dentro de un objeto llamado "fdatos".
Osea, en el modelo de la vista "vm" tenemos un objeto "datosf" y dentro ya encontraremos los datos de
nuestro formulario.
Tambin repara en la directiva ngSubmit que hemos colocado en la etiqueta FORM. Vers que la hemos
asociado con una funcin de nuestro modelo: vm.enviar(). En esa funcin que veremos a continuacin es
donde debes escribir el cdigo para poder enviar el formulario.

Nota: Esto no ests obligado a hacerlo as necesariamente, porque puedes crear la estructura que desees
en el modelo. Simplemente nos resultar ms cmodo colocar directamente los datos vinculados a un
objeto de datos del formulario. Al servidor por post no vamos a enviar todo el modelo de la vista, sino
nicamente los datos del formulario. Como esta estructura ya nos permite tener los datos del formulario
en un objeto independiente, nos ahorrar el tener que hacerlo "a mano". Enseguida lo vers mejor.

Para que esto funcione en tu Javascript debes inicializar "fdatos" como un objeto, aunque sea vaco. Por ello
en tu controller deberas incluir este cdigo.
vm.fdatos = {};

Es un cdigo parcial, luego lo vers en el contexto del controlador completo. Observa que en tu "vm" has
inicializado el objeto "fdatos" con un literal de objeto vaco, expresado con las dos llaves.
Esto ya nos deja en muy buena situacin para enviar ese formulario de una manera muy limpia. Ahora te
mostramos el cdigo completo para crear nuestro controlador.
angular
.module('app', [])
.controller('appCtrl', ['$http', controladorPrincipal]);

function controladorPrincipal($http){
var vm=this;

http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 74 de 129

Manual de AngularJS

//inicializo un objeto en los datos de formulario

vm.fdatos = {};

// declaro la funcin enviar

vm.enviar = function(){
$http.post("recibe-formulario.php", vm.fdatos)
.success(function(res){
console.log(res);
//por supuesto podrs volcar la respuesta al modelo con algo como vm.res = res;
});
}
}

Con esto creo que lo tendrs todo claro para poder enviar datos a un servidor por medio de post, datos que
podrn ser todo lo complejos que necesites en tu aplicacin. Como puedes comprobar la llamada a
$http.post() te hace todo el trabajo de la solicitud HTTP por medio de Ajax, por lo que solo tendrs que
programar el comportamiento especfico para tus necesidades, tanto en el cliente como en el servidor.

Este artculo es obra de Miguel Angel Alvarez

Fue publicado por primera vez en 24/11/2014
Disponible online en http://desarrolloweb.com/articulos/operacion-post-http-angularjs.html

Promise estndar then() de $http en AngularJS 1.4

Explicaciones sobre el nuevo estndar promise para llamadas Ajax en Angular 1.4, usando el
mtodo then().
En el Manual de AngularJS hemos explicado Ajax en diversos artculos, sin embargo unos cambios en las
ltimas versiones de este framework Javascript nos obligan a hacer algunas actualizaciones relacionadas con
el estndar promise.
Cuando realizamos una conexin por Ajax siempre tardar un poco en recibirse la respuesta. Gracias al
comportamiento asncrono de Javascript, no bloqueante ante situaciones de espera, se tiene que usar el
patrn promise para indicar las acciones a realizar cuando se produce esa respuesta del servidor.
En los artculos anteriores dedicados a Ajax se mostr el funcionamiento del sistema de promesas a travs
de los mtodos success() y error(). stos ahora estn obsoletos, por lo que debemos empezar a
acostumbrarnos a usar el nuevo estndar con el mtodo then().

Nota: a pesar que los mtodos success() y error() estn obsoletos (deprecated) siguen funcionando, para
asegurar que no da errores el cdigo creado para versiones anteriores de AngularJS. Son considerados
como "legacy methods" y no conviene usarlos porque en un futuro se dejar de dar soporte.

http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 75 de 129

Manual de AngularJS

Cmo obtener el objeto promise

Por refrescar la memoria, vamos a ver el cdigo de una llamada Ajax, usando el service $http con el mtodo
shortcut $http.get(). ste mtodo nos devolver el mencionado objeto "promesa".
var promesa

= $http.get("https://restcountries.eu/rest/v1/all");

Aunque en seguida veremos que generalmente el objeto no es necesario guardarlo en una variable, sino
encadenar directamente la configuracin del "promise".

Mtodo then()
Sobre el objeto promesa podemos invocar el mtodo then(). ste nos permite definir dos funciones con las
cuales podremos indicar las acciones a realizar, tanto para el caso de suceso en la solicitud como para el caso
de error.
Lo comn sera utilizar un sistema de encadenamiento de mtodos, que nos permita recibir el objeto
promesa y a continuacin invocar su mtodo then() para realizar las acciones oportunas cuando se reciba la
respuesta del servidor.
$http.get("http://example.com/url/ajax")
.then(function(res){
// acciones a realizar cuando se recibe respuesta con xito
}, function(res){
// acciones a realizar cuando se recibe una respuesta de error
});

Cmo has podido apreciar, el mtodo then() recibe dos parmetros que configuramos con dos funciones
annimas. La primera de las funciones sirve para indicar las acciones que quieres realizar cuando recibes del
servidor una respuesta con xito, es decir, una respuesta con un estatus del protocolo HTTP que considere
como "todo correcto", status 200 por ejemplo. La segunda de las funciones sirve para indicar las acciones
que se quiere realizar al recibir una respuesta de error, con un estatus tal qu 404, de pgina no encontrada,
o 500, de error de ejecucin del servidor, etc.

Parmetro respuesta en las funciones annimas

http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 76 de 129

Manual de AngularJS

Como novedad, las funciones annimas que asignamos al mtodo then(), reciben un objeto respuesta.
.then(function(res){

Este objeto tiene una serie de atributos con los datos de la respuesta que hemos recibido del servidor. Por
ejemplo podremos encontrar el atributo "data", que nos devolvera el objeto nativo de Javascript creado a
partir del JSON que se recibe en el cuerpo del response. Tambin podremos encontrar por ejemplo un
atributo "status" con el valor exacto del status de respuesta, 200, 404 o el que sea.
Para observar ese nuevo objeto respuesta te recomiendo hacer un console.log() y as podrs apreciar todos
los atributos que nos entrega Angular para indicarnos exactamente cmo ha ido la solicitud Ajax. No
obstante ahora vamos a poner un pequeo ejemplo donde podrs ver cmo podremos utilizar este objeto
de respuesta para producir una salida adecuada es una solicitud Ajax con angularjs.

Ejemplo completo Ajax en AngularJS 1.4

Comencemos primero mostrando el cdigo HTML de nuestro ejemplo. Nos estamos conectado con un
API pblica llamada REST Countries, que nos facilita informacin diversa sobre pases del mundo.
Esta pgina mostrar en una lista todos los pases que nos devuelva este API. Adems se mostrar al lado la
capital del pas. El propio cdigo HTML tienes enlaces a REST Countries, por si quieres echarle un vistazo
a esta API muy interesante para realizar ejemplos Ajax con angular sin tener que preocuparte por la
autenticacin.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax con un API REST</title>
<link rel="stylesheet" href="../estilo-basico.css">
</head>
<body ng-app="paisesApp" ng-controller="PaisesAppController">
<h1>Pases del mundo</h1>
<p>
Vamos a usar el servicio web llamado "Rest Countries".
<a href="https://restcountries.eu/">https://restcountries.eu/</a>
</p>
<p>
La URL <a href="https://restcountries.eu/rest/v1/all">https://restcountries.eu/rest/v1/all</a> devuelve todos los pases del mundo.
</p>
<div ng-show="paises.length == 0">Cargando paises...</div>
<h2 ng-show="paises.length">Se encontraron {{paises.length}} en el mundo</h2>
<ol>
<li ng-repeat="pais in paises">{{pais.name}} - {{pais.capital}}</li>
</ol>

<script src="../angular.min.js"></script>
<script src="paisesApp.js"></script>
</body>
</html>

http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 77 de 129

Manual de AngularJS

Ahora vamos a mostrar el cdigo JavaScript de nuestro "Module". Apreciars que tienes un controlador que
es donde realizamos la solicitud Ajax para poblar array de pases con el que realizar el listado en la pgina.
angular
.module("paisesApp", [])
.controller("PaisesAppController", ["$scope", "$http", function($scope, $http){
$scope.paises = [];
$http.get("https://restcountries.eu/rest/v1/all")
.then(function(res){
$scope.paises = res.data;
}, function(res){
$scope.paises = [{name: "Error!! " + res.status}];
});
}]);

Fjate en la primera funcin annima que enviamos al mtodo then(), cmo hacemos uso del atributo data
de la respuesta para asignarlo al array de pases del scope.
La segunda funcin annima indicada en caso de error utiliza la respuesta para extraer el estatus recibido
(atributo status). No sera la mejor manera de mostrar un error pero nos sirve como alternativa para este
pequeo ejemplo.

Conclusin
Con esto terminamos este ejercicio en el cual hemos visto el nuevo estndar de promesas para solicitudes
Ajax que utilizamos en las ltimas versiones de angularjs. La verdad es que no tiene ninguna dificultad por
lo que entendemos que no hace falta mucha ms explicacin para poder empezar a usarlo y adaptarnos API
de las nuevas versiones de este framework Javascript.

Este artculo es obra de Miguel Angel Alvarez

Fue publicado por primera vez en 01/10/2015
Disponible online en http://desarrolloweb.com/articulos/promise-estandar-ajax-angularjs.html

Crear un API REST, 5 minutos con json-server

Crear en 5 minutos un API REST, con fines didcticos, ideal para aprender desarrollo frontend con
un framework Javascript del lado del cliente, usando json-server.
En este artculo vamos a ver cmo podemos crear un API REST en menos de 5 minutos, que podremos
usar con fines didcticos o para prototipado, ideal cuando estamos aprendiendo a desarrollar con un
framework Javascript del lado del cliente.
La idea es conseguir un API perfectamente funcional, que admita las operaciones tpicas de cualquier API
REST estndar, ofreciendo las tpicas operaciones travs de los distintos verbos del HTTP, pero sin tener
que invertir horas de nuestro tiempo para aprovisionarlo.
http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 78 de 129

Manual de AngularJS

Para poder ser tan rpidos usaremos un sencillo archivo JSON como fuente de datos, donde podremos
generar nuestro modelo de datos, con distintas entidades, y datos de prueba. Como servidor REST
usaremos un programa llamado "json-server", desarrollado con NodeJS que nos ofrece la posibilidad de
tener un servidor web que responde a las operaciones tpicas de las API.
El API REST que vamos a crear ser perfectamente funcional, es decir, realizar todas las operaciones
posibles sobre nuestros datos (lecturas, modificaciones, inserciones y borrados), almacenando los datos en
el archivo JSON. La persistencia de los datos se realiza en el propio archivo de texto JSON, de este modo,
en futuros accesos a la aplicacin web, el API recordar su estado manteniendo toda la actividad que se haya
realizado a lo largo del tiempo.

Al final del artculo vers adems un vdeo donde se explica todo el proceso y se muestra cmo realizarlo en
pocos minutos.

Nota: Si no tienes claro lo que es REST te recomiendo que te leas el artculo Qu es REST de Eduard
Toms que lo explica muy bien y muy rpido. Incluso si tienes una idea de lo que es un API REST y
quieres completar la informacin y saber ms detalles de este tipo de recursos, la lectura te vendr muy
bien.

Descargar json-server
El primer paso para tener nuestra API es descargar e instalar json-server. Este programa es un paquete de
NodeJS que instalaremos va npm.

Nota: Si no tienes NodeJS debers instalarlo en tu ordenador. Es muy sencillo entrando en

https://nodejs.org y siguiendo las intrucciones para instalacin. Tambin te recomendamos el Manual
de NodeJS de DesarrolloWeb.com, donde encontrars informacin til sobre "Node". El gestor de
paquetes "npm" se instala automticamente durante la instalacin de NodeJS en tu mquina.

Realizaremos el siguiente comando en nuestro terminal:

npm install -g json-server

http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 79 de 129

Manual de AngularJS

El gestor de paquetes npm nos instalar json-server con todas sus dependencias. Mientras tanto, podemos ir
realizando el siguiente paso.

Crear un archivo JSON con los datos de nuestra API

En cualquier carpeta de nuestro ordenador debemos crear el archivo JSON que va a servir de origen de
datos para nuestra API. Los datos sern aquellos que necesitemos en nuestra aplicacin y en el propio
JSON se puede introducir de inicio un conjunto de datos de prueba.

Nota: Puedes saber algo ms de JSON en este artculo. En realidad no es ms un archivo de texto
plano, que guardars con codificacin UTF-8. La notacin para definir los datos la realizamos como si
fuera un objeto Javascript. Al trabajar con JSON no se realiza una definicin del modelo de datos como
se hace en una base de datos relacional, ya que este modelo de datos se define a travs de los propios
datos.

Podemos ver un juego de datos de muestra, en el siguiente cdigo JSON, que almacena pelculas y un
conjunto de clasificaciones de pelculas.
{
"peliculas": [
{
"id": 1,
"nombre": "El sexto sentido",
"director": "M. Night Shyamalan",
"clasificacion": "Drama"
},
{
"id": 2,
"nombre": "Pulp Fiction",
"director": "Tarantino",
"clasificacion": "Accin"
},
{
"id": 3,
"nombre": "Todo Sobre Mi Madre",
"director": "Almodobar",
"clasificacion": "Drama"
},
{
"id": 4,
"nombre": "300",
"director": "Zack Snyder",
"clasificacion": "Accin"
},
{
"id": 5,
"nombre": "El silencio de los corderos",
"director": "Jonathan Demme",
"clasificacion": "Drama"

http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 80 de 129

Manual de AngularJS

},
{
"id": 6,
"nombre": "Forrest Gump",
"director": "Robert Zemeckis",
"clasificacion": "Comedia"
},
{
"id": 7,
"nombre": "Las Hurdes",
"director": "Luis Buuel",
"clasificacion": "Documental"
}
],
"clasificaciones": [
{
"nombre": "Drama",
"id": 1
},
{
"nombre": "Comedia",
"id": 2
},
{
"nombre": "Documental",
"id": 3
},
{
"nombre": "Accin",
"id": 4
}
]
}

Este archivo JSON tendr tpicamente una extensin .json. En nuestro caso lo podramos guardar como
"peliculas.json".

Arrancar el servidor del API REST

Como tercer y ltimo paso para tener nuestro API funcionando debemos arrancar el servidor del API, es
decir, nuestro recin instalado json-server. Esto tambin lo hacemos desde el terminal, con el siguiente
comando.
json-server --watch peliculas.json

Enseguida veremos que nos aparece una serie de mensajes indicando cmo podramos acceder a nuestro
origen de datos, a travs de las URL del servidor, o las URL de los recursos o entidades generadas en el
JSON.

http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 81 de 129

Manual de AngularJS

Acceder al API
Ahora ya solo nos queda acceder al API. Realmente podrs entrar en la "home" del servidor json-server
para tu API a travs de una URL como esta:
http://localhost:3000

En esa pgina encontrars enlaces a los distintos recursos de tu API. Si los abres vers que te devuelve datos
JSON como la mayora de las API REST. Las operaciones que podrs realizar sobre el API son las tpicas y
se opera bsicamente mediante los verbos del HTTP. Realmente aqu no difiere en nada de cualquier otro
API que puedas usar.
Adems, el API est perfectamente habilitada para invocarla desde otros dominios gracias a tener habilitado
CORS, o si se desea usando JSONP.
En resumen, en menos de 5 minutos tenemos un API funcionando que nos vendr perfecto para realizar
nuestra programacin Javascript del lado del cliente con acceso a datos de un API. Como hemos dicho, este
servidor de JSON est ms enfocado a fines didcticos o tambin al prototipado de un proyecto web o App
para mviles.
Objeto de estudio aparte sera el acceso a esos datos, que generalmente hars con Ajax, usando un
framework como AngularJS o una librera como BackboneJS, o al menos con jQuery.

Vdeo de la creacin del API

A continuacin puedes ver todo el proceso de creacin del API REST en vdeo.

Para ver este vdeo es necesario visitar el artculo original en: http://desarrolloweb.com/articulos/crearapi-rest-json-server.html
http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 82 de 129

Manual de AngularJS
Este artculo es obra de Miguel Angel Alvarez
Fue publicado por primera vez en 27/11/2015
Disponible online en http://desarrolloweb.com/articulos/crear-api-rest-json-server.html

http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 83 de 129

Manual de AngularJS

Vistas y sistema de Routing en Angular

En resumen, las vistas nos permiten separar partes de nuestra interfaz en partes distintas y con el sistema de
routing AngularJS es capaz de saber qu vistas debe mostrarte atendiendo a la URL que la aplicacin est
mostrando. Veremos en detalle cmo trabajar con mltiples vistas y rutas profundas en una aplicacin
desarrollada con este framework Javascript.

Mdulo ngRoute para crear rutas e intercambiar vistas en AngularJS

Explicaciones sobre ngRoute, el mdulo de AngularJS que nos permite crear rutas profundas en
nuestra aplicacin e intercambiar vistas dependiendo de la ruta.
Hasta ahora en el Manual de AngularJS hemos visto muchas cosas interesantes, sin embargo nos hemos
limitado a hacer aplicaciones en las que solo tenamos una ruta y una vista. Sin embargo, cuando se vayan
complicando los requisitos de nuestras aplicaciones podremos necesitar ampliar estas posibilidades.
Lo que vamos a aprender ahora es a crear rutas distintas dentro de nuestra aplicacin, de modo que
tengamos varias URL que muestran vistas distintas. Quizs te preguntes Si AngularJS est especialmente
indicado para hacer aplicaciones de una sola pgina (concepto que se conoce con el nombre de "Single Page
Application", SPA), por qu ahora nos muestras la posibilidad de crear varias URL? No era una nica
pgina lo que queramos hacer?

Pues bien, podemos tener ambas cosas. Una aplicacin de una sola pgina, pero que es capaz de representar
URL distintas, simulando lo que sera una navegacin a travs de la aplicacin, pero sin salirnos nunca de la
pgina inicial. Esto nos sirve para varias cosas, entre otras:
Memorizar rutas profundas dentro de nuestra aplicacin. Podemos contar con enlaces que nos
lleven a partes internas (deeplinks), de modo que no estemos obligados a entrar en la aplicacin a
travs de la pantalla inicial.
Eso facilita tambin el uso natural del sistema de favoritos (o marcadores) del navegador,
http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 84 de 129

Manual de AngularJS

as como el historial. Es decir, gracias a las rutas internas, seremos capaces de guardar en favoritos
un estado determinado de la aplicacin. A travs del uso del historial del navegador, para ir hacia
delante y atrs en las pginas, podremos navegar entre pantallas de la aplicacin con los botones del
navegador.
Mantener vistas en archivos independientes, lo que reduce su complejidad y administrar los
controladores que van a facilitar el procesamiento dentro de ellas.

Cmo son las rutas internas de la aplicacin

Para que nos entendamos, en nuestra aplicacin vamos a poder tener varias URL. Podrn tener una forma
como esta:
http://example.com/index.php http://example.com/index.php#/seccion
http://example.com/index.php#/pagina_interna
Son simples ejemplos, lo importante es fijarse en el patrn "#/". Podrs darte cuenta que estas URL
corresponden con la misma pgina, todas, pues usan el carcter "#" que nos sirve para hacer lo que se
llaman "enlaces internos" dentro del mismo documento HTML. Como sabemos, la "almohadilla" ("gato",
"numeral", "sostenido" o como la llames en tu pas), sirve para hacer rutas a anclas internas, zonas de una
pgina.
Cuando le pidamos al navegador que acceda a una ruta creada con "#" ste no va a recargar la pgina,
yndose a otro documento. Lo que hara es buscar el ancla que corresponda y mover el scroll de la pgina a
ese lugar.

Nota: ste es el comportamiento de cualquier navegador, no estamos apuntando nada que tenga que
ver con Javascript o con AngularJS. Angular, as como otros frameworks Javascript MVC se aprovechan
de esta caracterstica para implementar el sistema de enrutado.

En el caso de AngularJS no habr un movimiento de scroll, pues con Javascript se detectar el cambio de
ruta en la barra de direcciones para intercambiar la vista que se est mostrando.
Por ello, volviendo a la pregunta de antes: "si la posibilidad de crear varias rutas dentro de una aplicacin
contradice el sistema de Single Page Application", observamos que realmente no son pginas distintas, sino
que es la misma pgina. Lo que estamos haciendo es "simular" la navegacin por varias URL cuando
realmente es la misma, con enlaces internos.

Instalar ngRoute
El mdulo ("module" en la terminologa anglosajona de Angular) ngRoute es un potente paquete de
utilidades para configurar el enrutado y asociar cada ruta a una vista y un controlador, tal como hemos
dicho. Sin embargo este mdulo no est incluido en la distribucin de base de Angular, sino que en caso de
pretender usarlo tenemos que instalarlo y luego inyectarlo como dependencia en el mdulo principal de
nuestra aplicacin.

http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 85 de 129

Manual de AngularJS

Como no lo tenemos en el script bsico de Angular, debemos instalarlo "a mano". lo conseguimos
incluyendo el script del cdigo Javascript del mdulo ngRoute.
<script src="angular-route.js"></script>

Nota: Ojo que esta ruta no debes copiar y pegarla tal cual. Muchas veces usars el CDN
correspondiente y debers asegurarte de estar usando en el mdulo ngRoute de la misma versin de
AngularJS que cargaste inicialmente. Otro detalle es que este script lo tienes que incluir despus de haber
incluido el script del core de AngularJS.

Inyeccin de dependencias
El segundo paso sera inyectar la dependencia con ngRoute en el mdulo general de nuestra aplicacin. Esto
lo hacemos en la llamada al mtodo module() con el que iniciamos cualquier programa AngularJS, indicando
el nombre de las dependencias a inyectar en un array.
angular.module("app", ["ngRoute"])

Hasta ahora este array de dependencias, cuando llambamos a angular.module(), estaba siempre vaco. A
medida que se compliquen nuestras aplicaciones podremos necesitar inyectar ms cosas. Por ejemplo, las
directivas creadas por terceros desarrolladores tambin las inyectars de esta manera en tu mdulo principal
de la aplicacin. Eso lo veremos ms adelante.

Configurar el sistema de enrutado con $routeProvider

El sistema de enrutado de AngularJS nos permite configurar las rutas que queremos crear en nuestra
aplicacin de una manera declarativa. Aunque sea un componente bastante complejo internamente,
podemos configurarlo de una manera ciertamente sencilla.
$routeprovider tiene un par de mtodos. El primero es when(), que nos sirve para indicar qu se debe hacer
en cada ruta que se desee configurar, y el mtodo otherwise() que nos sirve para marcar un comportamiento
cuando se intente acceder a cualquier otra ruta no declarada.
Esta configuracin se debe realizar dentro del mtodo config(), que pertenece al modelo. De hecho, solo
podemos inyectar $routeProvider en el mtodo config() de configuracin.
angular.module("app", ["ngRoute"])
.config(function($routeProvider){
//configuracin y definicin de las rutas
});

Las rutas las configuras por medio del mtodo when() que recibe dos parmetros. Por un lado la ruta que se
est configurando y por otro lado un objeto que tendr los valores asociados a esa ruta. De momento
http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 86 de 129

Manual de AngularJS

vamos a conocer solo stos que seran los fundamentales para empezar.
"controller", para indicar el controlador
"controllerAs", el nombre con el que se conocer el scope dentro de esa plantilla
"templateUrl", el nombre del archivo, o ruta, donde se encuentra el HTML de la vista que se debe
cargar cuando se acceda a la ruta.
Podemos ver un ejemplo completo de configuracin de rutas.
angular.module("app", ["ngRoute"])
.config(function($routeProvider){
$routeProvider
.when("/", {
controller: "appCtrl",
controllerAs: "vm",
templateUrl: "home.html"
})
.when("/descargas", {
controller: "appCtrl",
controllerAs: "vm",
templateUrl: "descargas.html"
})
.when("/opciones", {
controller: "appCtrl",
controllerAs: "vm",
templateUrl: "opciones.html"
});
})
.controller("appCtrl", function(){
//cdigo del controlador (lo estoy usando en todas las rutas, en este sencillo ejemplo)
});

Hemos encadenado varias llamadas a mtodos when() sobre el $routeProvider, para definir cada una de las
rutas que tendremos en nuestra pequea aplicacin.

Nota: Observa que en cada una de las rutas tenemos definido el mismo controlador. Esto no tiene por
qu ser as, podras perfectamente tener un controlador distinto para cada ruta del sistema.

Para finalizar, podemos ver el cdigo HTML de una pgina donde usaramos estas rutas.
<body ng-app="app">
<nav>
<ul>
<li><a href="#/">Datos personales</a></li>
<li><a href="#/descargas">Descargas</a></li>
<li><a href="#/opciones">Opciones de cuenta</a></li>

http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 87 de 129

Manual de AngularJS

</ul>
</nav>
<hr />

<div ng-view></div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.24/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.24/angular-route.js"></script>
<script src="app.js"></script>
</body>

Echa un vistazo a los enlaces que hay dentro de la etiqueta NAV. Esos son los enlaces que provocaran la
navegacin en el enrutado definido en la anterior configuracin. Observars que los href de los enlaces
estn asociados a las mismas rutas definidas en el $routeProvider. Por tanto, pulsando cada enlace Angular
nos mostrar la vista indicada en la declaracin que hemos mostrando antes en el config() del
$routeProvider.
Tienes tambin que fijarte en la divisin DIV que hay ms abajo que tiene la directiva ngView. En principio
no necesitas indicar ms cosas como valor de esa directiva. AngularJS ya sabe que las vistas las debe
desplegar en ese contenedor.
Solo a modo de curiosidad, fjate que en el HTML no hemos definido ningn controlador, osea, no est la
directiva ng-controller por ninguna parte. Sin embargo, en las vistas internas s que se est asociando un
controlador, porque se ha declarado en el $routeProvider.

Nota: No queremos adelantarnos, pero si se te ocurre jugar con este prototipo y creas un poco de
funcionalidad en el controlador que estamos usando en las vistas comprobars que los datos se
inicializan cada vez que accedemos a las vistas de nuevo. Esto lo explicaremos ms adelante, as que no
te preocupes si no has entendido todava a qu nos estamos refiriendo.

Vistas independientes
Para acabar solo queda comentar el cdigo de las vistas independientes. Tal como se defini en el
$routeProvider, existe un cdigo para cada una de las vistas, alojado en archivos HTML independientes. La
vista alojada en "/" se llama "home.html", la vista de la ruta "/descargas" est en el archivo
"descargas.html", etc. Esos archivos estn en el mismo directorio que la vista principal, pero realmente
podran estar en cualquier otra ruta que especifiquemos.
El cdigo que coloques en las vistas es indiferente. Simplemente pondrs HTML, directivas y todo lo que
venimos usando hasta el momento en las vistas. Escribe el HTML que gustes, de momento no tiene ms
importancia.

Este artculo es obra de Alberto Basalo

Fue publicado por primera vez en 03/12/2014
Disponible online en http://desarrolloweb.com/articulos/ngroute-crear-rutas-intercambiar-vistas-angularjs.html

http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 88 de 129

Manual de AngularJS

Introduccin a $location y primeros controladores en paralelo

Ejercicio donde tenemos en marcha dos controladores ejecutndose en paralelo en dos partes de la
pgina, as como varias vistas. Conocemos tambin $location de AngularJS.
Es comn usar ms de un controlador en una aplicacin AngularJS. Hasta ahora no lo habamos necesitado
pero para separar nuestro cdigo en controladores puede aportar diversos beneficios, en el caso que tenga
algn sentido esa separacin.
En el ejemplo que os traemos queda bien claro que tiene sentido separar el cdigo en dos controladores
distintos, porque estn pensados para hacer cosas muy especficas y distintas entre si. Observars que
separar la complejidad del programa en diversas partes, provoca que cada una sea ms simple y fcil de
entender. Todo ello redundar en un mantenimiento ms sencillo, lo que al final se traduce en menos
trabajo y mayor rentabilidad.

Para hacer este ejercicio hemos seguido el prototipo realizado en el artculo anterior dedicado al ngRoute,
por lo que si no lo has ledo ya, es importante que lo hagas. En aquel ejemplo vimos cmo implementar
enlaces "profundos", en una barra de navegacin, que nos llevan a distintas vistas dentro de la misma
pgina.
Ahora vamos a mejorar el comportamiento de nuestra barra de navegacin. Aislaremos ese
comportamiento en un nuevo controlador independiente. Con ello tendremos dos controladores bien
separados:
Un controlador para la barra de navegacin de secciones
Un controlador para las vistas de mi aplicacin
Como puedes ver, son dos reas distintas de la aplicacin y por lo tanto tiene sentido usar controladores
distintos. El controlador de la navegacin sirve simplemente para implementar un comportamiento en mi
barra de navegacin, mientras que el controlador de las vistas independientes servira para mantener la
funcionalidad de esas vistas.
Echemos un vistazo en el cdigo HTML de este ejercicio
<body ng-app="app">
<nav ng-controller="navCtrl as nav">
<ul>

http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 89 de 129

Manual de AngularJS

<li ng-class="{marcado: nav.estoy('/')}">

<a href="#/">Datos personales</a>
</li>
<li ng-class="{marcado: nav.estoy('/descargas')}">
<a href="#/descargas">Descargas</a>
</li>
<li ng-class="{marcado: nav.estoy('/opciones')}">
<a href="#/opciones">Opciones de cuenta</a>
</li>
</ul>
</nav>
<hr />
<div ng-view></div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.24/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.24/angular-route.js"></script>
<script src="app.js"></script>
</body>

De momento observars que en el HTML anterior solo parece que estemos usando un controlador, en la
etiqueta NAV. No nos hemos olvidado del otro, debes recordar que estaba declarado para cada una de las
vistas, que habamos definido con el $routeProvider.
$routeProvider
.when("/", {
controller: "appCtrl",
controllerAs: "vm",
templateUrl: "home.html"
})
// ..

Controlador para la barra de navegacin

El controlador navCtrl, declarado en la etiqueta NAV, tiene un scope conocido como "nav" ( ngcontroller="navCtrl as nav"). En realidad este controlador es muy sencillo, luego veremos su cdigo. De
momento lo usamos simplemente para definir si debe aparecer una clase (class de CSS) en el enlace de la
seccin tenemos abierta en nuestra aplicacin. Ya sabes que cuando se trata de asignar o no una clase se
utiliza la directiva ng-class, en la que usamos un objeto para definir la clase y la expresin que debe de
cumplirse para que est presente en la etiqueta.
<li ng-class="{marcado: nav.estoy('/')}">

Si te fijas, se trata de una clase llamada "marcado" que estar presente en la etiqueta LI en caso que el
mtodo estoy() que est dentro del scope "nav" nos devuelva un valor evaluado como verdadero.
<li ng-class="{marcado: nav.estoy('/opciones')}">

Este otro elemento de la lista tendr la clase "marcado" en caso que el mtodo estoy() de nav devuelva true
http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 90 de 129

Manual de AngularJS

cuando le pasamos el parmetro con valor "/opciones".

Ahora veamos la implementacin de ese controlador.
.controller("navCtrl", function($location){
var map = this;
map.estoy = function(ruta){
return $location.path() == ruta;
}
})

Como puedes comprobar en el controlador se defini el mtodo estoy(), pero hay una cosa nueva que te
llamar la atencin seguramente. Se trata de la variable $location que est inyectada en la funcin que
implementa el controlador.

Conociendo $location
$location es un servicio ("service", tal como los llaman en AngularJS) que nos sirve para mantener y
trasladar informacin de la ruta actual del navegador. $location implementa una interfaz para el acceso a la
propiedad nativa de Javascript window.location, y nos sirve para acceder a elementos de la ruta actual,
conocer su estado y modificarlo. Por tanto, podemos saber en todo momento qu ruta tenemos y conocer
cuando el usuario ha navegado a otro lugar, ya sea con los botones de atrs o adelante o pulsando un enlace.
Pero no solo eso, existe un un enlace entre $location y window.location en las dos direcciones. Todo
cambio que realicemos en $location tambin tendr una respuesta en lo que se est mostrando en la barra
de direcciones del navegador. As como todo cambio de URL en el navegador tiene un efecto en el service
$location.
$location tiene una serie de mtodos bastante interesante a travs de los cuales podemos acceder a partes de
la URL que est en la barra de direcciones, desde el dominio, el puerto, protocolo, hasta la ruta en s de la
aplicacin.
En el ejemplo de antes estbamos usando $location.path() que nos devuelve el camino actual. Este mtodo
acepta dos juegos de parmetros.
Si llamamos a $location.path() sin parmetros, nos devuelve la ruta actual.
Si llamamos a $localtion.path() indicando un parmetro, entonces se cambia la ruta actual a aquello
que le hayamos indicado. La ruta debe comenzar por "/" el mtodo es lo suficientemente listo para
que, si no tiene la barra, se la pone automticamente.
As que, volviendo a nuestra funcin estoy(), apreciars que devolver true cuando la ruta enviada como
parmetro coincida con la ruta de nuestra aplicacin en ese instante, recuperada con $location.path().
map.estoy = function(ruta){
return $location.path() == ruta;
}

http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 91 de 129

Manual de AngularJS

Controlador de las vistas

De nuevo llegamos al controlador de las vistas independientes. Ahora hemos colocado un poco de cdigo.
controller("appCtrl", function(){
var vm = this;
vm.colores = ["green", "blue", "orange"];
});

Realmente este cdigo no es ms que una inicializacin de valores en un array llamado "vm.colores".
Ahora veamos el cdigo de las vistas independientes y veamos cmo usamos ese array de colores.
Observars que las vistas no hace nada muy espectacular, solo hemos colocado alguna cosa con fines
didcticos.
Vista "home.html": un simple recorrido a los colores del array para mostrarlos en cajas DIV.
<h1>Home</h1>
<div ng-repeat="color in vm.colores">{{ color }}</div>

Vista "opciones.html": un campo de texto donde escribir un color nuevo. Un botn donde enviamos el
contenido de ese campo de texto dentro del array de colores.
<h1>Opciones</h1>
Tienes {{ vm.colores }}
<p>
Agrega <input type="text" ng-model="vm.nuevocolor"> <input type="button" value="ok" ng-click="vm.colores.push(vm.nuevocolor)">

Vista "descargas.html": Otro botn para vaciar el array de colores.

<h1>Descargas</h1>
{{ vm.colores }}
<input type="button" value="Vaciar" ng-click="vm.colores = []">

Controladores siempre inicializan sus valores en cada "uso"

Ahora queremos mencionar de nuevo la problemtica de los controladores comentada por encima en el
artculo anterior. Ahora que tenemos algo de cdigo en nuestro controlador de las vistas y somos capaces de
ejecutarlo para darnos cuenta de un detalle.
Si realizas una navegacin por las distintas secciones de la aplicacin fabricada hasta el momento vers que
todas las vistas operan de alguna forma sobre el array de los colores. Podemos en una vista agregarle
elementos, en otra podemos vaciarlo. Sin embargo, te habrs fijado que cada vez que se accede a una vista el
array de colores vuelve a su estado inicial, independientemente que antes lo hayamos manipulado. Cmo es
posible? Entonces no hay manera de memorizar los estados del scope entre las diferentes vistas de una
http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 92 de 129

Manual de AngularJS

aplicacin? Como vers ms tarde, s la hay, pero no lo haremos con los controladores.
Este comportamiento ocurre porque, cada vez que se accede a una vista independiente se est volviendo a
cargar el controlador, ejecutndose la funcin del controlador. Como en el controlador se inicializa el array
de colores, observars que cada vez que se usa en una vista ese array se inicializa de nuevo. En fin, cuando
pasas de una vista a otra el array de colores se vuelve a poblar con los colores que se haban configurado de
manera predeterminada en el controller.
La solucin a este problema pasa por usar factoras o servicios, pero es algo que veremos en el siguiente
artculo. Hasta ahora es importante que te quedes con esto: las funciones que implementan los
controladores son como constructores, que se llaman cada vez que el compilador del HTML de Angular
pasa por la vista.

Este artculo es obra de Alberto Basalo

Fue publicado por primera vez en 05/12/2014
Disponible online en http://desarrolloweb.com/articulos/introduccion-location-primeros-controladores-paraleloangularjs.html

http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 93 de 129

Manual de AngularJS

Otros artefactos en AngularJS

Vamos repasando otros recursos para la programacin de aplicaciones en AngularJS, de diversa ndole,
como factoras, servicios y analizando en profundidad asuntos importantes como el scope.

Factoras (factory) en AngularJS

Qu son las factoras de AngularJS, factory en la terminologa Angular. Para qu sirven, qu rasgos
las caracterizan y cmo crearlas.
Hasta el momento en el Manual de AngularJS nuestro cdigo Javascript lo hemos colocado principalmente
dentro de controladores. Nos han servido perfectamente para nuestras aplicaciones, pero ya hemos podido
observar que en ciertas ocasiones los controladores no se comportan como nosotros podramos desear.
Aspectos de esta problemtica han debido de quedar claros si te lees con calma el ltimo artculo, donde
aprendimos a crear controladores en paralelo y donde introdujimos $location. En ese ejercicio vimos que
los controladores se invocan con cada vista donde los estemos usando, ejecutando la funcin que los define
cada vez que se carga la vista. Por ese motivo todos los datos que se se inicializan en los controladores se
vuelven a poner a sus valores predeterminados cuando cargo cualquier vista que trabaje con ese
controlador.

Terminamos el artculo pasado mencionando que las factoras nos podran solucionar la prdida de datos de
los controladores cuando cambiamos la vista. De modo que vamos a aprender a crearlas y utilizarlas.
Pero ese no es el nico caso donde encontrars utilidad en las factoras. Por ejemplo, algunas de las
necesidades que podramos tener y que los controladores no nos resuelven son:
1) Compartir datos entre varios controladores, lo que permite tener aplicaciones de verdad, capaces de
memorizar estados entre varias de sus pantallas.
2) Compartir datos entre varias vistas distintas. Por supuesto, sin usar las temidas variables globales. Eso es
justamente lo que vimos en el artculo anterior, que ya tengas uno o varios controladores, no comparten ni
se memorizan estados al pasar de una vista a otra.
http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 94 de 129

Manual de AngularJS

Adems, quizs el ms representativo de los usos de las factoras es:

3) Empaquetar operaciones comunes a varios controladores (por ejemplo en una aplicacin de facturacin
podramos necesitar calcular el IVA o acceder a los distintos tipos de IVA en varios puntos del sistema). Por
supuesto, no queremos colocar el cdigo de esos clculos u operaciones repetido en todos los controladores
que deben utilizarlos y tampoco deseamos crear funciones con mbito global.

Qu son las factoras

Las factoras son como contenedores de cdigo que podemos usar en nuestros sitios desarrollados con
AngularJS. Son un tipo de servicio, "service" en Angular, con el que podemos implementar libreras de
funciones o almacenar datos.
Cuando las usamos tienen la particularidad de devolvernos un dato, de cualquier tipo. Lo comn es que nos
devuelvan un objeto de Javascript donde podremos encontrar datos (propiedades) y operaciones (mtodos).
Con diferencia de los controladores, las factoras tienen la caracterstica de ser instanciados una nica vez
dentro de las aplicaciones, por lo que no pierden su estado. Por tanto, son un buen candidato para
almacenar datos en nuestra aplicacin que queramos usar a lo largo de varios controladores, sin que se
inicialicen de nuevo cuando se cambia de vista.
Angular consigue ese comportamiento usando el patrn "Singleton" que bsicamente quiere decir que, cada
vez que se necesite un objeto de ese tipo, se enviar la misma instancia de ese objeto en lugar de volver a
instanciar un ejemplar.

Nota: El patrn "Singleton" no es algo especfico de AngularJS, en realidad es un patrn general de

programacin orientada a objetos. As como las factoras en lneas generales tambin son un conocido
patrn de diseo de software que se usa en el desarrollo de aplicaciones web y aplicaciones tradicionales
orientadas a objetos.

Notas sobre los "services" en Angular

Los "services" en AngularJS incluyen tanto factoras como servicios. Ms adelante veremos la diferencia. Lo
que queremos mencionar ahora es que estos contenedores de cdigo ya los hemos usado en diversas
ocasiones y quizs podrs entender su utilidad mejor si analizamos cosas que ya conoces.
Por ejemplo, cuando ests haciendo Ajax, por los mtodos que hemos conocido hasta el momento, usamos
$http. ste no es ms que un service de Angular que engloba toda la funcionalidad necesaria para realizar
solicitudes asncronas a un servidor.
Por tanto, algo como Ajax, que se supone que puedes querer realizar a lo largo de tu aplicacin en varias
partes del cdigo, se ha separado a un "servicio". Esto quiere decir que, cuando quieras hacer Ajax, tendrs
que usar el cdigo del "service" $http.
Los servicios y factoras que desees usar en tus controladores o mdulos debers inyectarlos como has visto
hacer en diversas partes de nuestros ejemplos. No te preocupes si no lo recuerdas porque a continuacin
veremos ejemplos.
http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 95 de 129

Manual de AngularJS

Ejemplo de factora en AngularJS

Ahora nos vamos a poner manos a la obra creando nuestra primera factora. Para ello vamos a continuar
con el ejercicio que hemos visto en los artculos anteriores del Manual de AngularJS. Como recordars,
queremos implementar un sistema que nos memorice cierta informacin de nuestra aplicacin a lo largo de
diversas vistas.
Implementamos factoras con el mtodo factory() que depende del mdulo (objeto module) de nuestra
aplicacin.
Osea, como cualquier aplicacin de Angular, lo primero crears tu "module" principal:
angular.module("app", ["ngRoute"])

Y sobre el objeto que devuelve esa operacin crearemos las factoras.

Nota: Como observars, el mecanismo para crear la factora es el mismo que hacemos para crear los
controladores. Para crear el controlador usas el mtodo controller() y para la factora el mtodo
factory().

.factory("descargasFactory", function(){
var descargasRealizadas = ["Manual de Javascript", "Manual de jQuery", "Manual de AngularJS"];

var interfaz = {
nombre: "Manolo",
getDescargas: function(){
return descargasRealizadas;
},
nuevaDescarga: function(descarga){
descargasRealizadas.push(descarga);
}
}
return interfaz;
})

Esta factora se llama "descargasFactory". El nombre lo hemos definido en la llamada al mtodo factory.
Acurdate de este nombre, pues luego lo tendrs que usar al inyectar la dependencia de esta factora en tus
controladores.
Ese cdigo tiene una serie de detalles interesantes, desde el punto de vista de Angular y tambin desde el de
Javascript en general. Estudiar el cdigo anterior con detalle es suficiente para un nico artculo, porque
entran en juego diversos conceptos de la programacin orientada a objetos en Javascript. De todos modos,
te vamos a resumir un poco lo que encuentras.
Lo ms destacado sobre las factoras en AngularJS lo encuentras en la ltima lnea: "return interfaz;"
http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 96 de 129

Manual de AngularJS

Todas las factoras deben devolver algo. Lo que sea, aunque lo habitual como dijimos es devolver
un objeto. Por definicin debe de ser as en AngularJS.
Aquello que devuelves es lo que se conoce desde fuera de la factora. Por decirlo de otra manera, es
la interfaz pblica de uso de esa factora. Por eso hemos llamado a la variable que devolvemos en el
return "interfaz", porque es la serie de propiedades y mtodos que ests haciendo pblico para todo
el mundo que use esa factora. Lgicamente, esa "interfaz" no es ms que una manera nuestra de
llamar a la variable y t usars la que quieras.
Pero fjate que la variable "descargasRealizadas" es privada a la factora, pues no se devuelve en la
interfaz. Por tanto, ese array no podr ser accesible desde fuera de la factora. Podemos entenderlo
como una propiedad privada.
Para acceder al array "descargasRealizadas" se har uso de los mtodos definidos en "interfaz":
getDescargas() y nuevaDescarga(). Esos mtodos son pblicos, por haberlos definido en la interfaz
que devolvemos en la funcin de la factora y se podrn acceder desde cualquier lugar donde
tengamos disponible la factora.
Sin embargo no todos los datos que vamos a manejar en las factoras necesitamos hacerlos privados.
En concreto encontrars, la propiedad "nombre" que est dentro de nuestra interfaz y por lo tanto
es pblica y podr accederse tal cual desde fuera de la factora.

Nota: Para entender las ventajas hacer las cosas pblicas o privadas debers conocer algunos de los
conceptos bsicos de programacin en general y programacin orientada a objetos en particular, como
son la abstraccin y el encapsulamiento. Es una decisin de diseo de software, que debe tomar el
desarrollador y tanto Javascript como por extensin AngularJS tienen mecanismos para implementar
elementos pblicos o privados. As, como regla global en la programacin orienta a objetos, todo dato
debera ser definido como privado, a no ser que alguien de fuera te solicite que lo expongas
pblicamente.

Usar una factora

Ahora podemos ver cmo usar la factora que acabamos de realizar. El procedimiento es tan simple como,
una vez definida, inyectarla en el controlador donde la queremos usar. Usamos el sistema de inyeccin de
dependencias que ya conoces.
Al crear la funcin del controlador debemos definir un parmetro que se llame exactamente igual al nombre
que le has dado en la factora. En este caso el parmetro que inyectamos en el controlador se llama
"descargasFactory" pues as habamos llamado a la factora al crearla.
Echa ahora un vistazo a un controlador que usa esta factora.
.controller("appCtrl", function(descargasFactory){
var vm = this;

vm.nombre = descargasFactory.nombre;
vm.descargas = descargasFactory.getDescargas();

http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 97 de 129

Manual de AngularJS

vm.funciones = {
guardarNombre: function(){
descargasFactory.nombre = vm.nombre;
},
agregarDescarga: function(){
descargasFactory.nuevaDescarga(vm.nombreNuevaDescarga);
vm.mensaje = "Descarga agregada";
},
borrarMensaje: function(){
vm.mensaje = "";
}
}
});

Dentro de nuestro controlador la variable descargasFactory que recibimos como parmetro contiene todos
los datos y funciones que hemos definido en la interfaz pblica de nuestra factora.
Por tanto:
descargasFactory.nombre contendr la propiedad "nombre" definida en la factory.
descargasFactory.nuevaDescarga() o descargasFactory.getDescargas() sern llamadas a los mtodos
que habamos definido en la factora.

Nota: Ojo, desde tu vista, en el HTML, no sers capaz de acceder a la factora. Es algo que ahora
pertenece al controlador y a travs del scope creado por ese controlador no puedes acceder a los datos
que tienen sus dependencias. Si quieres acceder a un dato de esa factora el mecanismo es volcar ese
dato en el scope. Eso lo hacemos al principio de ese controlador en las lneas:

vm.nombre = descargasFactory.nombre;
vm.descargas = descargasFactory.getDescargas();

Creo que con todo esto queda explicado el trabajo con las factoras en AngularJS. Ahora faltara un
poco de tiempo por tu parte para poder ponerlo en prctica.
Este artculo es obra de Alberto Basalo
Fue publicado por primera vez en 15/12/2014
Disponible online en http://desarrolloweb.com/articulos/factorias-factory-angularjs.html

Scope en Angular, manejando mbitos con $parent

Explicaciones ms detalladas del omnipresente scope de AngularJS, nuestro mbito. Introducimos
el $parent para acceder al scope padre.
El scope, un trmino que encontrars nombrado hasta la saciedad en la literatura relacionada con este
framework de Javascript. Qu es exactamente el scope? Qu podemos decir sobre l para completar lo
visto hasta ahora en el Manual de AngularJS? Sobre todo ello vamos a hablar en este artculo.
La traduccin de scope es "mbito", sin embargo, el trmino es tan habitual que solemos usar directamente
la palabra en ingls. Pero creo que usando la traduccin nos podemos enterar mejor qu es en realidad el
http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 98 de 129

Manual de AngularJS

scope: el "mbito" de los datos donde estamos trabajando en las vistas.

En Angular no existe un nico mbito, puedes tener (tendrs) diferentes scopes en diferentes partes de tu
cdigo, anidados o en paralelo. Los scope se crean automticamente para cada uno de tus controladores y
adems existe un scope raz para toda tu aplicacin. A continuacin te ensearemos a trabajar con ellos,
almacenando datos y recuperndolos.

Scope hace de enlace entre las vistas y los controladores

El scope es la magia que permite que los datos que manejas en los controladores pasen a las vistas, y
viceversa. Es el enlace que nos traslada esos datos de un lugar a otro, sin que nosotros tengamos que
programar nada.
En los controladores hemos aprendido a generar elementos en el scope de diversas maneras. Lo comn es
acceder al scope si lo inyectas en el controlador mediante el parmetro $scope. Luego podrs aadir datos
simplemente como propiedades a ese objeto $scope inyectado:
.controller('otroCtrl', function($scope){
$scope.algo = "probando scope...";
$scope.miDato = "otra cosa..."
});

Eso te generar un dato en tu scope llamado "algo" y otro llamado "miDato".

Desde las vistas puedes acceder a datos de tu scope a travs de expresiones del tipo:
{{ algo }}

Ese "algo" es un dato que tienes almacenado en el scope desde el controlador. Como sabes, con esa
expresin lo vuelcas en la pgina. Tambin podrs acceder al scope cuando usas la directiva ng-model y
defines un dato en tu modelo.
<input type="text" ng-model="miDato">

Como se deca, el scope nos sirve para trasladar esos datos entre el controlador y la vista. Nosotros para
poder acceder a "algo" o a "miDato" no necesitamos enviarlo desde el controlador a la vista ni de la vista al
http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 99 de 129

Manual de AngularJS

controlador, salvo crear esa propiedad en el $scope. Lo bonito, que vimos en el artculo de Binding en
Angular, es que cuando el dato se modifica, ya sea porque se le asigna un nuevo valor desde el controlador o
porque se cambia lo que hay escrito en el INPUT de la vista, la otra parte es consciente de ese cambio sin
tener que suscribirnos a eventos.

mbitos del scope dentro de la vista

Si lees eso en espaol "mbito del scope" parece un trabalenguas o quizs una frase infantl, "mbito del
mbito". Queremos decir que cada scope tiene su mbito restringido a una parte del cdigo, aunque la
propia palabra "scope" ya nos dice por ella misma que se trata de eso.
Bueno en definitiva, vamos a echar un vistazo a un HTML:
<div ng-controller="miAppController">
<p>Contenido de nuestra vista acotado por un controlador</p>
<p>{{ cualquierCosa }}</p>
</div>
<section>
Desde fuera de esa divisin no tengo acceso al scope del controlador
</section>

Lo que queremos que se vea ahora es que el scope creado por ese controlador "miAppController" tiene
validez dentro de ese cdigo HTML en el lugar donde se ha definido la directiva ngController. Es decir, los
elementos que asignes a $scope dentro de tu controlador se podrn ver desde la etiqueta DIV y todas sus
hijas, pero no desde etiquetas que se encuentren fuera, como es el caso del SECTION que hay despus.

Alias del scope

Existe otra modalidad de enviar datos al scope y es por medio de un alias. Esto te sirve cuando al declarar
tus controladores en el HTML (directiva ng-controller) usas "controller..as".
<div ng-controller="pruebaAppCtrl as vm">

En este caso podrs generar datos en el scope de dos maneras, o bien a travs del mismo objeto $scope que
puedes inyectar, tal como acabamos de explicar, o bien a travs de la variable this dentro de la funcin.
.controller('pruebaAppCtrl', function($rootScope){
var modeloDeLaVista = this;
modeloDeLaVista.otroDato = "Esto est ahora en el scope, para acceder a travs de un alias";
});

Gracias al alias en la vista podrs acceder a ese dato con una expresin como esta:
{{ vm.otroDato }}

http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 100 de 129

Manual de AngularJS

Este alias del scope nos simplificar la vida cuando estemos trabajando con varios mbitos. Enseguida lo
veremos.

mbito raz con $rootScope

En AngularJS existe un mbito o scope raz, sobre el que podemos insertar datos. Ese mbito es accesible
desde cualquier lugar de la aplicacin y nos puede servir para definir valores que puedes acceder desde
cualquier punto de tu HTML, independientemente del controlador donde te encuentres. El scope raz de
Angular lo puedes acceder desde tu controlador, por medio de $rootScope, que necesitas inyectar en la
funcin de tu controlador en caso que desees usarlo.
.controller('pruebaAppCtrl', function($scope, $rootScope){
$scope.scopeNormal = "Esto lo coloco en el scope normal de este controlador...";
$rootScope.scopeRaiz = "Esto est en el scope raz";
});

Cuando guardas algo en el mbito raz puedes acceder a ese valor, desde tu vista, a travs del nombre de la
propiedad que has creado en $rootScope.
<div ng-controller="pruebaAppCtrl">
{{ scopeNormal }}
<br />
{{ scopeRaiz }}
</div>

Como ves, en este ejemplo accedemos de la misma manera a un dato que tienes en el scope de este
controlador y a un dato que tiene en el scope raz. Esto es as porque en AngularJS, si una variable del
modelo no se encuentra en el scope actual, el propio sistema busca el dato en el scope padre. Si no, en el
padre y as sucesivamente.

Conociendo $parent
El problema es cuando tienes un dato con el mismo nombre en dos scopes distintos.
.controller('pruebaAppCtrl', function($scope, $rootScope){
//sobrescribo una variable del scope
//en realidad son dos datos distintos con dos valores distintos
//uno lo tengo en el scope del controlador y otro en el scope raz "root"
$scope.repetido = "Algo en el scope normal";
$rootScope.repetido = "Algo en el scope raz";
});

En ese caso, si en a vista hacemos algo como {{ repetido }} vers que existe una ambigedad, pues ese
valor puede significar dos cosas, dependiento si miramos en un scope u otro. Angular resuelve esa situacin
devolviendo el dato del scope ms especfico. Osea, te dar el valor que tiene en $scope.repetido y no
podrs acceder a $rootScope.repetido, a no ser que uses $parent.
http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 101 de 129

Manual de AngularJS

$parent permite acceder al scope "padre", eso en caso que tengas dos controladores uno dentro de otro. O
en el caso que solo tengas un controlador con $parent podrs acceder al scope raz.
As pues, para acceder a ambos valores podra usar un HTML como este:
<div ng-controller="pruebaAppCtrl">
{{ repetido }} --- {{ $parent.repetido }}
</div>

El primer "repetido" nos permite acceder al dato que tenemos en el scope actual y por su parte
$parent.repetido nos permite acceder al dato que habamos guardado sobre $rootScope.

Ejemplo con mbitos corrientes y mbito root

Todo el cdigo que hemos visto desmembrado en este artculo se puede resumir en el siguiente ejemplo.
HTML:
<div ng-app="pruebaApp" ng-controller="pruebaAppCtrl">
{{ scopeNormal }}
<br />
{{ scopeRaiz }}
<br />
{{ algo }} --- {{ $parent.algo }}
</div>

Javascript:
.controller('pruebaAppCtrl', function($scope, $rootScope){
$scope.scopeNormal = "Esto lo coloco en el scope normal de este controlador...";
$rootScope.scopeRaiz = "Esto est en el scope raz";

//sobrescribo una variable del scope

$scope.algo = "Algo en el scope normal";
$rootScope.algo = "Algo en el scope raz";
});

Puedes apreciar ms o menos todo lo que venimos comentando sobre los mbitos, pero lo vers mejor de
una manera visual con la extensin Angular Batarang.

Angular Batarang
Existe una herramienta que se integra en Google Chrome que te sirve de inspector de scopes en AngularJS.
Se llama "Batarang" y nos permite ver de una manera rpida lo que tenemos en los diferentes scopes de
nuestra aplicacin.
Para desarrollar con AngularJS es imprescindible. Seguro que la conoces.
http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 102 de 129

Manual de AngularJS

Si inspeccionamos el ejercicio anterior con la extensin "AngularJS Batarang" podrs encontrar ms o

menos lo que ves en esta imagen:

Como ves, las herramientas para desarrolladores de Chrome tienen ahora una nueva pestaa que me
permite examinar los distintos scopes de esta aplicacin. En la imagen anterior puedes ver dos pantallas,
examinando el scope raz y el scope comn generado por un controlador.
Finalizamos por aqu, a la espera de publicar un artculo que nos permita construir controladores anidados,
o en paralelo, donde podremos observar tambin diferentes construcciones de mbitos.

Este artculo es obra de Miguel Angel Alvarez

Fue publicado por primera vez en 22/12/2014
Disponible online en http://desarrolloweb.com/articulos/scope-angular-sparent.html

mbito o scope en controladores anidados y paralelos

Realizamos diversas variantes de construccin de aplicaciones en Angular con distintos
controladores y repasamos las condiciones del scope en cada una.
En el artculo anterior pudimos aprender bastantes detalles sobre el "famoso" scope de AngularJS. Vimos
que se van creando a medida que se usan los controladores dentro de la pgina y conocimos que existen
diversos mbitos o distintos "scopes" en una pgina. Ahora vamos a ver que cuando se trabaja con varios
controladores se producen varios mbitos diferentes y que se puede acceder a unos u otros dependiendo las
necesidades y situaciones.
Cuando se trata de controladores, los podemos definir "en paralelo" y "anidados" en cada situacin los
http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 103 de 129

Manual de AngularJS

scopes tambin se colocarn lado a lado o bien unos dentro de otros. Lo veremos mejor con ejemplos de
cdigo.

Controladores en paralelo
En este caso tenemos un controlador al lado del otro, en el cdigo HTML. No es la primera vez en este
Manual de AngularJS que implementamos controladores en paralelo, as que no debera de representar
mucho problema.
Para hacer dos controladores funcionando en paralelo podremos tener un HTML en el que se define un
controlador al lado del otro.
<body ng-app="app">
<header ng-controller="headerCtrl">
{{ scopeHeader }}
</header>
<section ng-controller="sectionCtrl">
{{ scopeSection }}
</section>
</body>

El Javascript con el que se declaran y definen estos controladores lo puedes ver a continuacin:
var app = angular.module("app", [])

var headerController = function($scope){

$scope.scopeHeader = "Este es un elemento del header";
};
app.controller("headerCtrl", headerController);

var sectionController = function($scope){

$scope.scopeSection = "Este es un elemento del section";
};
app.controller("sectionCtrl", sectionController);

Como sabes, en cada controlador se crea un scope son independiente. Todos dependen de un scope raz
que sigue existiendo y dentro de ste tendremos los dos scopes de cada controlador. Si inspeccionamos
estos mbitos con la extensin Batarang obtendremos esto:
http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 104 de 129

Manual de AngularJS

Desde un scope no puedo acceder al otro. Eso quiere decir que los elementos definidos para el HEADER,
como la propiedad "$scope.scopeHeader", no se puede acceder desde el controlador definido en el
SECTION.

Nota:En general, si quisiramos compartir datos entre ambos controladores nos tocara implementar
una factora o servicio, o quizs si lo consideramos ms adecuado para nuestro caso, crear datos en el
scope raz, inyectando $rootScope en los controladores y asignando propiedades en ese objeto. El
$rootScope lo conocimos en el artculo titulado Scope en Angular, manejando mbitos con $parent.

Controladores anidados
Las caractersticas y las posibilidades de navegacin entre distintos scopes las vemos mejor todava en el
caso de los controladores anidados. En este caso tenemos un HTML en el que se coloca un controller y
dentro de ste otro pedazo de HTML donde se declara otro elemento con un nuevo controller.
<body ng-app="app">
<section ng-controller="sectionCtrl">
<p>
{{ scopeSection }}
</p>
<article ng-controller="articleCtrl">
{{ scopeArticle }}
</article>
</section>
</body>

Ahora, en la declaracin de los controllers en Javascript, observars que no hay ningn indicio que en el
HTML estn anidados. De hecho es lo correcto, pues los controladores deben ser agnsticos a cmo est
hecho nuestro HTML.
var app = angular.module("app", [])

var sectionController = function($scope){

$scope.scopeSection = "Este es un elemento del section";
};
app.controller("sectionCtrl", sectionController);

http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 105 de 129

Manual de AngularJS

var articleController = function($scope){

$scope.scopeArticle = "Este es un contenido del article";
};
app.controller("articleCtrl", articleController);

En este caso podremos observar que los mbitos estn uno dentro de otro, gracias a la extensin Batarang.

Lo interesante en este caso es que podemos acceder desde un scope a los datos declarados en un scope
padre, gracias a la anidacin definida en el HTML.
<section ng-controller="sectionCtrl">
<p>
{{ scopeSection }}
</p>
<article ng-controller="articleCtrl">
{{ scopeArticle }}
<p>
Si quiero, puedo acceder al scope del elemento padre <b>{{ scopeSection }}</b>
</p>
</article>
</section>

Como puedes ver, dentro del ARTICLE, definido con controller "articleCtrl" podemos acceder
perfectamente a un dato que est en el scope del controlador padre: {{scopeSection}}.

Nota:Esto, que ya se explic, es gracias a que en Angular, si no se encuentran los datos en el scope
actual, automticamente se busca en el scope padre, subiendo todos los niveles que haga falta hasta
llegar al scope raz. Ese es un comportamiento automtico para el cual no necesitamos configurar ni
programar nada.

Uso de $parent para ir al scope padre

Tambin explicamos ya que es posible usar $parent dentro de nuestra vista, para acceder al scope padre.
Pero ahora lo vamos a ver con controladores anidados.

http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 106 de 129

Manual de AngularJS

La variable $parent contiene simplemente una referencia al scope padre. ste puede ser el scope raz o si
tenemos controladores anidados es el del nivel superior en la anidacin. El cdigo HTML anterior
podramos haberlo escrito as.
<section ng-controller="sectionCtrl">
<p>
{{ scopeSection }}
</p>
<article ng-controller="articleCtrl">
{{ scopeArticle }}
<p>
Si quiero, puedo acceder al scope del elemento padre <b>{{ $parent.scopeSection }}</b>
</p>
</article>
</section>

Prcticamente no hay ninguna diferencia, excepto que cuando accedemos desde el ARTICLE a un modelo
(dato) del SECTION lo hacemos a travs de $parent:
{{ $parent.scopeSection }}

En este caso usando $parent el cdigo puede quedar un poco ms claro pues el que lo lea sabr que ese
modelo est en el scope del controlador padre. Sin embargo, enseguida veremos otra manera de hacer esto
en la que el cdigo puede quedar ms claro todava.

Sobrescribir variables del modelo en scopes anidados

La situacin que nos puede surgir en nuestras aplicaciones es que tengamos una misma propiedad en un
scope y en un scope anidado. En una circunstancia como esa, estaremos obligados a usar $parent para
acceder al modelo del scope padre. Esto lo veremos mejor con un ejemplo.
<section ng-controller="manualCtrl">
<p>
Manual: {{ nombre }}
</p>
<article ng-controller="articuloCtrl">
Artculo: {{ nombre }}
<p>
Este artculo pertenece al manual {{ $parent.nombre }}
</p>
</article>
</section>

Como puedes observar, tanto el "manualCtrl" como "articuloCtrl" tienen un modelo llamado "nombre" que
ser el ttulo del manual o el ttulo del artculo. Si desde el controller del artculo queremos acceder al
nombre del manual, no podemos escribir {{ nombre }} porque nos saldra el ttulo del artculo. En ese caso
tenemos que escribir la ruta $parent.nombre.
http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 107 de 129

Manual de AngularJS

Esta situacin y uso de $parent se puede extender a mltiples niveles de anidacin. Por ejemplo podramos
tener comentarios dentro de los artculos y en ellos el modelo "nombre" que en este caso sera el autor del
comentario. Desde el scope de los comentarios podramos acceder a los dos scope padre, tanto artculo
como el manual, encadenando $parent.
<section ng-controller="manualCtrl">
<p>
Manual: {{ nombre }}
</p>
<article ng-controller="articuloCtrl">
Artculo: {{ nombre }}
<p>
Este artculo pertenece al manual {{ $parent.nombre }}
</p>
<p ng-controller="comentariosCtrl">
Este comentario lo escribe {{ nombre }}
<br>
Pertenece al artculo {{ $parent.nombre }}
<br>
Que a su vez pertenece al manual {{ $parent.$parent.nombre }}
</p>
</article>
</section>

Sintaxis con controller..as

Ahora, creo que todos estaremos de acuerdo en que algo como {{ $parent.$parent.nombre }} no ayuda a la
legibilidad del cdigo. Es cierto que sabemos con leer esa expresin que estamos accediendo a un mbito
padre, en este caso dos veces seguidas, pues ser el padre dos niveles por arriba. Pero esa complejidad de
anidacin de los controladores puede que no est en nuestra cabeza y ya no nos acordemos que hay tantos
niveles para arriba.
En fin, que existe una sintaxis que nos mejora el uso que hemos resumido de $parent a travs de distintos
espacios de nombres. No es otra solucin que "controller..as" que ya debes de conocer.

Nota:La sintaxis del "controller as" la hemos usado en diversas ocasiones a lo largo de este manual. La
explicamos por primera vez en el artculo sobre los cdigos para hacer un controlador y sus variantes.

<section ng-controller="manualCtrl as manual">

<p>
Manual: {{ manual.nombre }}
</p>
<article ng-controller="articuloCtrl as articulo">
Artculo: {{ articulo.nombre }}
<p>
Este artculo pertenece al manual {{ manual.nombre }}
</p>

http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 108 de 129

Manual de AngularJS

<p ng-controller="comentariosCtrl as comentario">

Este comentario lo escribe {{ nombre }}
<br>
Pertenece al artculo {{ articulo.nombre }}
<br>
Que a su vez pertenece al manual {{ manual.nombre }}
</p>
</article>
</section>

Supongo que se aprecian las diferencias. Ahora cada uno de los scopes que tenemos en cada controlador
tiene un alias y dentro de ese controller y todos los hijos existe ese alias. A travs del alias somos capaces de
acceder al modelo declarado en cada controlador, no solo en el que estamos, sino tambin en todos los
controladores padre.
Este modo de usar los controladores produce un cambio de operativa en nuestro Javascript que ya se
explic tambin. Dejamos el cdigo fuente para que encuentres las diferencias.
var app = angular.module("app", [])

var manualCtrl = function(){

var vm = this;
vm.nombre = "Introduccin a AngularJS";
};
app.controller("manualCtrl", manualCtrl);

var articuloCtrl = function(){

var vm = this;
vm.nombre = "Aprendiendo a usar el scope";
};
app.controller("articuloCtrl", articuloCtrl);

var comentariosCtrl = function(){

var vm = this;
vm.nombre = "Miguel Angel Alvarez - DesarrolloWeb.com";
};
app.controller("comentariosCtrl", comentariosCtrl);

Puedes ver el aspecto que tendra este ejemplo con el inspector de los scopes de Batarang:

http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 109 de 129

Manual de AngularJS

Con esto termina nuestro recorrido a los scopes de AngularJS, esperamos que esta informacin te haya
resultado de utilidad y comprendas mejor el alcance de los mbitos en los controladores y el modo de
trabajar con ellos.

Este artculo es obra de Miguel Angel Alvarez

Fue publicado por primera vez en 30/12/2014
Disponible online en http://desarrolloweb.com/articulos/ambito-scope-controladores-ap.html

Angular Material
Este mdulo para AngularJS nos permite implementar de una manera muy cmoda un diseo de
aplicacin con las directrices de Material Design de Google.
En este artculo vamos a hacer una review de un proyecto que sin duda resultar muy atractivo para todos
los desarrolladores de AngularJS. Se trata de Angular Material, un mdulo para AngularJS que nos permite
implementar diseos basados en Material Design.
Bsicamente lo que nos ofrece no es solo una hoja de estilos, capaz de aplicar la apariencia definida en
Material Design, sino toda una serie de componentes que enriquecern mucho el catlogo de interfaces de
usuario disponibles al implementar una web.
Para quien ya viene trabajando desde hace tiempo con AngularJS, podemos hacer un paralelismo con otra
librera interesante, llamada AngularUI, que nos ofrece una cantidad enorme de componentes como
selectores de fecha, regillas, deslizadores, etc. En este caso Angular Material sera un competidor. Podramos
usarlos juntos, pero cada uno tiene una base de CSS y un look & feel diferente, por lo que quizs no sea tan
buena idea.

http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 110 de 129

Manual de AngularJS

Angular Material est realizado por Google y puedes acceder al sitio web en la URL:
https://material.angularjs.org
Te recomendamos echar un vistazo a los demos, donde encontrars selectores de fecha, cajas de dilogo,
regillas, tarjetas, botones, iconos, barras de tareas, etc.
Angular Material es una excelente opcin para programadores, que no tienen habitualmente habilidades de
diseo. Usando las directivas que nos ofrece podremos producir aplicaciones que son estticamente
brillantes, junto con una serie de componentes adicionales al propio HTML con un look & feel muy
trabajado.Los podremos producir prcticamente sin necesidad de escribir nada de CSS, consiguiendo
diseos muy atractivos, aprovechando, pero sin necesidad de dominar, caractersticas modernas de CSS
como por ejemplo Flexbox.
El nico "pero" podramos decir que es que las aplicaciones se pueden parecer unas a las otras. Para una
"home page" de una empresa quizs no es la mejor opcin, porque generalmente se desear una esttica
diferenciada, pero en el caso de aplicaciones de gestin y aplicaciones web en general es algo interesante,
porque nos asegura que los usuarios se sentirn familiarizados con la aplicacin. Adems, las opciones de
personalizacin tambin dependern de nosotros y de cmo queramos modificar el diseo y crear nuestras
propias interfaces y componentes, puesto que usar Material Design no implica que estemos restringidos a
las directivas que nos dan ya listas.

Qu es Material Design
Material Design es un conjunto de especificaciones sobre un estilo de diseo muy popular. Si tienes un
telfono Android, o accedes a servicios de Google como G+, Inbox, etc. ya sabrs lo que es, aunque quizs
no le has dado todava nombre.
Bsicamente lo que nos dicen es cmo podemos disear interfaces de usuario, cules son las cosas que se
deben y no se deben hacer, qu tipos de componentes de interfaces se pueden usar, etc. Como en este
artculo no discutimos Material Design os dejamos simplemente un enlace para que consultis las propias
guas de Google de Material Design.

Comenzar con Angular Material

Cuando queremos implementar Material Design en una aplicacin AngularJS debemos empezar por
descargar los paquetes necesarios para funcionar. Esto lo haremos con nuestro gestor de paquetes de
preferencia, ya sea Bower, npm o jspm. Para instalar la ltima versin estable ejecutaremos los comandos:
http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 111 de 129

Manual de AngularJS

Bower:
bower install angular-material

npm:
npm install angular-material

jspm:
jspm install angular-material

A continuacin debemos incluir el cdigo de Angular Material en nuestro proyecto, para lo que realizars
los pasos:
1. Instalacin del CSS
<link rel="stylesheet" href="/ruta_a/angular-material/angular-material.css">

Nota: Ojo, que la ruta al archivo depender de qu gestor de dependencias ests usando en tu proyecto.

1. Instalacin de los scripts Javascript

<script src="/ruta_a/angular/angular.js"></script>
<script src="/ruta_a/angular-aria/angular-aria.js"></script>
<script src="/ruta_a/angular-animate/angular-animate.js"></script>
<script src="/ruta_a/angular-material/angular-material.js"></script>

Nota: De nuevo, las rutas dependern de si lo has instalado con Bower, npm o jspm.

1. Declarar las dependencias en el inicio de tu aplicacin

angular.module( 'YourApp', [ 'ngMaterial' ] )

Nota: Debido a la construccin de Angular Material y a la orientacin a componentes de este mdulo,

http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 112 de 129

Manual de AngularJS
ten en cuenta el requisito de contar con la librera AngularJS al menos en su versin 1.4.8. Se
recomienda en el momento de escribir este artculo AngularJS 1.5.

Usar Angular Material

Una vez cargado el CSS y el Javascript necesario para usar Angular Material tenemos a nuestra disposicin
una serie enorme de elementos para producir de una manera cmoda diseos basados en Material Design.
Ahora se trata simplemente de estudiar la documentacin y revisar todas y cada una de las utilidades que
nos ofrece, componentes, clases, y directivas en general. El lenguaje de etiquetas HTML nuevas que
implementan (lo que llamamos componentes), atributos que se pueden aplicar a etiquetas existentes y sus
valores es muy rico y quizs cuando estamos empezando pueda resultar un poco farragoso, pero poco a
poco es factible familiarizarse con todos estos elementos e incorporarlos a los proyectos.
En la propia pgina de Material Design se ofrecen generalmente demos de uso de los componentes, donde
podemos ver el cdigo para implementarlos. Esas implementaciones sugeridas las podemos alterar y
personalizar, agregando nuevos elementos. Generalmente es una buena opcin copiar el cdigo de un
componente y personalizarlo ya para nuestro caso.
Por ejemplo, un botn se consigue:
<md-button>Texto</md-button>

Pero tambin podra venir con un icono:

<md-button class="md-fab md-primary" aria-label="Use Android">
<md-icon md-svg-src="img/icons/android.svg"></md-icon>
</md-button>

Hay componentes adems que tambin nos soportan comportamientos, como es el caso de las cajas de
dilogo. En este caso habr tambin que documentarse para ver cmo se pueden producir no solo con las
etiquetas necesarias para incluirlas en el HTML de la pgina, sino tambin con el Javascript necesario para
ponerlas en funcionamiento o los eventos que produzcan cuando el usuario interaccione con los
componentes.
En si el proyecto es muy amplio, pero merece la pena el esfuerzo de estudiarlo. Entender y dominar sus
componentes llevar su tiempo, pero a la larga nos ahorrar mucho trabajo del lado del diseo y nos asegura
un nivel de calidad esttico y una usabilidad elevada en nuestras aplicaciones.
Acabamos esta review agradeciendo a Alberto Basalo sus clases en el Curso de Front Edge de EscuelaIT,
donde hemos podido realizar una aplicacin AngularJS con Angular Material, lo que sin duda facilita
enormemente comenzar a usar esta librera y suavizar enormemente la curva de aprendizaje.

Este artculo es obra de Miguel Angel Alvarez

http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 113 de 129

Manual de AngularJS
Fue publicado por primera vez en 16/02/2016
Disponible online en http://desarrolloweb.com/articulos/angular-material.html

http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 114 de 129

Manual de AngularJS

Components en Angular 1.5

Tratamos el desarrollo basado en componentes de AngularJS, arquitecturas de aplicaciones con
componentes personalizados. Cmo crear componentes, definir la lgica con los componentes, la
interoperabildad para comunicacin entre components, etc.

Componentes en AngularJS 1.5

Desarrollo de components en Angular 1.5, en esta gua a la componetizacin aprenders a realizar
realizar tus propios componentes.
En el Manual de AngularJS no habamos tratado todava un asunto tan interesante y novedoso como es la
creacin de componentes, una nueva manera de realizar el tipo de trabajo que antes vena realizndose con
las directivas. Hoy la alternativa de los componentes est conviviendo con las propias directivas, en la
versin 1.x, aunque se prev que las directivas finalicen definitivamente, y se sustituirn completamente por
componentes en el nuevo Angular 2.0. Esto es debido a que los componentes y las directivas sirven ms o
menos para hacer las mismas cosas, extender el HTML con nuevas funcionalidades que se puedan
implementar de manera declarativa. Sin embargo la orientacin a componentes permite una mayor sencillez
y versatilidad para el desarrollo.
En este artculo estudiaremos algunas diferencias entre componentes y directivas y veremos cmo realizar
un componente sencillo, de modo que nuestra aplicacin Angular sea capaz de conocer nuevas etiquetas de
HTML. Usaremos la versin 1.5 de AngularJS, aunque desde hace menos tiempo han actualizado ramas
anteriores de AngularJS (versin 1.3 en adelante) para que tambin admita desarrollo basado en
componentes.

Directivas Vs componentes
Las directivas de AngularJS, as como los componentes se crean aadiendo la funcionalidad a un mdulo
(module) igual que otros elementos como controladores o factoras.

http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 115 de 129

Manual de AngularJS

La diferencia fundamental es que, mientras que las directivas reciban una funcin, igual que controllers o
factorys, los componentes reciben un objeto. Realmente es parecido en el sentido en el que las directivas al
final deban devolver un objeto y los componentes directamente sirven ese objeto al mtodo component().
Directivas se declaraban as:
.directive('nombre_directiva', function() {
return {
//...
};
});

Los componentes por su parte se declaran:

.component('nombre_componente', {
//...
});

Este es uno de los muchos detalles, puesto que muchos otros conceptos han sido simplificados con
respecto a las directivas.
Pero en la prctica los componentes adems nos permiten extender el HTML de otra manera, creando
nuevas etiquetas completas que podremos incorporar y que esconden dentro sus propias complejidades,
permitiendo una mayor reutilizacin y manteniendo encapsulada su complejidad.
Esto nos permite simplificar el marcado de las vistas. Si antes tenamos algo como:
<h2>Contactos</h2>
<ul class="lista">
<li ng-repeat="elem in vm.contactos">
{{elem.nombre}} <span>{{elem.telefono}}</span>
</li>
</ul>

Ahora en resumen podremos tener algo como:

<contactos items="vm.contactos"></contactos>

El componente contactos encapsula todo ese marcado y a su vez podra estar usando otros componentes
para encapsular cada uno de los contactos individuales, ya que unos componentes se apoyan en otros para
resolver los problemas.
Si tenemos varias listas de contactos simplemente le pasamos un juego de datos distinto y listo. Si tenemos
otro proyecto que maneje contactos, se hace mucho ms cmodo reutilizar el componente. Tambin
permite aislar mejor los distintos componentes del proyecto entero, el scope y realizar testing de cada
http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 116 de 129

Manual de AngularJS

componente de manera independiente, entre otras ventajas con respecto a las directivas.

Crear componentes bsicos

De momento vamos a aprender a crear componentes que no trabajan con datos, que simplemente
encapsulan un marcado HTML, que ya es bastante. As podremos aprender de una manera sencilla a crear
componentes, incluirlos en nuestra aplicacin y usarlos desde las vistas.
Simplificaremos al mximo el ejemplo, teniendo en cuenta que generalmente para facilitar la reutilizacin y
la organizacin de archivos del proyecto, lo ideal sera colocar el componente en un archivo aparte, incluso
su HTML separarlo a otro fichero independiente. Veremos an en este artculo varias de estas mejoras.
Este es el Javascript de nuestro componente:
angular
.module("appProbandoComponent", [])
.component("probandoComponent", {
template: [
'<div class="miclase">',
'<span>Esto es algo de HTML en el componente</span> ',
'<b>Angular Rules!</b>',
'</div>'
].join('')
});

Lo importante que tienes que observar del cdigo anterior:

Usamos el mtodo component() para definir el componente. Ese mtodo recibe el nombre del
componente y el objeto que lo define.
El nombre del componente que pasamos a la funcin component debe estar escrito en "camel
case", si es que est compuesto por varias palabras. Pero luego veremos que en el HTML nos
referimos al componente separando las palabras por guiones.
En el objeto enviado al componente le indicamos el atributo "template" que tiene el HTML del
marcado del componente. Luego veremos que existe un atributo llamado "templateUrl" que es ms
interesante por contener una ruta para un archivo HTML donde colocaremos el marcado de manera
separada.
Y ahora veamos cmo se usara:
<probando-component></probando-component>

Como ves es como si hubisemos creado una nueva etiqueta, que el navegador entender perfectamente
gracias a AngularJS. No obstante, por la construccin de nuestro ejemplo, donde estamos usando la
inicializacin bsica de Angular, vamos a necesitar el ng-app en la etiqueta BODY o HTML. Mira el cdigo
html completo de nuestro ejemplo.
<!DOCTYPE html>

http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 117 de 129

Manual de AngularJS

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Probando componentes</title>
</head>
<body ng-app="appProbandoComponent">
<probando-component></probando-component>

<script src="bower_components/angular/angular.min.js"></script>
<script>
angular
.module("appProbandoComponent", [])
.component("probandoComponent", {
template: [
'<div class="miclase">',
'<span>Esto es algo de HTML en el componente</span> ',
'<b>Angular Rules!</b>',
'</div>'
].join('')
});
</script>
</body>
</html>

Organizar los archivos de un componente

Repetimos, que no hemos usado muy buenas prcticas en este ejercicio, por simplificar las cosas y
centrarnos simplemente en el mtodo component() que nos permite crear el componente. As que vamos a
detenernos ahora en mejorar lo presente. La idea es estructurar los componentes en una carpeta especfica
del proyecto, adems de separar el contenido de la presentacin, etc.
Carpeta de componentes: Como primera buena prctica, vamos a crear una carpeta donde colocaremos
todos los componentes que vayamos desarrollando para nuestra aplicacin.
A esta carpeta la llamaremos "components" y a su vez colocaremos dentro de ella cada componente en un
directorio independiente.
Nuestro componente ahora se llama "mi-header". Dentro de nuestro proyecto lo colocaremos en la carpeta
"componentes/mi-header". Dentro de esa carpeta vamos a crear dos archivos distintos, uno con el
Javascript del componente y otro con el HTML, de modo que separaremos el contenido de la lgica.
En la siguiente imagen encuentras la propuesta de organizacin de archivos.

http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 118 de 129

Manual de AngularJS

El Javascript del componente: Ahora veamos nuestro Javascript para definir el componente. Lo ms
importante aqu es que hemos usado un mdulo independiente para este componente. Sobre este "module"
crearemos el componente en s con el mtodo component(). Lo interesante de esta alternativa es que para
reutilizar el componente en otro proyecto ser simplemente traernos este mdulo y declararlo como
dependencia.
Este sera nuestro archivo mi-header.js
angular.module("miHeader", [])
.component("miHeader", {
templateUrl: "./components/mi-header/mi-header.html"
});

En esta ocasin comprobars que en lugar del marcado del componente, definido con el atributo "template"
que vimos antes, tenemos el atributo "templateUrl" donde indicamos la ruta del HTML del componente,
desde la raz de nuestro proyecto.
Marcado del componente: El cdigo HTML del componente ahora lo tenemos en un archivo .html, lo
que nos ofrece muchas ventajas de cara al mantenimiento, como te imaginars.
Este sera el cdigo HTML de nuestro archivo mi-header.html
<header>
<h1>Esta es mi cabecera</h1>
<div>Controles de cabecera</div>
</header>

http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 119 de 129

Manual de AngularJS

Declaramos la dependencia del componente en el mdulo principal de la aplicacin: Lo hemos

dicho antes, al estar el componente en un mdulo independiente, en nuestro mdulo principal de aplicacin
debemos declarar que estamos dependiendo de este componente.
Esto es lo que tenemos en app.js, que sera el Javacript principal de nuestra aplicacin. Est vaco, salvo
porque hemos declarado la dependencia con el mdulo llamado "mi-header".
angular
.module("appProbandoComponent", ["miHeader"])

Usamos el componente desde el index.html del proyecto: Ahora nos queda usar el componente. Esto
lo hacemos en el index.html, colocando la etiqueta del componente. Pero adems recuerda definir el ng-app
con el nombre del mdulo principal de la aplicacin, as como incluir los diferentes scripts.
Veamos el cdigo completo de index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Probando componentes</title>
</head>
<body ng-app="appProbandoComponent">
<mi-header></mi-header>

<script src="bower_components/angular/angular.min.js"></script>
<script src="components/mi-header/mi-header.js"></script>
<script src="app.js"></script>
</body>
</html>

Todo este cdigo tambin depender del gestor de dependencias que uses y el tipo de arranque que
prefieras en tu aplicacin Angular. Pero repara que para usar el componente simplemente colocamos la
etiqueta HTML "mi-header".
<mi-header></mi-header>

De momento eso es todo. Seguramente podrs darte cuenta de las ventajas de la componetizacin en
AngularJS. Ahora es empezar a usarla. No obstante, seguiremos informando sobre cmo realizar otras cosas
con componentes, porque hasta ahora con lo que has visto solo son como "includes" de cdigo HTML, y
realmente podemos derivar mucha lgica de nuestra aplicacin dentro de los componentes.

Este artculo es obra de Miguel Angel Alvarez

Fue publicado por primera vez en 22/02/2016
http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 120 de 129

Manual de AngularJS
Disponible online en http://desarrolloweb.com/articulos/componentes-angularjs-15.html

Controladores en components de Angular

Los componentes en AngularJS mantienen la lgica en controladores independientes, que
debemos definir durante la declaracin component.
El desarrollo en Angular ahora est basado en componentes, una tendencia que tambin encontraremos en
la versin 2.0 del framework, por lo que conviene ir familiarizndose con ella. Por otra parte nos ofrece
diversas ventajas y hasta simplicidad con respecto al desarrollo con directivas, por lo que nos interesar
invertir algo de tiempo en ponernos al da.
Si quieres saber cmo trabajar con componentes en Angular y empiezas desde cero, te recomendamos
comenzar por la lectura de un artculo anterior donde se trataron las bases del desarrollo basado en
componentes. En este artculo vamos a explicar cmo incorporar lgica (programacin) en un componente,
permitiendo la posibilidad de realizar clculos o responder a acciones e interaccin por parte del usuario.

Controller en la declaracin component

Como ya estamos acostumbrados en general cuando usamos Angular, los controladores son el lugar donde
comenzamos a aplicar lgica de la aplicacin, aunque tambin sabemos que muchas veces stos apoyan
parte de su comportamiento en otro tipo de artefactos como factoras y servicios.
En el caso de componentes todo sigue igual. Tendremos un controlador que nos permitir escribir el cdigo
a ejecutar para la inicializacin de cada instancia del componente y para definir comportamientos ante
diversas situaciones.
El controlador se debe definir al declarar el componente. Ya sabes que para crear el componente usas la
funcin de angular "component". A esa funcin le pasamos un objeto con diversos datos, como el template
HTML del componente. Todo eso se vi en el anterior artculo.
Para definir el controlador, al objeto de declaracin component, le pasamos una nueva propiedad llamada
"controller". En esa propiedad colocamos una funcin que ser nuestro propio controlador.
Podemos escribir directamente el cdigo de nuestro controlador con una funcin annima, tal como ves en
el siguiente cdigo:
angular.module('cuentaClics', [])

http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 121 de 129

Manual de AngularJS

.component('cuentaClics', {
templateUrl: './components/cuenta-clics/cuenta-clics.html',
controller: function(){
var vm

= this;

vm.numClics = 0;
vm.incrementaClic = function(){
vm.numClics ++;
}
}
});

Tambin como alternativa es posible indicar el nombre de un controlador que haya definido en ste u otro
mdulo. Por tanto el cdigo que ves a continuacin tendr el exactamente el mismo efecto:
angular.module('cuentaClics', [])
.controller('CuentaClicsController', function(){
var vm

= this;

vm.numClics = 0;
vm.incrementaClic = function(){
vm.numClics ++;
}
})
.component('cuentaClics', {
templateUrl: './components/cuenta-clics/cuenta-clics.html',
controller: 'CuentaClicsController'
});

Como has comprobado en este sencillo controlador tenemos las dos cosas que se suelen encontrar en ellos,
datos como es el caso de "numClics" y funciones para realizar comportamientos, como es el caso de
"incrementaClic".

Acceso a los controladores dentro del HTML de un componente

Ahora tenemos que ver cmo podemos acceder a las propiedades de un controlador dentro del template de
un componente, ya sea para visualizar uno de sus datos o invocar alguno de sus mtodos.
sto se realiza tal como venimos operando con controladores en el pasado, por medio de una variable que
hace referencia al controlador y mediante la cual se accede a sus propiedades y mtodos. La nica cosa que
debemos saber es que en components de AngularJS los controladores tienen el nombre de $ctrl dentro de
las vistas.

Nota: Nota: Con el mtodo de trabajo que se conoce con "Controller As" ramos capaces de definir
diversos nombres para conocer a los controladores dentro de diversos scopes que puede tener una
aplicacin, de modo que se puedan anidar controladores y no tener problemas para acceder a datos o
mtodos de controladores especficos, incluso cuando existen propiedades y valores que tienen los
mismos nombres. En controllers de components tambin podemos asignar nombres para definir cmo
se debe de conocer al controlador dentro del HTML del componente, usando la propiedad
"controllerAs":

http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 122 de 129

Manual de AngularJS

.component('cuentaClics', {
templateUrl: './components/cuenta-clics/cuenta-clics.html',
controller: 'CuentaClicsController',
controllerAs: 'vm'
});

Sin embargo en principio no necesitaramos cambiar nunca ese nombre de controlador, ya que la
arquitectura de componentes hace que los datos ofrecidos por un controlador estn encapsulados
dentro de ese componente. Es decir, en componentes hijo no somos capaces de acceder a los datos de
los controladores de los padres u otros antecesores y por ello no es necesario el cambio del nombre del
controlador con "controllerAs".
Solo para aclarar posibles dudas cabe adelantar que el mecanismo para compartir datos de unos
componentes a otros es el bindeo, enviando datos a los componentes hijos que los puedan necesitar.
Esas tcnicas de binding en componentes son las que vamos a tratar en el artculo siguiente.

En este HTML podrs encontrar el uso de la propiedad y mtodo que habamos definido en el controlador
de nuestro componente cuentaClics.
<div>
<h2>Cuenta Clics</h2>
<p>Hasta el momento has hecho {{$ctrl.numClics}}</p>
<button ng-click="$ctrl.incrementaClic()">Haz clic para incrementar el contador</button>
</div>

Usar un componente
En este momento asumimos que la mayora conocer el flujo para usar un componente como este, que
hemos definido en un mdulo independiente. Si es tu caso puedes saltarte esta seccin, pero si ests
comenzando con Angular o componentes quizs te vengan bien las siguientes pautas.

Nota: Nuestro componente es bueno colocarlo en un mdulo independiente, donde solo est este
componente, para que podamos reutilizarlo fcilmente entre distintos proyectos, o incluso para que lo
podamos compartir con otras personas.

1.- Definimos el componente, normalmente en una carpeta independiente donde estarn todos los ficheros.
De momento tendremos el .js de la declaracin del componente, en su mdulo independiente, y el .html del
template.
2.- Incluimos el script donde est el componente (el .js de la declaracin). Esto lo podrs realizar de diversas
formas, donde la ms sencilla sera colocar la correspondiente etiqueta SCRIPT con el src hacia la ruta del
componente.
<script src="components/cuenta-clics/cuenta-clics.js"></script>

http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 123 de 129

Manual de AngularJS

3.- Al crear el mdulo general de nuestra aplicacin, definimos la dependencia con el mdulo donde hemos
creado nuestro component.
angular.module('miapp', [ 'cuentaClics'])

4.- Luego ya solo queda usar el componente, las veces que sean necesarias, usando la etiqueta
correspondiente con el nombre del componente que hayamos creado. Solo ten en cuenta que si el nombre
del componente en Javascript tiene notacin "camel case", en el HTML tenemos que separar las palabras
por guiones.
<cuenta-clics></cuenta-clics>

Eso es todo, tu componente debera funcionar sin problemas. Si no es as, revisa que la ruta en el src del
script est correcta, que el nombre del mdulo donde est el component est correcto, tenga notacin camel
case para separar palabras y que est definida la dependencia en el mdulo de tu aplicacin. Revisa por
ltimo que la etiqueta HTML tiene separadas las palabras por guiones.
En la siguiente entrega de esta serie dedicada a componentes en Angular veremos algo muy interesante
como es el binding entre componentes para facilitar la interoperabilidad.

Este artculo es obra de Miguel Angel Alvarez

Fue publicado por primera vez en 28/03/2016
Disponible online en http://desarrolloweb.com/articulos/controladores-components-angular.html

Bindings entre componentes AngularJS 1.5

Cmo compartir datos entre unos componentes y otros, a fin de facilitar la interoperabilidad, por
medio de mecanismos de binding, en AngularJS 1.5.
En los ltimos artculos del Manual de AngularJS hemos explicado las bases del desarrollo basado en
componentes y cmo funcionan los controladores en componentes. Pero todavia tenemos que aprender
ms cosas para lanzarnos a la arquitectura de aplicacin basada en componentes.
En esta ocasin vamos a explicar cmo pueden unos componentes interoperar con otros, por medio del
paso de datos o informacin para su funcionamiento. Para ello usamos mecanismos conocidos como el
bindeo. Para quien ya est familiarizado con el desarrollo de directivas seguramente le resultar todo muy
familiar, aunque el que venga sin ese conocimiento previo tampoco ha de preocuparse porque es todo
bastante sencillo.

http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 124 de 129

Manual de AngularJS

Arquitectura de componentes
Cada componente es responsable por hacer una parte del trabajo de la aplicacin, pero para trabajar no
estn solos, sino que deben relacionarse y comunicarse unos con otros.
Bajo la arquitectura de componentes tenemos un rbol de elementos. Forman una estructura donde unos
componentes incluyen a otros, donde cada uno de ellos encapsula un HTML y cierta lgica de aplicacin.
La clave es que cada componente tiene su scope (mbito) independiente y nico. Un componente solo
conoce aquellos datos que su controlador maneja, no pudiendo acceder a los scope de otros componentes,
ya sean padres o hijos. Esa estructura facilita el desarrollo de aplicaciones, porque uno puede saber a priori
dnde est el cdigo que afecta a cada parte de la aplicacin.
Esto se ve mejor en contraposicin con una aplicacin tradicional de Angular:
En una aplicacin de Angular, desde cualquier componente del cdigo podemos afectar a cualquier
parte de la aplicacin, ya que el mbito se puede compartir por mecanismos como la herencia de
scopes y los observadores. Es una situacin prctica que a veces deriva en problemas al entender las
aplicaciones y al depurarlas.
En una aplicacin de componentes cada componente afecta al HTML que tiene dentro y puede
modificar los datos que se estn mostrando dentro de ese HTML. Eso hace fcil localizar el cdigo
que afecta a los datos de cualquier parte de la aplicacin.
Para que componentes independientes puedan colaborar entre s, de modo que consigamos entre todos una
aplicacin, es necesario que se intercambien datos. Esto se hace por medio de mecanismos de binding y se
pueden producir a varios niveles.

Cmo se pasan los datos a los componentes

En la arquitectura de componentes los datos se pasan por medio de propiedades en el HTML y para que
funcione se tiene que realizar la declaracin de los datos compartidos en el JS.
Las propiedades del HTML funcionan como modificadores de los componentes, enviando datos que
pueden afectar al componente de diversas maneras.
<mi-componente dato="valor"></mi-componente>

En el anterior HTML tenemos una propiedad llamada "dato" que dentro del componente equivale a
http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 125 de 129

Manual de AngularJS

"valor".
En el Javascript del componente, en su definicin, se debe declarar qu propiedades se pueden recibir y qu
tipos de binding se van a implementar sobre ellas. Para ello se debe declarar cada una de las propiedades en
el objeto "bindings", indicando un smbolo que aclare qu tipo de bindeo se va a realizar.
angular.module("componenteBinding", [])
.component("componenteBinding", {
templateUrl: "./js/components/componente-binding/componente-binding.html",
controller: "componenteBindingController"
},
bindings: {
user: "=",
num: "@"
}
});

En el cdigo anterior se est declarando un binding con dos atributos, "user" y "num".

Tipos de bindeo
El bindeo entre componentes puede ser de varios tipos. Podemos tener binding a dos direcciones, algo
tpico de Angular, donde los datos viajan desde un componente al otro y desde el segundo al primero. Pero
ahora en Angular 1.5 tambin podemos crear binding en una sola direccin, as como tambin se puede
realizar envo de datos en crudo, que una vez se entregan no quedan bindeados ni en una direccin ni en
otra.
En la declaracin bingings, cada tipo de bindeo se define por medio de un smbolo, los principales son:
"=": esto sirve para entregar una referencia a un objeto. Por tanto cualquier cosa que se est entregando se
comparte entre componentes.
"@": esto sirve para entregar un valor. No existe binding de ningn tipo.
(Smbolo "menor qu"): esto sirve para bindear en una nica direccin, o 1 way binding. El padre le
transfiere al hijo un valor, pero aunque lo modifique el hijo el nuevo valor no viaja al padre. Sin embargo, si
el padre lo cambia, s se cambia en el hijo.

Nota: Pero ojo, con la alternativa "1 way binding" (

), si transfieres un objeto o un array, al pasarle
la referencia en la prctica todava estars produciendo un 2 way binding tradicional de Angular.

"&": esta ltima alternativa permite enviar un puntero a una funcin.

Ejemplo de bindeo en componentes

http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 126 de 129

Manual de AngularJS

Antes de terminar vamos a ver un ejemplo para ilustrar todo lo que hemos aprendido sobre componentes a
lo largo de los anteriores artculos. Es un ejemplo sencillo pero prctico. Son dos componentes que se
transfieren informacin para completar un objetivo comn, que es crear un listado de usuarios.
Tendremos un componente padre que es el listado completo de usuarios y un componente hijo que es cada
uno de los item del listado (el detalle de un usuario nico). Por decirlo de otro modo, el componente padre
producir una repeticin y cada uno de los item de esa repeticin ser implementado por un componente
hijo.
Hemos llamado a nuestros componentes "user-list" y "user-detail". Cada componente a su vez tiene dos
archivos de cdigo, uno el .js, con el registro del componente en s, y otro .html con el HTML local de ese
componente.
Comenzamos viendo el cdigo de mi listado de usuarios: user-list
El archivo user-list.js
angular.module("userList", [])
.component("userList", {
templateUrl: "./js/components/user-list/user-list.html",
controller: function($http){
var vm = this;

$http.get("http://jsonplaceholder.typicode.com/users")
.then(function(respuesta){
vm.usuarios = respuesta.data;
})
}
});

Como puedes ver, me traigo el listado de usuarios de un servicio REST. Ese listado de usuarios lo vuelco en
la variable vm.usuarios, que es el nico dato que este controlador ofrece a la vista.
Cdigo de user-list.html
<user-detail ng-repeat="item in $ctrl.usuarios" usuario="item" numero="{{$index}}"></user-detail>

El cdigo HTML es un nico componente que tiene un ng-repeat, por lo que se produce la iteracin por
todos los usuarios. Cada usuario se muestra con el componente user-detail. A ese componente le estamos
pasando dos bindings, cuyos valores se entregan por atributos del HTML.
Es importante reparar la diferencia entre el atributo usuario="item" y numero="{{$index}}". La diferencia
de las dos llaves es que {{$index}} lo vamos a pasar por valor, no por referencia. Lo confirmars en el
siguiente listado.
Cdigo de user-detail.js

http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 127 de 129

Manual de AngularJS

angular.module("userDetail", [])
.component("userDetail", {
templateUrl: "./js/components/user-detail/user-detail.html",
controller: function(){
var vm = this;
vm.cambiarEmail = function(){
vm.usuario.email = "[email protected]";
}
},
bindings: {
usuario: "=",
numero: "@"
}
})

Aqu la novedad est en "bindings", donde estamos declarando los dos bindeos que este componente espera
recibir. Ahora lo importante es:
El campo "usuario" lo recibe como bindeo. Es un objeto, pasado por referencia. En ese caso se
produce un 2 way binding.
El campo "numero" lo recibe como valor. Le llega solo un dato que, por mucho que se cambie en el
componente, no se transfiere nada al padre.
Adems fjate que el controlador casi no tiene cdigo. Solo hemos definido una funcin para cambiar un
dato el objeto usuario, de modo que se compruebe si se produce el binding hacia arriba.
En la vista podremos usar los bindeos como si fueran datos proporcionados por el propio controlador y en
el controlador tambin los podremos usar como si fueran propiedades suyas normales. Esto lo compruebas
con el siguiente listado.
Archivo user-detail.html
<div class="user" ng-click="$ctrl.cambiarEmail()">
<h2>{{$ctrl.numero}})</h2>
Nombre: {{$ctrl.usuario.name}}
<br>
Email: {{$ctrl.usuario.email}}
</div>

Aprecia como los datos que me vienen por el binding los trato como si fueran del controlador: $ctrl.numero
y $ctrl.usuario
Puedes encontrar el cdigo de estos ejemplos de componentes en Angular 1.5 en Github.

Este artculo es obra de Miguel Angel Alvarez

Fue publicado por primera vez en 31/03/2016
Disponible online en http://desarrolloweb.com/articulos/bindings-componentes-angularjs.html

http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 128 de 129

Manual de AngularJS

http://desarrolloweb.com/manuales/manual-angularjs.html

Pgina 129 de 129