Manual AngularJS

7/26/2019 Manual AngularJS

1/70

Manual de AngularJS DesarrolloWeb.com 1 / 70

Manual deAngularJSEste es un manual que nos introduce en el framework Javascript AngularJS, un conjunto de librerasde cdigo abierto que nos sirven para hacer aplicaciones web avanadas del lado del cliente! Es idealpara hacer aplicaciones de negocio " aplicaciones de gestin que se despliegan en una #nica p$gina!

%sa el patrn de dise&o habitualmente encontrado en el desarrollo web '(), aunque en una variantellamada a veces '(* " a veces '(('! Esto, junto con otras herramientas disponibles en Angular nospermite un desarrollo ordenado, sencillo de realiar " sobre todo m$s f$cil de mantener en unfuturo!

AngularJS est$ apo"ado por +oogle " cada da m$s desarrolladores est$n adopt$ndolo, lo que nos dauna idea del prometedor futuro de la librera!

Autores del manual

Este manual ha sido realizado or los siguientes colaboradores de DesarrolloWeb.com!

Alberto BasaloAlberto "asalo es e#erto en Ja$ascrit%AngularJS & otras tecnolog'as ara la (eb.Director de )gora "inaria% creadores deDocuralia% el gestor documental en la nube.*rogramador% analista & ar+uitecto deso,t(are.htt!//lainiciati$amean.org/- ca'tulos

Miguel Angel lvarezMiguel es ,undador de DesarrolloWeb.com & lalata,orma de ,ormacin online Escuela2.3omenz en el mundo del desarrollo (eb enel a4o 1557% trans,ormando su hobb& en sutraba6o.htt!//(((.desarrollo(eb.com-11 ca'tulos

Pedro HurtadoAmante de las no$edades% de,ensor de lacomunidad. 3omartir es la ,uente de laSabiduria. o te cierres en tu mundo & da lomismo tus creencias. Estamos en mundoabierto. Desarrollador en .et% ode6s%Angular con$encido & or+ue no el resto%como 8htt!//gee9s.ms/blogs/hurtado/-1 ca'tulo

Xavier Jorge Cerd:a$ier% conocido entre sus amigos como :a$i*aer% es 32; en Ambiental ntelligence / 70

Parte 1:

Introduccin

AngularJSEsta es una introduccin de manera concetual al ,rame(or9 Ja$ascrit AngularJS.

E#licamos or +u? cada $ez tiene m@s imortancia el desarrollo de alicaciones (ebcon alta carga de Ja$ascrit & or +u? son esenciales este tio de librer'as ara una

rogramacin m@s sencilla% r@ida & de ,@cil mantenimiento. 3omletaremos la

introduccin con una r@ctica en la +ue odremos e#erimentar con un rimer e6emlo

en Angular.

1.1.- Por qu AngularJ!)mo los frameworks Javascript en general " AngularJS en concreto nos sirven para solucionar las necesidadesactuales de la inform$tica, en cuanto a desarrollo multiplataforma de aplicaciones grandes o enormes que seasemejan a las de escritorio!

Con este artculo comenzamos una serie dedicada a AngularJS, el framework Javascript MV* quenos permite un desarrollo rpido ! potente de aplicaciones we" "asadas en Javascript del lado delcliente# AngularJS es un con$unto de li"reras apo!adas por %oogle que tiene un futuro mu!prometedor ! que en estos momentos se encuentra en "oca de todos# &o se trata de una modapasa$era, sino de una tecnologa que por su utilidad ! caractersticas 'a venido para quedarse#

A lo largo de varios artculos nos iremos introduciendo en este framework, de una manera "astanteprctica# Sin em"argo vamos a comenzar con una introducci(n ms te(rica ! retrospectiva que nos

'aga entender el porqu) de la proliferaci(n de frameworks Javascript ! el motivo por el queAngular es una apuesta segura entre sus competidores#

htt!//(((.desarrollo(eb.com/manuales/manual=angular6s.html


3/70

Manual de AngularJS DesarrolloWeb.com / 70

Nota:sta es una transcripci(n li"re de la c'arla de Al"erto +asalo que nos ofreci( en a"ierto en un we"inar de

esarrollo-e"#com . scuela/0# l ttulo de esta primera parte que a'ora te resumimos es 1esarrollo de

aplicaciones de negocio ! los retos ! soluciones de 23451# Al 6nal del artculo podrs ver el vdeo de la c'arla#

1.1.1.- "n #o$o de %istoria

1*l software sigue al 'ardware1# sta es una a6rmaci(n que nos indica que programamos paraaquellas mquinas en las que vamos a e$ecutar los programas# 7uede resultar o"vio, pero comoe$emplo se puede se8alar que no vamos a programar para las 1%oogle %lass1 si aun no las 'ancreado, o si aun no 'an li"erado el S9# Cuando empez( la informtica en los a8os :3 e;istanordenadores arcaicos ! como programadores esta"as limitado a las posi"ilidades de )stos#

Conforme avanz( el desarrollo de la informtica aparecieron otros ordenadores# Al principio noesta"an conectados entre s !a que no e;istan las redes locales, ni muc'o menos /nternet# Como no'a"a redes esta"as limitado a lo que ocurra dentro de esa mquina ! quizs los programadorestenan una vida ms sencilla< estas limitaciones provoca"an que no tuvieran que preocuparse por

ciertas cosas# /ncluso las opciones para crear los programas =tecnologas ! lengua$es= no erandemasiadas, al contrario, quizs en tu sistema operativo esta"as o"ligado a tra"a$ar con unlengua$e o un par de ellos nada ms#

>uego aparecieron las redes, apareci( /nternet ! los ordenadores comenzaron a conectarse entres# ;isten servidores ! terminales que !a no son tontos, pero estamos tra"a$ando con lengua$essencillos, como ?0M> =al principio ni e;ista CSS= ! !a acercndose al 6nal del milenio aparecenlengua$es como Javascript capaces de 'acer algunas cosas sencillas#

1.1.&.- 'l reto %o(

?o! la situaci(n !a no es la que se descri"e anteriormente, sino que el panorama ha cambiadomucho# 7or un lado el a"aratamiento de las comunicaciones 'ace que aparezcan grandes centros

de proceso de datos que nos facilitan el acceso a tecnologa de primer orden, lo que se llama lanu"e# A'ora cualquier empresa, incluso las ms peque8as, tienen la posi"ilidad de acceder aservidores de aplicaciones#

Se 'a aca"ado la 1tirana de -indows1< 'o! e;isten varios sistemas operativos ! se usan para todotipo de cosas# >os Mac !a no los usan solamente los dise8adores, los >inu; no son terreno e;clusivode los desarrolladores, sino que cualquier persona usa esos sistemas para todo tipo de tareas# >osdesarrolladores no pueden centrarse en un @nico sistema ! limitar el servicio a las personas dedeterminada plataforma#

>a cosa no queda a', puesto que !a no solo 'a"lamos de ordenadores de escritorio ! porttiles,adems tenemos la tecnologa m(vil ! los dispositivos como ta"lets# endo todava un poco ms alltenemos los televisores inteligentes, las %oogle %lass ! al 6nal de todo, el 1/nternet of 0'ings1#

sta es la foto actual, que es mu! distinta a la de las @ltimas d)cadas# 0enemos la nube con susinnumerables posibilidades! tenemos una infnita gama de ordenadores y dispositivosa losque atender#

1.1.).- *'n qu #rogramar+

A toda la situaci(n relatada anteriormente le tenemos que sumar una intermina"le lista denecesidades en el campo de la informtica !, por supuesto, tecnologas ! lengua$es que nos sirvenpara resolverlas# B7rogramo para la we" o para el escritorio Brealizo desarrollo nativo omultiplataforma >a industria te da soluciones ! aporta todo tipo de alternativas, Java, #net, 7!t'on,DoD, E"$ective=C ! otros ms arcaicos como Co"ol, pero es inevita"le plantearse cul de ellos esms adecuado para resolver los pro"lemas#

1.1.,.- HM/ 0 J!

Si quieres realizar un desarrollo que se adapte a todo tipo de sistemas ! dispositivos que puedan



4/70

Manual de AngularJS DesarrolloWeb.com B / 70

llegar a aparecer, una soluci(n es "uscar algo que sea com@n a todos los sistemas ! "uscar algo quetengas seguridad que lo van a entender todos#

;iste un consenso en el mundo de la tecnologa de dar soporte a HTML5 y Javascript # >asituaci(n actual ! la industria nos 'ace pensar que estos lengua$es estarn disponi"les en todosistema donde circule un "it# 7or ello, podemos ver a estas tecnologas de estndares a"iertos como

un ca"allo ganador#so s, ?0M>F G Javascript compiten con las soluciones nativas ! en t)rminos de rendimiento esmu! difcil que puedan llegar a equipararse# l lengua$e nativo, adems, siempre tendr ma!orfacildad de acceso a las caractersticas espec6cas ! funcionalidades del dispositivo#

0am"i)n compite con los lengua$es ms clsicos como C, 7?7, Java donde 'a! !a muc'simo tra"a$o!a realizado en forma de li"reras disponi"les para los programadores# sta situaci(n estcam"iando, pero 'a! que o"servar que 'asta 'ace poco era complicado 'acer grandes programascon Javascript, pues el lengua$e serva para "ien poco# Con la llegada de ?0M>F ! las diversas A7/se 'a e;tendido muc'o ! se 'a 'ec'o muc'o ms poderoso, pero todava falta"a muc'o terrenopara que Javascript se considerase un lengua$e ro"usto, capaz de cumplir las necesidades deaplicaciones grandes#

1.1./.- AngularJ! ( otros rame2or3s

Decientemente 'an aparecido una oleada de sistemas que 'an situado Javascript en otro nivel#AngularJS es uno de ellos, pero estn otros muc'os como +ack"oneJS o m"erJS# Son losframeworks que vienen a aportar 'erramientas ! patrones de dise8o con los que Javascript seconvierte en un lengua$e capaz de servir como motor de aplicaciones enormes#

tiene todo el sentido que sea as# ?o! los ordenadores modernos, por mu! modestos que sean, soncapaces de procesar con velocidad ciertas cosas# Son capaces de reci"ir simples datos ! 1cocinarse1ellos mismos el ?0M> para visualizarlos a "ase de plantillas# Antes el servidor era el que tena queenviar el ?0M> completo al cliente, a'ora la tendencia es que solo enve los datos ! que el clienteHnavegador o cualquier otro sistema donde desees ver esos datosI sea el que los trate ! los muestrede"idamente#

sto 'a producido que una parte de la l(gica de maquetado ! de presentaci(n de la informaci(n se'a!a trasladado del servidor 'acia los clientes# >a venta$a o"via es que el servidor se 'a descargadode tra"a$o, puesto que simplemente tiene que enviar los datos a trav)s de JSE& al cliente ! es )steel que se encargar de producir el ?0M> que sea necesario# 7ero no es solo una me$ora en relaci(nal servidor en t)rminos de procesamiento, tam"i)n en t)rminos de "its, porque es ms ligerotransferir datos simples que el ?0M> completo para mostrarlos#

n de6nitiva, el servidor 'a repartido la carga de tra"a$o que sola recaer so"re )l entre todos losclientes que se conectan a su servicio# 7ero la me$ora no se queda solamente en el servidor, sinoque el usuario tam"i)n perci"e un me$or desempe8o, puesto que las acciones que realiza contra elservidor tienen una respuesta ms rpida# Con ello poco a poco las aplicaciones cliente.servidortienen un desempe8o ms parecido a las aplicaciones de escritorio# l usuario es el re! ! demandaaplicaciones que sean rpidas ! no le 'agan esperar ! eso se lo dan los frameworks comoAngularJS#

Al programador adems le facilitan las cosas, no solo por disponer de un con$unto de li"reras, sinoporque los frameworks nos traen un con$unto de paradigmas ! patrones que facilitan el desarrollodel software ! so"re todo su mantenimiento# &os referimos principalmente al llamado MVC, que esla separaci(n del c(digo en diferentes responsa"ilidades# A'ora cada parte del c(digo de"emossituarlo en un lugar determinado, ! ese orden nos facilita que los desarrollos sean ms mane$a"les#So"re todo esa me$ora permite que en un futuro puedas 1meter mano1 al software para mantenerlocuando sea necesario# 0odo redunda en la calidad del cdigo, lo que es indispensa"le para lospro!ectos ! los programadores#

1.1.4.- Potente5 sen$illo ( e6tensible

Adems 'a! un ecosistema de 'erramientas alrededor de los frameworks ! no solo aquellas queestn incorporadas en las li"reras del propio AngularJS o cualquiera de sus competidores, sino unaserie de servicios we" ! li"reras de terceros que nos facilitan una enorme gama de o"$etivos#



5/70

Manual de AngularJS DesarrolloWeb.com C / 70

7or poner dos e$emplos tenemos Apac'e Cordova, que es una li"rera para servir de puente a?0M>F.JS 'acia las caractersticas ! funcionalidades de los dispositivos m(viles# E sistemas comoAngularire que es un 1"ackend as a service1, que permite crear tu propia A7/ ! que ellos seocupen de crear todos los sistemas para la persistencia de la informaci(n ! la entrega de los JSE

1.1.7.- AngularJ! me8ora el HM #ara $rear a#li$a$iones 2ebAngularJS ! otros frameworks tienen adems la caracterstica de me$orar el ?0M> e;istente,facilitando el desarrollo de aplicaciones# n este punto ca"e recalcar la pala"ra 1aplicaciones1puesto que este tipo de 'erramientas son adecuadas para realizar las llamadas 1aplicaciones degesti(n1 o 1aplicaciones de negocio1#

s importante esta menci(n porque AngularJS no es adecuado para resolver todo tipo de pro!ectos,o al menos no te facilitar especialmente ciertos desarrollos# /ncluso por sus caractersticas 'a"rnecesidades que ni siquiera sea adecuadas realizar en ?0M>F, como posi"lemente un video$uegocon gr6cos avanzados, donde sera ms adecuado una aplicaci(n nativa Haunque esto en el futuropueda cam"iarI#

Etro e$emplo es la realizaci(n de una aplicaci(n intensiva de SE# n cuanto a posicionamiento

orgnico en "uscadores el desarrollo con AngularJS, u otros frameworks Javascript, no es mu!interesante porque el ?0M> que reci"en los clientes =o los "ots del motor de "@squeda= estprcticamente vaco de contenido ! solo se rellena a posteriori por medio de solicitudes A$a;#7arece que %oogle est 'aciendo esfuerzos para que esta situaci(n cam"ie ! e;isten diversassoluciones a nivel de programaci(n que pueden paliar en parte la carencia de SE, pero lo cierto esque el desarrollo de la aplicaci(n se complica al aplicarlas#

n 6n, AngularJS nos ofrece muc'as facilidades para 'acer aplicaciones !eb, aplicaciones degesti(n o de negocio, aplicaciones "ue #uncionan en dispositivos! que tienen un rendimientomu! similar a las nativas e incluso aplicaciones de escritorio con un #rontal !eb, cada vez ms'a"ituales#

1.1.9.- Por qu Angular J! ( no otros rame2or3s

n este sentido podra 'a"er muc'o que discutir entre partidarios de uno ! otro framework, pero side$amos a un lado las preferencias personales de cada uno, por aquella tecnologa en la que 'a!aapostado en el pasado, AngularJS es o"$etivamente me$or en muc'os sentidos#

7rimero ! ms importante es que con AngularJS requieres escri"ir menos c(digo que con otrosframeworks# 7or e$emplo con respecto a +ack"oneJS 'a! muc'as me$oras que son realmentecrticas como el 1do"le "indign1 que te permite que los distintos componentes de tu aplicaci(nest)n al tanto de los cam"ios para modi6car su estado automticamente, sin necesidad desuscri"irse a eventos ! realizar otro tipo de acciones por medio de lneas de c(digo# n este sentido'a! tests o"$etivos que nos permiten ver que la misma aplicaci(n 'ec'a con AngularJS tienesensi"lemente menos c(digo que en +ack"oneJS ! quizs con otros frameworks pase lo mismo#

Segundo la comunidad# AngularJS tiene el apo!o de %oogle ! una gran comunidad detrs# >as

"@squedas de AngularJS se 'an disparado mientras que las de otros frameworks no 'an me$orado o'an cado# sto quiere decir en de6nitiva que encontrars ms documentaci(n ! ms componentesde otros desarrolladores para "asar tu tra"a$o en ellos#

?asta aqu el primer artculo de AngularJS, que 'a sido un tanto general# Solo esperamos que te'a!as quedado con ganas de ms# n el siguiente post te e;plicaremos qu) es AngularJS#

A continuaci(n encuentras la c'arla que 'a servido de "ase para escri"ir este artculo, de Al"erto+asalo# Mu! entretenida e interesante, capaz de a"rirnos la mente ! motivarnos a aprenderAngularJS#

Artculo por Alberto Basalo



6/70


1.&.- :u es AngularJ!escripcin general sobre AngularJS, el framework Javascript, as como los principales componentes que tiene "los conceptos que debemos conocer antes de poner manos en el cdigo!

AngularJS es Javascript# s un pro!ecto de c(digo a"ierto, realizado en Javascript que contiene uncon$unto de li"reras @tiles para el desarrollo de aplicaciones we" ! propone una serie de patronesde dise8o para llevarlas a ca"o# n pocas pala"ras, es lo que se conoce como un framework para eldesarrollo, en esta caso so"re el lengua$e Javascript con programaci(n del lado del cliente#

7uedes encontrar el pro!ecto de AngularJS en su propio sitio we" que 'acen# Kue puedan producirun ?0M> que, de manera declarativa, genere aplicaciones que sean fciles de entender inclusopara alguien que no tiene conocimientos profundos de informtica# l o"$etivo es producir un?0M> altamente semntico, es decir, que cuando lo leas entiendas de manera clara qu) es lo que'ace o para qu) sirve cada cosa#

>(gicamente, AngularJS viene cargado con todas las 'erramientas que los creadores ofrecen paraque los desarrolladores sean capaces de crear ese ?0M> enriquecido# >a pala"ra clave que permiteese ?0M> declarativo en AngularJS es 1directiva1, que no es otra cosa que c(digo Javascript queme$ora el ?0M># 7uedes usar el que viene con AngularJS ! el que 'an 'ec'o tercerosdesarrolladores, puesto que muc'as personas estn contri"u!endo con peque8os pro!ectos=independientes del propio framework= para enriquecer el panorama de directivas disponi"les#?asta este punto sers un 1consumidor de directivas1, ! 6nalmente cuando va!as tomandoe;periencia sers capaz de convertirte en un 1productor de directivas1, enriqueciendo t@ mismo las'erramientas para me$orar tu propio ?0M>#

1.&.&.- Promueve #atrones de dise;o ade$uados #ara a#li$a$iones 2eb

Angular promueve ! usa patrones de dise8o de software# n concreto implementa lo que se llama

MVC, aunque en una variante mu! e;tendida en el mundo de Javascript que luego comentaremoscon ms detalle# +sicamente estos patrones nos marcan la separaci(n del c(digo de los programasdependiendo de su responsa"ilidad# so permite repartir la l(gica de la aplicaci(n por capas, lo que

https://angularjs.org/https://angularjs.org/http://www.desarrolloweb.com/articulos/por-que-angularjs.htmlhttp://www.desarrolloweb.com/articulos/por-que-angularjs.htmlhttps://angularjs.org/https://angularjs.org/http://www.desarrolloweb.com/articulos/por-que-angularjs.html


7/70


resulta mu! adecuado para aplicaciones de negocio ! para las aplicaciones S7A HSingle 7ageAplicationI#

Nota:>as S7A o 1Aplicaciones de una sola pgina1, son sitios we" donde los usuarios perci"en una e;periencia

similar a la que se tiene con las aplicaciones de escritorio# n este tipo de sitios la pgina no se recarga, no e;iste

una navegaci(n de una pgina a otra totalmente diferente, sino que se van intercam"iando las 1vistas1#

0)cnicamente podramos decir que, al interactuar con el sitio, el navegador no recarga todo el contenido, sino

@nicamente vistas dentro de la misma pgina#

1.&.).- AngularJ! a vista de #8aro

A'ora vamos a 'acer un "reve recorrido para nom"rar ! descri"ir con unos peque8os apuntesaquellos elementos ! conceptos que te vas a encontrar dentro de AngularJS#

7rimeramente tenemos que 'a"lar so"re el gran patr(n que se usa en Angular, el conocido Modelo,Vista, Controlador#

$istas:Ser el ?0M> ! todo lo que represente datos o informaci(n# %ontroladores:Se encargarn de la l(gica de la aplicaci(n ! so"re todo de las llamadas

1actoras1 ! 1Servicios1 para mover datos contra servidores o memoria local en ?0M>F# Modelo de la vista:n Angular el 1Modelo1 es algo ms de aquello que se entiende

'a"itualmente cuando te 'a"lan del MVC tradicional, osea, las vistas son algo ms que elmodelo de datos# n modo de e$emplo, en aplicaciones de negocio donde tienes que mane$arla conta"ilidad de una empresa, el modelo seran los movimientos conta"les# 7ero en unapantalla concreta de tu aplicaci(n es posi"le que tengas que ver otras cosas, adems delmovimiento conta"le, como el nom"re de los usuarios, los permisos que tienen, si puedenver los datos, editarlos, etc# 0oda esa informaci(n, que es @til para el programador pero que

no forma parte del modelo del negocio, es a lo que llamamos el 1Scope1 que es el modelo enAngular#

Nota:7or ese motivo por el cual en AngularJS tienes unos modelos un poco diferentes, algunos autores dicen

que el patr(n que utiliza el framework es el MVVM Model=View=View=Model# n resumen, el modelo de la vista son

los datos ms los datos adicionales que necesitas para mostrarlos adecuadamente#

Adems del patr(n principal, descrito 'asta a'ora tenemos los m(dulosa manera que nos va a proponer AngularJS para que nosotros como desarrolladoresseamos cada vez ms ordenados, que no tengamos e;cusas para no 'acer un "uen c(digo, para

evitar el c(digo espaguetti, 6c'eros gigantescos con miles de lneas de c(digo, etc# 7odemos dividirlas cosas, evitar el in6erno de las varia"les glo"ales en Javascript, etc# Con los m(dulos podemosrealizar aplicaciones "ien 'ec'as, de las que un programador pueda sentirse orgulloso ! so"retodo, que nos facilite su desarrollo ! el mantenimiento#



8/70


1.&.,.-


9/70



1.).- AngularJ! >s 8:uer(

-)omplementarias. -)ompetidoras. Analiamos similitudes " diferencias de j/uer" " AngularJS, casos en los quesera m$s aconsejable una u otra librera " una comparativa de cdigo, de un mismo problema, resuelto conambas herramientas!

&o quiero comenzar a escri"ir sin e;plicar "ien el ttulo de este artculo# Kuien tenga alguna ideade AngularJS quizs piense que 'emos patinado al intentar enfrentarlo a $Kuer! pues son li"rerascon 6losofas diferentes, que sirven para resolver distintos tipos de pro"lemas# n de6nitiva, las dosson para endulzar el Javascript del lado del cliente, pero cada una es adecuada para un tipo depro"lemas# So"re todo esto 'a"laremos con "astante detalle a lo largo del artculo, para no causarconfusi(n entre los lectores, tanto noveles como e;perimentados# Lnimos adems una comparativade las 6losofas de am"as 'erramientas, ree$ada en el c(digo de resoluci(n de un mismopro"lema, lo que nos a!udar a entender me$or sus diferencias#

ic'o eso, aclaro que la elecci(n del ttulo responde a )sta es una duda 'a"itual de las personasque se interesan por Angular u otras li"reras MV* de Javascript# Si t@ tienes la duda, o quieresentender me$or la 6losofa de AngularJS, puedes seguir le!endo# Si t@ !a conoces perfectamente lasdiferencias ! no necesitas sa"er ms, puedes saltarte este artculo ! seguir tranquilamente por elsiguiente del Manual de AngularJS#

Muc'os de nosotros 'emos entrado en el mundo de las li"reras Javascript de la mano de $Kuer!#/ncluso 'a! tam"i)n muc'os desarrolladores que 'an entrado en el lengua$e Javascript aprendiendo$Kuer!# l caso es que en el pasado lustro $Kuer! 'a dominado el mundo del desarrollo del lado delcliente ! sigue usndose de manera mu! 'a"itual, 'asta el punto de considerarse casi un estndar#Sin em"argo, nuevas li"reras Javascript ! frameworks como AngularJS van un paso ms all dedonde se queda $Kuer!, aportando muc'as otras utilidades ! patrones de dise8o de software#

espu)s de 'a"er invertido tanto tiempo en el aprendiza$e de $Kuer!, una de las preguntas quemuc'os nos 'acemos cuando conocemos AngularJS es BKu) me queda de todo eso cuando me paseal desarrollo con AngularJS BKu) pasa con $Kuer! BSirven para 'acer lo mismo Bsoncompetidores Bcomplementarios

Nota:7arte de este artculo es transcripci(n de una parte de la presentaci(n so"re AngularJS que nos ofreci( en

esarrollo-e"#com Al"erto +asalo# Adems adicionalmente 'emos a8adido una comparativa entre el 1?ola

mundo1 tpico de AngularJS con esta li"rera ! el c(digo que de"eras emplear si usas $Kuer!#

1.).1.- AngularJ! ( 8:uer( son dos librer?as de al$an$es distintosSi queremos entrar en esta discusi(n, ! para no liar a aquellos desarrolladores con menose;periencia, de"emos decir que $Kuer! ! AngularJS son li"reras "ien diferentes# l alcance ! el

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


10/70


tipo de cosas que se 'acen con una ! otra li"rera son distintos#

$Kuer! es una li"rera que nos sirve para acceder ! modi6car el estado de cualquiera de loselementos de la pgina# A trav)s de $Kuer! ! los selectores de CSS Has como los selectores creadospor el propio $Kuer!I eres capaz de llegar a los elementos de la pgina, a cualquiera de ellos, !puedes leer ! modi6car sus propiedades, suscri"irte a eventos que ocurran en esos elementos, etc#

Con $Kuer! podamos mane$ar cualquier cosa que ocurra en esos elementos de una manera muc'oms c(moda que con Javascript 1a pelo1 ! compati"le con la ma!or gama de navegadores#

Sin em"argo Angular pasa de ser una li"rera para convertirse en un framework de aplicacioneswe"# &o solo te permite una serie de funciones ! mecanismos para acceder a los elementos de lapgina ! modi6carlos, sino que tam"i)n te ofrece una serie de mecanismos por los cuales e;tenderel ?0M>, para 'acerlo ms semntico, incluso a'orrarte muc'as lneas de c(digo Javascript para'acer las mismas cosas que antes 'acas con $Kuer!# 7ero la principal diferencia ! por la cualAngularJS toma la denominaci(n de 1framework1, es que te marca una serie de normas ! '"itos enla programaci(n, principalmente gracias al patr(n MVC implementado en AngularJS#

Nota:7ara ms informaci(n puedes leerte los captulos iniciales del Manual de AngularJS, donde aprenders

ms so"re las caractersticas del framework#

1.).&.- 8qite dentro de AngularJ!

1AngularJS se 'a comido a $Kuer!1# entro de AngularJS tienes una peque8a implementaci(n de$Kuer!# 0odos 'emos usado millones de veces $Kuer! ! es una li"rera e;celente porque nos facilitael acceso al EM ! adems nos ofrece un A7/ de funciones que son compati"les con todos losnavegadores#

so mismo lo tienes dentro del script de AngularJS, por lo que si no lo deseas, no necesitas usar$Kuer! para nada# entro de Angular tienes $q>ite 1$Kuer! >ite1 que viene a ser una li"rera deacceso al EM, con la mnima funcionalidad necesaria#

sto quiere decir que las directivas que trae AngularJS usan $Kuer! por de"a$o, o algo mu! similar,un su"con$unto de $Kuer!# 7or supuesto, cuando t@ programes tus propias directivas puedes usar lali"rera de acceso al EM que viene con AngularJS# Si esa peque8a li"rera no te resulta su6ciente! necesitas ma!or funcionalidad, nadie te impide usar el $Kuer! de verdad#

Si AngularJS detecta que ests usando $Kuer!, todo el tema de acceso al EM lo 'ar a trav)s de$Kuer!, de$ando su implementaci(n H$q>iteI sin usar# Si detecta que no tienes $Kuer!, entonces poneen marc'a su propia li"rera de acceso al EM#

Nota:/ncluso $Kuer! puede traer me$oras de rendimiento con respecto a la misma funcionalidad que viene en

AngularJS# &o es el caso a'ora estudiar el rendimiento de una ! otra li"rera sino entender sus diferencias# &o

o"stante, a pesar de $Kuer! poder dar un poco ms de rendimiento en tiempo de e$ecuci(n, se notar solamente

con tra"a$os intensivos ! 'a"ra que tener en cuenta el tiempo de carga de la li"rera adicional para comparar

de6nitivamente usar Angulas a secas o Angular con $Kuer!#

1.).).- 'nton$es uso 8:uer( dentro de AngularJ! *s? o no+

S, puedes usarlo, aunque no es a"solutamente necesario#

Sin em"argo, de"e quedar claro que el uso de $Kuer! de"e quedar restringido a las vistas, 6ltros !creaci(n de nuevas directivas, nunca al uso de factoras, servicios o controladores# Cuando unapersona que viene de $Kuer! ! comienza a usar AngularJS es normal que caiga en costum"res !

mecanismos a los que est 'a"ituado con aquella li"rera# 7or e$emplo, se corre el riesgo de quereracceder al EM desde los controladores ! es algo que no se de"e realizar "a$o ning@n concepto#

n ese sentido, para las personas que usan AngularJS ! estn acostum"radas a $Kuer!, en un



11/70


principio al menos puede ser recomenda"le evitar siempre que se pueda usar $Kuer!# s decir, 1nousar $Kuer! 'asta que no sea estrictamente necesario1# cuando lo uses, insistimos, siempre serdesde la de6nici(n de las directivas, nunca desde los propios controladores#

Si tus requisitos son ms sencillos, realizaci(n de sitios we" en los que tienes poco peso deJavascript ! limitado a crear interfaces de usuario dinmicas o peque8os comportamientos

interactivos, puedes seguir usando $Kuer!# AngularJS est ms destinada a aplicaciones we"comple$as, ms parecidas a las aplicaciones de escritorio, con uso mu! intensivo de Javascript# &otodos los pro"lemas tpicos de un sitio we" sera adecuado resolver con AngularJS, pues a vecesser como 1matar moscas a ca8onazos1 ! por la comple$idad de Angular te puede generar c(digoms difcil de producir ! so"re todo de entender para una persona con menos e;periencia#

Adems el 'ec'o de Angular usar patrones de dise8o como el MVC puede despistar "astante a laspersonas con menos "aga$e en el mundo de la programaci(n# >os patrones de dise8o son algo queest para a!udarnos, pero no todos los pro!ectos ! desarrolladores los necesitan, pues complica lacurva de aprendiza$e de las tecnologas ! en ocasiones si nuestro pro"lema es sencillo no ofrecenuna soluci(n sensi"lemente me$or#

1.).,.- Com#arativa de $@digo 8:uer( AngularJ!

?a quedado claro que Angular va ms all del o"$etivo de $Kuer!# Son dos li"reras distintas, quemuc'as veces se pueden complementar, pero dependiendo del tipo de pro!ecto ! de las cosas quetengas que 'acer con Javascript elegirs una u otra# &o o"stante, queremos 'acer esta comparativade c(digo para o"servar algunas de las diferencias de 6losofa entre $Kuer! ! AngularJS ! tam"i)ncompro"ar de paso la potencia de este @ltimo#

n este caso vamos a comparar el c(digo que vimos en el ?ola Mundo de AngularJS# >a idea essimplemente escri"ir un nom"re en un campo de te;to ! volcarlo en una etiqueta ?4#

sto en $Kuer! se podra 'acer con un c(digo como este / 70

Ej la #nd desarrllad en ng#lar?o que ms de"era llamar nuestra atenci(n es que el c(digo deAngularJS es muc'o ms entendi"le, incluso por personas que no tengan idea de programar# Comopuedes deducir, en Angular escri"imos generalmente menos c(digo Javascript, pero s esimportante decir que de"ido al uso del patr(n MV* Hseparaci(n del c(digo por sus diferenteso"$etivosI, en e$emplos ms avanzados o"servars que entran en $uego diferentes factores quecomplican las soluciones# %eneralmente, aunque en la m)trica de lneas de c(digo AngularJS puedaganar a $Kuer!, tam"i)n de"es sa"er que te e;igir ma!or capacidad de a"stracci(n ! entenderdiversos conceptos de patrones de dise8o de software#

0odo ello nos de"e 'acer entender me$or la potencia de AngularJS# 7ero o$o, sin desmerecer a$Kuer!, pues de"e quedar claro que cada li"rera es @til en su campo#

Artculo por Miguel Angel lvarez

1.,.- Primeros #asos $on AngularJ!/u0 necesitas para trabajar con AngularJS, como descargar el framework " cmo realiar un primer programa,el tpico 1ola 'undo!

a 'emos conocido por qu) AngularJS nos a!uda en el desarrollo de sitios we" modernos ! tam"i)n'emos e;plorado en detalle diversos conceptos iniciales para mane$ar esta li"rera, as que queestamos en condiciones de poner manos en el c(digo#

n este artculo queremos ofrecer una introducci(n mu! "sica a AngularJS, creando une;traordinariamente sencillo 1?ola mundo1 con el que podremos empezar a apreciar la potencia deeste framework Javascript# >os impacientes e mane$ar c(digo estar)is satisfec'os despu)s de lalectura de este artculo, pero antes que nada tenemos que sa"er qu) materiales necesito en miordenador para comenzar a tra"a$ar#

https://www.youtube.com/watch?v=uFTFsKmkQnQhttps://www.youtube.com/watch?v=uFTFsKmkQnQhttps://www.youtube.com/watch?v=uFTFsKmkQnQ


13/70


1.,.1.- :u ne$esitas #ara desarrollar $on AngularJ!

>o @nico que necesitas para desarrollar con AngularJS es un editor de te;to ! un navegador# As desencillo, seguramente todo el mundo tenga !a con6gurado su editor preferido, as que te puedes

saltar si quieres estos siguientes prrafos# 7ara los que no tengan claro esto, os de$o un par decomentarios#

'ditor de cdigo:puede ser cualquiera que est)s acostum"rado a usar, no necesitascam"iarlo para programar con Angular# >o que es interesante es que sea un editor paraprogramadores, que te permita diversas a!udas al escri"ir el c(digo, coloreado de sinta;is,a!udas conte;tuales, etc# &otepadGG, Su"lime 0e;t, 9omodo dit, +rackets, etc# Cualquieraes "ueno# Si ests acostum"rado a /s ms comple$os como clipse o 7'pStorm, puedesquedarte tam"i)n con ellos#

Navegador:7uedes usar cualquier navegador para ver un desarrollo "asado en Angular#%eneralmente tendrs incluso varios navegadores para pro"ar tu pgina en cada uno deellos ! compro"ar que todo est en orden# Solo te recomendamos tener a %oogle C'romeentre tu "atera de navegadores, pues luego 'a"laremos de una e;tensi(n que e;iste para)ste que te permite e;aminar ! depurar pginas donde AngularJS est tra"a$ando#

1.,.&.- uego encontrars un campo de te;to dondeest la LD> de la li"rera Hesa LD> est marcada con las siglas 1C&1 al ladoI# a sa"es que el C&te ofrece un contenido, en este caso un script Javascript, que est alo$ado en otro servidor, pero quelo puedes usar desde tu pgina para me$orar la entrega del mismo#

Nota:>a versi(n minimizada pesa menos en 9", por lo que ser la adecuada para cualquier sitio que tengas en

producci(n# Sin em"argo la versi(n sin comprimir 1Lncompressed1 tiene el c(digo completo, con comentarios,

sangrado, etc# lo que 'ace que sea ms fcil de leer por 'umanos# 7uedes usar si lo deseas la versi(n sin

comprimir en la etapa de desarrollo#

Ser algo como 'ttps


14/70

Manual de AngularJS DesarrolloWeb.com 1B / 70

1.,.).- n$luir AngularJ! en una #gina 2eb

Lna vez tienes tu C& puedes incluir el script de Angular en la pgina con la etiqueta SCD/70# sescript lo puedes colocar en el ?A o "ien antes del 6nal del +E, en principio no 'a"radiferencias en lo relativo a la funcionalidad, pero s 'a! una peque8a me$ora si lo colocas antes decerrar el cuerpo#

Simplemente, si lo colocas en el ?A ests o"ligando a que tu navegador se descargue la li"rerade AngularJS, retrasando quizs la descarga de reas de la pgina con contenido# Si lo colocasantes de cerrar el +E facilitas la vida a tu navegador, ! por a8adido a tus usuarios, pues podrdescargar todo el ?0M>, ir renderizando en la pantalla del usuario los contenidos sin entretenersedescargando AngularJS 'asta que sea realmente necesario#

1.,.,.-

000 1#B el c#er de t# gina 000

, aun veremos algunams en este artculo#

1.,./.- Hola Mundo en AngularJ!

A'ora vamos a poner algo de carne en el asador ! vamos a o"servar la potencia de AngularJS conmu! poco c(digo# Dealmente, como o"servars, se trata de cero c(digo HJavascriptI#

Nota:l c(digo de este ?ola Mundo lo puedes encontrar tam"i)n, prcticamente la misma implementaci(n, en

la 'ome de AngularJS#

Vamos a colocar un formulario con un campo de te;to#

*C+m te llamas,

E"serva que en el campo de te;to 'emos usado ng=model ! le 'emos asignado un valor# se ng=model es otra directiva que nos dice que ese campo de te;to forma parte de nuestro modelo ! el

valor 1nom"re1 es la referencia con la que se conocer a este dato# /nsisto en que ms adelante'a"laremos con detalle so"re estos datos ! veremos nuevos e$emplos#

A'ora vamos a crear un elemento de tu pgina donde volcaremos lo que 'a!a escrito en ese campo



15/70

Manual de AngularJS DesarrolloWeb.com 1C / 70

de te;to#

la 55nm're

Como ves, dentro del ?4 tenemos PPnom"reQQ# sas do"les llaves nos sirven para indicarle aAngularJS que lo que 'a! dentro es una e;presi(n# All podemos colocar cosas Hc(digoI para que

Angular resuelva por nosotros# n este caso estamos colocando simplemente el nom"re del modeloo dato que queremos mostrar#

1.,.4.- C@digo $om#leto

&uestro e$emplo es perfectamente funcional# Si esta"as esperando que escri"i)semos algo deJavascript, lamento decepcionarte# >a potencia de AngularJS es $ustamente que muc'as cosas sepueden 'acer en el documento ?0M> simplemente e;tendiendo sus posi"ilidades a trav)s dedirectivas ! e;presiones#

Claro que para que esto funcione, por de"a$o el framework 'ace muc'as cosas, pero de momentono es el caso e;tenderse ms#

7uedes ver el c(digo completo a continuaci(n# 7uedes copiarlo ! pegarlo tal cual en tu editor dete;to, en un nuevo arc'ivo #'tml ! de"era de funcionarte sin ning@n pro"lema#

Ej de ng#lar?a traducci(n de 1"inding1 sera 1enlace1 ! sirvepara eso $ustamente, realizar un ne;o de uni(n entre unas cosas ! otras# ata "inding sera 1enlace



16/70


de datos1#

Adems, una de las caractersticas de AngularJS es producir automticamente lo que se llama el1do"le "inding1 que nos facilita enormemente nuestro tra"a$o por a'orrarnos muc'as lneas dec(digo para realizarlo a mano# l do"le "inding no e;iste en todos los frameworks MVC deJavascript como +ack"oneJS, donde solo tenemos un 1"indeo1 simple#

1./.1.- :u es el binding

l "inding no es ms que enlazar la informaci(n que tenemos en el 1scope1 con lo que mostramosen el ?0M># sto se produce en dos sentidos# >o conseguimos con la sinta;is1Mustac'e1 de las dos llaves#

55 dat

se dato estaras tra!)ndolo desde el scope ! mostrndolo en la pgina# >a informaci(n u!e desdeel scope 'acia la representaci(n quiere decir que, si por lo que sea se actualiza el dato que 'a!almacenado en el modelo HscopeI se actualizar automticamente en la presentaci(n HpginaI#

T!o)!ay binding:n este segundo caso la informaci(n u!e desde el scope 'acia la parte visual Higual que en 1one=wa! "inding1I ! tam"i)n desde la parte visual 'acia el scope# >a implementas por medio de ladirectiva ngModel#

n este caso cuando el modelo cam"ie, el dato que est escrito en el campo de te;to Ho en elelemento de formulario donde lo usesI se actualizara automticamente con el nuevo valor# Adems,

gracias al do"le "inding Htwo=wa!I en este caso, cuando el usuario cam"ie el valor del campo dete;to el scope se actualizar automticamente#

1./.&.- C@mo #uedo e6#erimentar el binding

Dealmente en los e$emplos ms sencillos de AngularJS !a 'emos e;perimentado el "inding# &o me'ace falta ni Javascript para poder 'acer un e$emplo donde se pueda ver en marc'a perfectamente#

55dat

Mira, tienes tres elementos destaca"les#

Ln campo de te;to con ng=modelN1dato1# n ese campo tenemos un 1do"le "inding1#



17/70


Lna e;presi(n PPdatoQQ donde se mostrar aquello que 'a!a escrito en el campo de te;to#n este caso tenemos un "inding simple, de un @nico sentido#

6nalmente tienes un "ot(n que no tiene "indig alguno# Simplemente, cuando lo pulses, estse$ecutando una e;presi(n Hcon ng=clickI para cam"iar el scope en su varia"le 1dato1#

l "inding one=wa! lo ves mu! fcilmente# Simplemente escri"e algo en el campo de te;to ! o"serva

como se actualiza el lugar de la pgina donde ests volcndo el valor con PPdatoQQ#7ara poder ver "ien el do"le "inding 'e tenido que crear el "ot(n, que 'ace cam"ios en el scope#Aclaro de nuevo que el do"le "inding de todos modos lo tienes en el /&7L0 te;t# irecci(n 4I lo vescuando escri"es datos en el campo de te;to, que via$an al modelo automticamente H! sa"emos quees cierto porque vemos c(mo PPdatoQQ actualiza su valor# irecci(n 2I lo ves cuando 'aces click enel "ot(n# ntonces se actualiza ese dato del modelo ! automticamente via$a ese nuevo valor delscope 'acia el campo de te;to#

1./.).- Por qu el binding es tan til

7iensa en una aplicaci(n que realizases con Javascript com@n Hsin usar li"rera algunaI, o inclusocon $Kuer! que no tiene un "inding automtico# 7iensa todo el c(digo que tendras que 'acer para

implementar ese peque8o e$emplo# Suscri"irte eventos, de6nir las funciones mane$adoras para quecuando cam"ie el estado del campo de te;to, volcarlo so"re la pgina# Crear el mane$ador del "ot(npara que cuando lo pulses se enve el nuevo te;to 1'ola1 tanto al campo de te;to como a la pgina,etc#

&o estamos diciendo que sea difcil 'acer eso 1a mano1, seguro que la ma!ora es capaz de 'acerloen $Kuer!, pero f$ate que para cada una de esas peque8as tareas tienes que agregar varias lneasde c(digo, de6nir eventos, mane$adores, especi6car el c(digo para que los datos via$en de un lugara otro# Kuizs no es tan complicado, pero s es "astante la"orioso ! en aplicaciones comple$ascomienza a resultar un in6erno tener que estar pendiente de tantas cosas#

Etra venta$a, aparte del propio tiempo que a'orras, es una limpieza de c(digo mu! destaca"le, !aque no tienes que estar implementando muc'os eventos ni tienes necesidad de enviar datos de unsitio a otro# 0al como te viene un JSE& de una llamada a un servicio we" lo enganc'as al scope !

automticamente lo tienes disponi"le en la vista, lo que es una maravilla# sto se ve de maneranota"le en comparaci(n con otros frameworks como +ack"oneJS#

Nota:Esea que el do"le "inding de Angular nos a'orra muc'o tra"a$o, pero o$o, quizs no sea necesario para

cualquier tipo de aplicaci(n# Si tus necesidades no son mu! grandes igual no consigues adelantar tanto# /ncluso en

aplicaciones con inmensa cantidad de datos puede que el do"le "inding te pueda ralentizar un poco la aplicaci(n

porque toda esa gesti(n del "inding se 'aga pesada, igual de manera innecesaria# n esos casos quizs otra

li"rera funcione me$or que AngularJS# Sin em"argo, la inmensa ma!ora de las aplicaciones se "ene6ciarn de ese

do"le "inding#

1./.,.- C0 o simplemente para repetir cualquier pedazo del EM# n estoscasos, cuando la colecci(n cam"ia, nuestra pgina se actualiza automticamente#

0am"i)n puedes 'acer "inding a atri"utos de diversas etiquetas de la pgina, con las directivasng?ref o ngSrc, ngSt!le, ngClass# 0am"i)n funciona en formularios con una especie de framework

de validaci(n 1Validations1 o con el propio ngSu"mit# 0odo eso lo iremos viendo ms adelante cone$emplos#




18/70


Parte 2:

esarrollo declarativo

con AngularJS3omenzamos a introducirnos en el mundo de Angular con una serie de art'culos b@sicosdedicados a lo +ue se conoce como el 2MF declarati$o% una de las caracter'sticas de

esta librer'a% +ue nos ermite realizar alicaciones sencillas sin necesidad de Ja$ascrit.

El roceso consiste en crear una serie de declaraciones en el roio lengua6e de

marcacin en las +ue se indica +u? cometido tienen los elementos de la @gina dentro

de nuestra alicacin (eb.

&.1.- , por medio de lo que se conoce como 1directiva1#



19/70


&.1.1.- :u son las dire$tivas

>as directivas son nuevos 1comandos1 que vas a incorporar al ?0M> ! los puedes asignar acualquiera de las etiquetas por medio de atri"utos# Son como marcas en elementos del EM de tupgina que le indican a AngularJS que tienen que asignarles un comportamiento determinado oincluso transformar ese elemento del EM o alguno de sus 'i$os#

Cuando se e$ecuta una aplicaci(n que tra"a$a con Angular, e;iste un 1?0M> Compiler1 HCompilador?0M>I que se encarga de recorrer el documento ! localizar las directivas que 'a!as colocadodentro del c(digo ?0M>, para e$ecutar aquellos comportamientos asociados a esas directivas#

AngularJS nos trae una serie de directivas 1de f"rica1 que nos sirven para 'acer cosas 'a"ituales,as como t@ o terceros desarrolladores pueden crear sus propias directivas para enriquecer elframework#

&.1.&.- , en la etiqueta?0M> o +E, pero tam"i)n lo podras colocar en un rea ms restringida dentro del documentoen otra de las etiquetas de tu pgina#

Nota:Como puedes compro"ar, ng=app es una directiva ! se indica como si fuera un atri"uto el ?0M># 7ero no

lo es ning@n atri"uto real de ?0M># Si usas un validador de ?0M> te advertir que ese atri"uto es ine;istente !

se interpretar por un error de validaci(n# 7ara solucionar este posi"le inconveniente, la prctica aconse$a"le es

colocar el pre6$o 1data=1 a cada directiva#

e ese modo tu c(digo validar perfectamente, !a que en ?0M>F se pueden crear cualquier tipo de atri"utos

personalizados que comiencen por 1data=1 ! asignarles cualquier tipo de dato que queramos almacenar en la

etiqueta#

7ara no causar confusiones, tam"i)n podemos agregar que a nivel de Javascript las directivas lasencontrars nom"radas con notaci(n 1camel case1, algo como ngApp# n la documentaci(n tam"i)n

las encuentras nom"radas con camel case, sin em"argo, como el ?0M> no es sensi"le a lasma!@sculas ! min@sculas no tiene tanto sentido usar esa notaci(n ! por ello se separan las pala"rasde las directivas por un gui(n 1=1#

Epcionalmente ngApp puede contener como valor un m(dulo de AngularJS a cargar# sto loveremos ms adelante cuando tra"a$emos con m(dulos#

&.1.).- a directiva ngModel informa al compilador ?0M> de AngularJS que que ests declarando unavaria"le de tu modelo# >as puedes usar dentro de campos /&7L0, S>C0, 0R0ADA Ho controlesde formulario personalizadosI#

Nota:e nuevo, ca"e decir que no forma parte del estndar ?0M> sino que es una e;tensi(n que tenemos



20/70

Manual de AngularJS DesarrolloWeb.com >0 / 70

gracias a AngularJS#

>a indicas con el atri"uto del ?0M> ng=model, asignando el nom"re de la varia"le de tu modelo queests declarando#

Con eso le ests diciendo al framework que est) atento a lo que 'a!a escrito en ese campo de te;to,porque es una una varia"le que vas a utilizar para almacenar algo ! porque es importante para tuaplicaci(n#

0)cnicamente, lo que 'aces con ngModel es crear una propiedad dentro del 1scope1 Htu modeloIcu!o valor tendr aquello que se escri"a en el campo de te;to# %racias al 1"inding1 cuandomodi6ques ese valor en el scope por medio de Javascript, tam"i)n se modi6car lo que 'a!a escritoen el campo de te;to# Aunque todo esto lo e;perimentars ! entenders me$or un poco msadelante cuando nos metamos ms de lleno en los controladores#

&.1.,.- '6#resiones

Con las e;presiones tam"i)n enriquecemos el ?0M>, !a que nos permiten colocar cualquier cosa !que AngularJS se encargue de interpretarla ! resolverla# 7ara crear una e;presi(n simplemente laenglo"as dentro de do"les llaves, de inicio ! 6n#

A'ora dentro de tu aplicaci(n, en cualquier lugar de tu c(digo ?0M> delimitado por la etiquetadonde pusiste la directiva ng=app eres capaz de colocar e;presiones# n Angular podemos unagama de tipos de e;presiones, de momento 'agamos una prue"a colocando una e;presi(n as#

55 ( ; (

Angular cuando se pone a e$ecutar la aplicaci(n "uscar e;presiones de este estilo ! lo que tengandentro, si es algo que )l pueda evaluar, lo resolver ! lo sustituir con el resultado quecorresponda#

7uedes pro"ar otra e;presi(n como esta1 / 70

escritas en los controladores, como veremos enseguidaI para poder resolver cualquier tipo denecesidad ms comple$a#

?asta aqu 'emos descrito todos los componentes de AngularJS que !a conociste en el artculo delos 7rimeros pasos con AngularJS# A'ora vamos a conocer otros componentes de las aplicacionesque podemos 'acer con este framework Javascript#


&.&.-


22/70

Manual de AngularJS DesarrolloWeb.com >> / 70

recomendamos leer el artculo Ku) es MVC#

Con esto consigues que tu aplicaci(n inicialice en el scope un dato llamado miArra!atos como un

arra! vaco# 7ero no le prestes demasiada atenci(n al 'ec'o de 'a"er colocado la directiva ng/nitdentro de la misma etiqueta que inicializa la aplicaci(n, pues podra ir en cualquier otra etiqueta detu ?0M># Dealmente, colocarla en esa divisi(n marcada con ngApp es considerado una malaprctica# 0en en cuenta lo siguiente cuando tra"a$es con ng/nita directiva ngDepeat mane$a una serie de propiedades especiales que puedes inicializar para el

conte;to propio de cada repetici(n# 7ara inicializarlas usamos la directiva ng/nit indicando losnom"res de las varia"les donde vamos a guardar esas propiedades# n este caso estamos indicandoque dentro de la repetici(n vamos a mantener una varia"le 1paso1 que tendr el valor de inde;,

http://www.desarrolloweb.com/articulos/que-es-mvc.htmlhttp://www.desarrolloweb.com/articulos/que-es-mvc.htmlhttp://www.desarrolloweb.com/articulos/que-es-mvc.html


23/70

Manual de AngularJS DesarrolloWeb.com > / 70

que equivale al n@mero ndice de cada repetici(n# Esea, en la primera iteraci(n paso valdr cero,luego valdr uno ! as todo seguido# /gual que tienes inde;, Angular te proporciona otraspropiedades @tiles como 6rst Hque valdr true en caso que sea la primera iteraci(nI o last Htruesolo para la @ltima iteraci(nI

Nota:l que aca"as de ver sera el @nico uso de ng/nit considerado como "uena prctica, en con$unto con

ngDepeat para inicializar sus propiedades#

e$amos de momento ngDepeat, aunque vuelvo a se8alar que 'a! otra serie de cosas interesantesen la directiva para las repeticiones, como 6ltros, (rdenes, etc#

&.&.).- para este e$ercicio# 7or ese motivo

'a! un par de cosas que no seran consideradas "uenas prcticas, como el uso de ng/nit para inicializar el arra!

1pensamientos1 ! el 'ec'o de 'a"er colocado dentro de un ng=click e;presiones que sera me$or 'a"er escrito en

una funci(n de nuestro controlador#

n esta aplicaci(n tenemos un campo de te;to para escri"ir cualquier cosa, un 1pensamiento1# Alpulsar so"re el "ot(n se agregar dentro de un arra! llamado 1pensamientos1 lo que se 'a!a escrito



24/70

Manual de AngularJS DesarrolloWeb.com >B / 70

en el campo de te;to# Adems encuentras un "ucle de6nido con ng=repeat que itera so"re el arra!de 1pensamientos1 mostrando todos los que se 'a!an agregado#

lta6I ng#lar? *$#J ha% de n#e6,


25/70

Manual de AngularJS DesarrolloWeb.com >C / 70

&.).1.- 1E =Hola mundo= en AngularJ!

n este primer e$ercicio vimos lo mnimo necesario para comenzar una aplicaci(n con AngularJS#

Devisamos el uso de la directiva ngApp, la directiva ngModel ! una e;presi(n en la que volcamos undato que 'a! en el modelo# s mu! sencillo, as que nadie se puede perder#

l c(digo fuente realizado es el siguiente / 70

interacci(n en los elementos de la pgina# Colocaremos un "ot(n ! dentro de )l el atri"uto ng=clickque nos permitir asignarle un comportamiento#

Aclaramos en el vdeo que no es la manera ms recomenda"le de actuar, puesto que loscomportamientos de"eran escri"irse Hsu c(digoI dentro de los controladores# &o o"stante nosofrece una idea de las posi"ilidades de AngularJS ! est "ien para comenzar a dar los primeros

pasos#Mediante el "ot(n escri"imos dos comportamientos en el vdeo Haunque en el c(digo fuente quetenemos solo se conserv( uno de los comportamientosI# l primero que vers en la gra"aci(n esasignarle un valor al campo S>C0# e ese modo se muestra c(mo el campo de selecci(n pierde elvalor a null con el que lo inicializa automticamente AngularJS# n el segundo comportamientosimplemente se coloca un nuevo te;to en el campo de te;to#

ste es el c(digo fuente que qued( del e$emplo realizado en el vdeo#

hla m#nd en ng#lar 55 camte.t - 55 camselect


27/70


Parte !:

Separando el cdigo

JavascriptDesu?s de arender el desarrollo declarati$o% conocemos las r@cticas habituales en

AngularJS% +ue nos indican +ue cada cdigo debe ir en su lugar adecuado. 3onocemosrimeramente los mdulos & controladores +ue nos ermitir@n organizar nuestro cdigo

searando el Ja$ascrit del 2MF.

).1.- M@dulo5 ob8eto module en AngularJ!/u0 son los mdulos en AngularJS como crear un objeto module en el framework " qu0 tipo de cosas se podr$nhacer con ellos!

>os m(dulos son una de las piezas fundamentales en el desarrollo con AngularJS ! nos sirven paraorganizar el c(digo en esta li"rera# >o puedes entender como un contenedor donde situas el c(digode los controladores, directivas, etc#

>a incorporaci(n de m(dulos en AngularJS es motivada por la realizaci(n de aplicaciones conme$ores prcticas# Son como contenedores aislados, para evitar que tu c(digo interact@e con otrosscripts Javascript que 'a!a en tu aplicaci(n Hentre otras cosas de$arn de producirse colisiones devaria"les, nom"res de funciones repetidos en otras partes del c(digo, etc#I# >os m(dulos tam"i)npermiten que el c(digo sea ms fcilmente reutiliza"le, entre otras venta$as#

).1.1.- ndi$ar el m@dulo al arran$ar la a#li$a$i@n

Cuando arrancas una aplicaci(n AngularJS, usando ng=app generalmente pondrs el nom"re delm(dulo que quieres e$ecutar en tu aplicaci(n#



28/70

Manual de AngularJS DesarrolloWeb.com > / 70

Nota:>a manera recomendada de arrancar la aplicaci(n es con la directiva ngApp, aunque tam"i)n podras si lo

deseas arrancarla con el m)todo angular#"ootstrapHI#

ang#lar0'tstra3dc#ment0getElementN%Kd3mia4: Gmd#ls cinalesH

n ese caso se supone que para identi6car tu aplicaci(n dentro del EM le 'as colocado unidenti6cador 1miapp1# Aprecia tam"i)n que los m(dulos son opcionales e incluso que podra 'a"ervarios m(dulos que deseas arrancar, algo posi"le, pero raramente usado#

Decuerda que 'asta a'ora, en lo que llevamos del Manual de AngularJS, en la directiva ngApp,atri"uto ng=app, no coloc"amos ning@n valor# so era porque 'asta el momento no 'a"amostra"a$ado con m(dulos# Sin em"argo, a partir de a'ora que los aprendemos a utilizar recuerda quelos vas a tener que indicar al arrancar la aplicaci(n#

Nota:Aunque en varios lugares de este manual nos podamos referir a ngApp como 1directiva1 queremos aclarar

que realmente no lo es#>a propia documentaci(n de AngularJS tam"i)n la llama as,pero simplemente es un

atri"uto ! sirve para arrancar desde la function +ootStrap, que es llamada desde la function angular/nit#

'ttps


29/70


en este sentidoo conseguimos por medio del mismo m)todo moduleHI que utilizamos para crear el m(dulo, soloque en esta ocasi(n solo le indicaremos el m(dulo al que queremos acceder#

ang#lar0md#le3n#e6a4

7or si no 'as visto la diferencia con angular#moduleHnom"reModulo, WXI creamos un m(dulo ! conangular#moduleHnom"reModuloI recuperamos un m(dulo que 'a!a sido creado anteriormente conel nom"re nom"reModulo#

).1./.- M@dulos en adelante

Me gustara terminar el artculo con un e$emplo prctico de uso m(dulos en AngularJS pero siutilizamos simplemente el nuevo conocimiento de este artculo sera complicado# n realidad losm(dulos sirven como "ase para implementar muc'as cosas en AngularJS, por lo que enseguida lessacaremos "astante provec'o#

n el siguiente artculo nos introduciremos en los controladores ! comenzaremos a utilizar elfamoso 1scope1# 7ara todo ello es condici(n indispensa"le comenzar con un m(dulo, as que lasprcticas en esta ocasi(n las de$aremos para ms adelante#

Artculo por Pedro "urtado

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


30/70


).&.- Controladores5 $ontroller en AngularJ!)omenamos a entender los controladores! )onocemos lo que es un controller en AngularJS, para qu0 se usa "qu0 tipo de cdigo deben tener, introducimos tambi0n el concepto de scope en Angular!

>os controladores nos permiten mediante programaci(n implementar la l(gica de la presentaci(nen AngularJS# n ellos podemos mantener el c(digo necesario para inicializar una aplicaci(n,gestionar los eventos, etc# 7odemos decir que gestionan el u$o de la parte del cliente, lo que seraprogramaci(n para implementar la funcionalidad asociada a la presentaci(n#

n lneas generales podemos entender que los controladores nos sirven para separar ciertas partesdel c(digo de una aplicaci(n ! evitar que escri"amos Javascript en la vista# s decir para que el?0M> utilizado para la presentaci(n no se mezcle con el Javascript para darle vida#

Nota:>os que !a conocen el MVC podrn 'acerse 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 te(rica el MVC ! de manera

particular c(mo se aplica este paradigma en AngularJS# 7ara los que no sepan MVC ! quieran aprender de qu) se

trata en general, recomendamos la lectura del artculo so"re el paradigma MVC#

Ln controlador puede ser agregado al EM mediante la directiva ngController Hcon el atri"uto ng=controller en la etiqueta ?0M>I ! a partir de entonces tendremos disponi"le en esa etiqueta H!todas sus 'i$asI una serie de datos# sos datos son los que necesitars en la vista para 'acer laparte de presentaci(n ! es lo que asociaramos en el MVC con el 1modelo1# n la terminologa deAngular al modelo se le llama 1scope1 ! dentro de poco vamos a e;plicarlo un poco me$or#

A los controladores podemos in!ectarles valores o constantes# Como su propio nom"re indica, lasconstantes son las que no van a cam"iar a lo largo del uso de la aplicaci(n ! los valores sonaquellas varia"les cu!o dato puede cam"iar durante la e$ecuci(n de una aplicaci(n# 0am"i)n

podremos in!ectar servicios ! factoras, componentes mu! parecidos entre s ! que veremos msadelante#

Nota:Sin entrar a descri"ir de momento lo que son 1services1 ! 1factories1 puedes simplemente recordar que su

utilidad es la de encapsular c(digo#

).&.1.- Con$e#to de !$o#e

7ara poder introducir los controladores de"emos detenernos antes en un concepto que se repite'asta la saciedad dentro de la literatura de AngularJS, el 1scope1# e 'ec'o, tal como dice ladocumentaci(n de AngularJS, el cometido de un controlador consiste en desempe8ar una funci(nconstructora capaz de aumentar el Scope#

'l /scope/ es la pie0a ms importante del motor de 1ngularJ2 y es donde estn los datos

http://www.desarrolloweb.com/articulos/que-es-mvc.htmlhttp://www.desarrolloweb.com/articulos/que-es-mvc.html


31/70


"ue se tienen "ue mane3ar dentro de la parte de presentacin4

l scope es un gran contenedor de datos, que transporta ! 'ace visi"le la informaci(n necesariapara implementar la aplicaci(n, desde el controlador a la vista ! desde la vista al controlador# nt)rminos de c(digo el scope no es ms que un o"$eto al que puedes asignar propiedades nuevas,con los datos que necesites, o incluso con funciones Hm)todosI#

sos datos ! esas funciones estn visi"les tanto en el Javascript de los controladores como en el?0M> de las vistas, sin que tengamos que realizar ning@n c(digo adicional, pues Angular !a seencarga de ello automticamente# Adems, cuando surgen cam"ios en los datos se propagan entrelos controladores ! las vistas automticamente# sto se realiza por un mecanismo que llamamos1"inding1, ! en AngularJS tam"i)n 1do"le "inding1 Hen espa8ol sera enlaceI, que e;plicaremos condetalle en futuros artculos#

As pues, desde los controladores vamos a ser capaces de tra"a$ar con el scope de una maneraminuciosa, agregando o modi6cando informaci(n seg@n lo requiera nuestra aplicaci(n#

Nota:?asta el momento en este Manual de AngularJS'emos usado el scope en varias ocasiones ! !a 'emos

dic'o que representa al modelo, del paradigma MVC# Siempre que 'emos usado el scope en ?0M> 'a sido 4I

agregando partes de la pgina al modelo mediante la directiva ngModel, por e$emplo datos que se escri"an en un

campo de te;to o se selecionen en un campo select, o 2I volcando informaci(n en el ?0M> mediante e;presiones

escritas entre dos llaves PP QQ#

0odo eso esta"a mu! "ien, sin em"argo en t)rminos de programaci(n necesitamos un lugar dondeescri"ir todo el Javascript necesario para implementar la l(gica de la aplicaci(n# /ntegrar elJavascript dentro del ?0M> no es nada recomenda"le, por diversos motivos que !a se conocen# adi$imos adems que dentro del c(digo ?0M>, no se puede Ho me$or dic'o, no se de"eraI 'acerclculos, asignaciones de valores ! en resumen c(digo que represente la l(gica de nuestrasaplicaciones# 0odo ello ir en los controladores#

).&.&.- :u %a$er ( qu no %a$er desde los $ontroladores

A'ora vamos a ver qu) tipo de operaciones de"emos incluir dentro del c(digo de los controladores#ntre otras cosas ! por a'ora de"es sa"er del documento donde van aestar tra"a$ando#

0ampoco son adecuados para formatear la entrada de datos o 6ltrar la salida, ni intercam"iarestados entre distintos controladores# 7ara 'acer todo eso e;isten dentro de AngularJS diversoscomponentes especializados#

).&.).- C@mo es un $ontrolador en AngularJ!

l c(digo necesario para crear un controlador en AngularJS tendr este aspecto / 70

sce0dat?ce = "tra csa"4

Como puedes compro"ar, resulta un tanto comple$o# Adems tenemos que e;plicarte c(mo seenganc'a este controlador dentro del c(digo ?0M># 7ara e;plicar todo eso con calma necesitamosalargarnos "astante, as que lo veremos en el siguiente artculo# Adems, te e;plicaremos variasalternativas de c(digo para tra"a$ar con controladores que se usan 'a"itualmente en AngularJS,con me$ores ! peores prcticas#

Artculo por #avier Jorge $erd%

).).- >ariantes #ara $rear $ontroladores en AngularJ!Este artculo contiene varias apro2imaciones a controladores creados en AngularJS con diferentes estilos decodificacin que nos aportan diferentes posibilidades!

e momento est "ien de teora# espu)s de aprender qu) son los controladores ! qu) funcionesdesempe8an en Angular, estamos seguros que querrs poner manos en el c(digo ! lo vamos a 'acercon un nuevo e$ercicio que, aun siendo sencillo, nos facilite e;perimentar con un primercontrolador#

Adems, estudiaremos diversas variantes que nos pueden aportar algunas venta$as, inconvenientes! resolver ciertas situaciones# >as veremos todas con e$emplos ! las e;plicaciones so"re qu)diferencias nos encontramos#

l proceso de crear ! usar un controlador es sencillo, pero no inmediato, requiere un peque8ogui(n de tareas que paso a detallar para que tengas claro de antemano lo que vamos a 'acer# sms largo e;presarlo con te;to que con c(digo ! aunque al principio parezca "astante, en seguidalo 'ars mecnicamente ! no tendrs que pensar muc'o para ello# +sicamente para poner nuestro

primer controlador en marc'a necesitamos< Crear un m(dulo Hmodule de AngularJSI Mediante el m)todo controllerHI de nuestro 1module1, asignarle una funci(n constructora

que Angular usar cuando de"a crear nuestro controlador Lsar la directiva ng=controller, asignndole el nom"re de nuestro controlador, en el ?0M>#

Colocaremos esa directiva en el pedazo del EM donde queremos tener acceso al scope#

n este punto queremos aclarar que e;isten diversas alternativas de c(digo para crear el Javascriptnecesario para de6nir nuestro controlador# Vamos a comenzar por una que es mu! 'a"itual de veren diversos tutoriales ! documentaci(n, aunque no es la me$or# 0odas las formas funcionan, pero'a! algunas que en determinadas circunstacias pueden ser me$ores# >uego las estudiaremos !e;plicaremos el motivo por el que seran todava ms recomendadas para crear tus controladores#

Nota:l o"$etivo de este primer controlador es simplemente o"servar cul es el c(digo ! la sinta;is para

http://www.desarrolloweb.com/articulos/controladores-controller-angularjs.htmlhttp://www.desarrolloweb.com/articulos/controladores-controller-angularjs.htmlhttp://www.desarrolloweb.com/articulos/controladores-controller-angularjs.htmlhttp://www.desarrolloweb.com/articulos/controladores-controller-angularjs.html


33/70


crearlos# Dealmente o"servars es un controlador mu! tonto, pero espero me disculpes# +uscaremos ms adelante

e$emplos ms @tiles#

).).1.- GPCI 1Eang#lar 0md#le3r#e'a: GH4 0cntrller3r#e'aCtrl: )#nctin32sce45 2sce0alg = "la ng#lar: #sand cntrller ms simle"4

e esta manera esto! creando un m(dulo llamado 1prue"aApp1# So"re el m(dulo invoco el m)todocontrollerHI ! creo un controlador llamado 1prue"aAppCtrl1# n la creaci(n del controlador versque se especi6ca una funci(n, ella es la que 'ace de constructora de nuestro controlador# A esafunci(n le llega como parmetro scope que es el nom"re de varia"le donde tendrs una referenciaal conodido 1scope1 que almacena los datos de mi modelo#

entro de la funci(n del controlador 'acemos poca cosa# e momento simplemente le asigno unvalor a un atri"uto de scope# ?e creado un atri"uto nuevo en el o"$eto scope que no e;ista ! quese llama 1algo1 Hscope#algoI# Con ello simplemente le esto! agregando un dato al modelo# %raciasal 1"inding1 o enlace, ese dato luego lo podr) utilizar en el ?0M>#

e 'ec'o, queremos !a ec'arle un vistazo al ?0M> que podramos tener para usar este controller#

55alg

Como puedes ver, en el ?0M> indicamos el nom"re del m(dulo que se usar para implementar estaaplicaci(n Hque corresponde con el nom"re del m(dulo creado en el c(digo JavascriptI ! el nom"redel controlador Htam"i)n corresponde con el nom"re del controller que 'e creado con JavascriptI#Adems en el ?0M> podrs encontrar la e;presi(n PPalgoQQ que lo que 'ace es volcar como te;toen la pgina el contenido de la varia"le 1algo1# sa varia"le pertenece al scope ! la 'emosinicializado en el c(digo del controller#

l resultado es que en nuestra pgina aparecer el te;to 1?ola Angular, usando controller1, que esel valor que fue asignado en el atri"uto 1algo1 de scope# e momento la aplicaci(n no es nadaespectacular pero lo interesante es ver c(mo se usa un controller#

).).&.- >AFAI' GPCI 1E

;iste una variante de este mismo e$emplo, al crear el controlador, que de$a nuestro c(digo un pocoms comple$o, pero que a!uda en determinadas circunstancias# >a clave aqu son los

minimi6cadores de Javascript Ho mini6cadoresI, que sa"emos que reducen el peso en "!tes delc(digo compactndolo de distintas maneras# Si los usas, el c(digo que 'emos visto en el anteriorapartado puede dar errores una vez minimi6cado#

l pro"lema qte puede surgir est en la in!ecci(n del scope, que se reci"e como parmetro en lafunci(n constructora del controller#

)#nctin32sce4

Angular, al ver el nom"re del parmetro 1scope1, sa"e perfectamente lo que tiene que in!ectar enese lugar# Sin em"argo, una vez minimi6cado, el nom"re de esa varia"le 1scope1 puede 'a"ersecam"iado por algo como 1a1, lo que 'ara imposi"le que el framework sepa lo que de"e de enviar#so se soluciona con un c(digo como el siguiente#

ang#lar 0md#le3r#e'a: GH4 0cntrller3r#e'aCtrl: G2sce: )#nctin32sce45 2sce0alg = "la ng#lar: #sand cntrller!"



34/70

Manual de AngularJS DesarrolloWeb.com B / 70

H4

n este caso, en la llamada al m)todo que crea el controlador, controllerHI, ves un arra! que nossirve para in!ectar las dependencias#

G2sce: )#nctin32sce45 000 H

n este caso le estamos diciendo que el primer parmetro del controlador es scope, gracias alprimer elemento del arra!# Como las cadenas como scope no se alteran despu)s de laminimizaci(n, podemos estar seguros que le llegarn perfectamente a Angular# ntonces sa"r queen el primer parmetro de la funci(n constructora del controlador esperas reci"ir el scope# stoser as independientemente del nom"re de la varia"le que se uses como primer parmetro#

s cierto que la sinta;is parece un poco re"uscada, pero poco a poco te acostum"rars, puesrealmente es mu! repetitivo#

Nota:sto que aca"amos de e;plicar para el tema de la in!ecci(n de dependencias sirve igual con muc'os otros

elementos que podras necesitar en tus controladores# Esea, puedes in!ectar del mismo modo otras cosas aparte

del scope, como 'ttp, etc# sta variante de la opci(n 4, de"ido al modo de declarar la in!ecci(n de

dependencias, es ms adecuada ! es algo retomaremos tam"i)n en futuras entregas de este manual#

).).).- GPCI &E

?e colocado como primera opci(n porque es ms 'a"itual en tutoriales ! puedes 'a"erla ledo en ladocumentaci(n del framework o en diversas presentaciones por a'# Sin em"argo, es msrecomendada esta segunda alternativa que os presentamos a continuaci(n#

ang#lar 0md#le3r#e'a: GH4 0cntrller3"r#e'aCtrl": )#nctin345 this0alg = "Est )#ncina! racias ng#lar" 4

Como estars o"servando, el controlador es prcticamente igual# A'ora la diferencia es que noests in!ectando el scope# A'ora el conte;to donde ad$untar las varia"les que queremos enviar ala vista no lo sacamos de scope, sino que lo o"tenemos directamente a trav)s de la varia"le 1t'is1#

n este caso, para cargar un nuevo dato al modelo, llamado 1algo1, lo 'acemos a trav)s de t'is#algo! le asignamos aquello que deseemos#

sta alternativa implica alg@n cam"io en el ?0M> con respecto a lo que vimos anteriormente#

556m0alg

l cam"io fundamental lo encuentras al declarar la directiva, en el valor del atri"uto ng=controller#

ng-cntrller="r#e'aCtrl as 6m"

n este caso estamos dici)ndole no solo el nom"re del controlador, sino adems estamosinformando que dentro de ese EM el scope ser conocido con la varia"le 1vm1# 7or tanto, a'oracuando deseemos acceder a datos de ese modelo que nos ofrece el controlador de"emos indicar elnom"re del scope#

556m0alg

Nota:>a recomendaci(n de esta opci(n 2 se "asa en que as puedes tener varios controladores en tu pgina,



35/70

Manual de AngularJS DesarrolloWeb.com C / 70

incluso anidados unos dentro de otros, ! los datos que nos ofrece cada uno estn separados en distintos espacios

de nom"res# sto quizs a'ora no te dice nada, pero s que evita en el futuro 'a"ituales pro"lemticas de

desarrollo con AngularJS#

A'ora que 'emos visto estas dos opciones ! dado que nos recomiendan la segunda, la utilizaremosde manera preferente a lo largo del manual# e momento esto es todo, esperamos que con lo quesa"es !a tengas ideas para ir pro"ando nuevos e$emplos# &osotros en el siguiente artculocrearemos un controlador que ser un poco ms comple$o ! @til#

Aca"amos este artculo con un vdeo de nuestro canal de outu"e donde encontrars msinformaci(n so"re la creaci(n de controladores en AngularJS# Veremos diferentes variantes delc(digo realizadas en directo# 0am"i)n encontrars e;plicaciones ofrecidas por varios compa8erose;pertos en este framework Javascript#


).,.- !egundo e8er$i$io $on $ontroller en AngularJ!)rearemos una aplicacin sencilla con la intencin de practicar con controller en AngularJS, inicialiando datosen el Scope, creando manejadores de eventos, etc!

Vamos a 'acer un e$ercicio prctico de todo lo que venimos aprendiendo con AngularJS ! dondea6anzar particularmente lo aprendido so"re la creaci(n de controladores#

l e$ercicio es mu! sencillo en realidad# s un 1acumulador1 en el que tenemos un campo de te;topara escri"ir una cantidad ! un par de "otones con operaciones de sumar ! restar# >uego tenemosun contador que se va incrementando con esas operaciones de sumas ! restas so"re un total# n sino sirve para muc'o lo que vamos a construir, lo 'acemos ms "ien con 6nes didcticos#

7uedes ver el e$ercicio en marc'a en Codepenantes de pasar a estudiar ! e;plicar el c(digo con elque se 'a 'ec'o#

).,.1.- C@digo HM

Veamos primero la parte del ?0M> usada para resolver este e$ercicio#

c#m#ladr Cntrl de eraci+n/ *C#nt,


36/70


En el ac#m#ladr lle6ams 556m0ttal

Vo! descri"iendo los detalles ms importantes que de"es apreciar#

Al 'acer el "ootstrap HarranqueI de la aplicaci(n Hdirectiva ngAppI se indica el nom"re del

m(dulo< 1acumuladorApp1# Se indica el nom"re del controlador con la directiva ngController ! el valor

1acumuladorAppCtrl1# Con la sinta;is de 1acumuladorAppCtrl as vm1 indicamos que el scope dentro del espacio de

etiquetas marcado para este controlador, se conocer por 1vm1# 7odramos llamar comodesesemos al scope, en lugar 1vm1, en de6nitiva es como una varia"le donde tendremospropiedades ! m)todos# n otras pala"ras, se 'a creado un namespace Hespacio de nom"resIpara los datos que nos vienen del modelo HscopeI gracias al controlador1acumuladorAppCtrl1#

7uedes llamar de cualquier manera tam"i)n tanto a m(dulo como a controlador, pero seusan esos por convenci(n#

l campo /&7L0 de te;to tiene una directiva ngModel para decirle a AngularJS que ese esun dato del modelo# tate que el nom"re del dato en el modelo se accede a trav)s delespacio de nom"res de6nido en el controlador< 1vm#cuanto1#

>uego encuentras dos /&7L0 tipo "utton que me sirven para realizar la acci(n de acumular,positiva o negativamente# Am"os tienen una directiva ngClick que nos sirve para e;presar loque de"e ocurrir con un clic# >o interesante aqu es que llamamos a dos funciones que estnde6nidas en el scope, mediante el espacio de nom"res 1vm1, nuestro modelo# l c(digo deesos m)todos Hfunciones que 'acen en este caso de mane$adores de eventosI 'a sido de6nidoen el controlador, lo veremos ms adelante#

7or @ltimo encontramos un PPvm#totalQQ que es un dato que estar en el scope ! en el quellevamos la cuenta de todo lo que se 'a sumado o restado con el acumulador#

Nota:7or si no te 'as dado cuenta, el espacio de nom"res donde tendremos al scope se 'a nom"rado como

1vm1# a di$imos que se puede usar cualquier nom"re de varial"le, eso es lo de menos, lo que queremos que se

note es que 1vm1 son las siglas de 1View Model1, osea, el 1modelo de la vista1# s algo que tiene que ver con el

paradigma MVC en la variante en la que tra"a$amos con Angular# ?a"laremos de eso ms adelante#

).,.&.- C@digo Javas$ri#t

A'ora pasemos a la parte donde codi6camos nuestro Javascript para darle vida a este e$ercicio#

ang#lar 0md#le3ac#m#ladr: GH4 0cntrller3"ac#m#ladrCtrl": cntrladrPrincial4

)#nctin cntrladrPrincial345 &&esta )#nci+n es mi cntrladr 6ar sce = this sce0ttal = sce0c#ant =

sce0s#mar = )#nctin345 sce0ttal ;= arseKnt3sce0c#ant4 sce0restar = )#nctin345 sce0ttal -= arseKnt3sce0c#ant4

Vamos descri"iendo las principales partes del c(digo#



37/70


Con 1angular1 en la primera lnea accedo a la varia"le que me crea angular, disponi"le paraacceder a las funcionalidades del framework#

n la segunda lnea creamos el m(dulo, indicando el nom"re Hque es igual a lo que se pusocomo valor en la directiva ngApp del ?0M>I ! el arra! de las dependencias, de momentovaco#

n la tercera lnea, con un encadenamiento Hc'ainingI de6nimos el controlador# /ndicamoscomo primer parmetro el nom"re del controlador, de6nido en la directiva ngController del?0M>, ! como segundo parmetro colocamos la funci(n que se encargar de construir elcontrolador# /ndicamos el nom"re de la funci(n simplemente, sin los par)ntesis, pues no esuna llamada a la funci(n sino simplemente su nom"re#

>uego se de6ne la funci(n del controlador# sa funci(n es capaz de escri"ir datos en elscope, as como m)todos#

n la funci(n accedemos al scope por medio de 1t'is1# $ate que en la primera lnea de lafunci(n tienes var scope N t'isY esto es simplemente opcional ! se puede 'acer paramantener la terminologa de AngularJS de llamar scope a lo que vas generando en elcontrolador, pero podra perfectamente referirme a )l todo el tiempo con 1t'is1#

n el scope inicializo dos valores, total ! cuanto, mediante scope#totalN3 ! scope#cuantoN3# >uego genero dos m)todos que usaremos para los mane$adores de eventos de los "otones de

sumar ! restar# sas funciones tienen el scope disponi"le tam"i)n ! en su c(digo se accede !modi6ca a los datos del scope#

Nota:0am"i)n 'a! varias apro;imaciones para de6nir este Javascript con los modulos ! controladores de

Angular# s recomenda"le la creaci(n de una envoltura para tu Javascript, por medio de una funci(n que se

autoinvoca# sto lo veremos ms adelante, puesto que no queremos complicar ms el c(digo todava#

Con eso tenemos el e$ercicio completo, todo lo dems para que esto funcione es tarea de AngularJS#e manera declarativa en el ?0M> 'emos dic'o qu) son las cosas con las que se va a tra"a$ar en laaplicaci(n ! luego 'emos terminado de de6nir e inicializar los datos en el controlador, as comoescri"ir en c(digo las funcionalidades necesarias para que el e$ercicio tome vida#

).,.).- >ariante de este mismo e8er$i$io #ero sin =$ontroller as=

n la resoluci(n, que 'emos comentado antes, a este e$ercicio 'emos usado una alternativa de ladirectiva de ngController en la que se le asigna un espacio de nom"res al scope1acumuladorAppCtrl as vm1# sto se conoce 'a"itualmente como 1controller as1 ! !a comentamosen el artculo anterior dedicado a los controladores que es algo relativamente nuevo ! que muc'asveces la codi6caci(n que encontrars en otros te;tos es un poco diferente#

Solo a modo de gua para quien est acostum"rado a tra"a$ar de otra manera, ! para que entiendasotros c(digos antiguos que podrs encontrar en otras guas de Angular, pongo aqu el c(digo deeste mismo e$ercicio pero sin el 1controller as1#

'l cdigo HTML c#m#ladr Cntrl de eraci+n/ *C#nt,


38/70


&&esta )#nci+n es mi cntrladr &&6ar 2sce = this 2sce0ttal = 2sce0c#ant = 2sce0s#mar = )#nctin345

2sce0ttal ;= arseKnt32sce0c#ant4 2sce0restar = )#nctin345 2sce0ttal -= arseKnt32sce0c#ant4 H4

&o comento el c(digo ms, pues es mu! parecido al anterior, simplemente se de$a de usar elespacio de nom"res ! al de6nir la funci(n del controlador se in!ecta el scope de otra manera# 0ede$o a ti la tarea de encontrar todas las diferencias#


Parte &:

'(plorando directivas

a )ondo*ara traba6ar con AngularJS necesitamos dominar una serie de directi$as +ue se

encuentran resentes en el nGcleo del ,rame(or9% adem@s de ao&arnos en otras

directi$as creadas or la comunidad. Fas directi$as enri+uecen nuestro 2MF & nos

ermiten realizar oeraciones Gtiles sobre la @gina. Ahora e#loraremos algunas

directi$as ,undamentales con ma&or detalle.

,.1.- a idea es poder de6nir el aspecto de nuestra aplicaci(n en "ase a los datos que tengamos en elmodelo, aplicando unas class de CSS u otras dependiendo de valores de propiedades del scope o dee;presiones que podamos construir#



39/70


;isten tres posi"les variantes de tipos que acepta la directiva ngClass ! que podemos usar siempreque deseemos#

Asignarle una propiedad del scope que sea una cadena de te;to# n este caso esa cadena secoloca como valor en el atri"uto class# Si en esa cadena e;isten varios nom"res de clasesseparados por un espacio en "lanco, esas clases se aplicarn en con$unto al elemento#

Asignarle una propiedad del scope que contenga un arra! de cadenas# n ese caso seasignan como clases todos los nom"res que 'a!a en las casillas del arra!#

Asignarle como valor a ng=class un o"$eto# n ese caso tendr pares clave valor paraespeci6car nom"res de clases ! e;presiones que de"an cumplirse para que )stas seapliquen# >o veremos me$or con un e$emplo#

A'ora veremos e$emplos de cada una de las tres posi"ilidades comentadas#

,.1.1.- '8em#lo 1E Asignar una #ro#iedad del s$o#e que $ontiene una $adena

s tan sencillo como indicar esa propiedad dentro del atri"uto ng=class, como se ve a continuaci(n#

c#m#ladr

Pe1#e ran

Como puedes ver, tenemos un enca"ezado ?4 con ng=class asignado a vm#tam0itular# sapropiedad del scope se cre( a partir de un campo S>C0 que est a continuaci(n# 7or tanto,cuando cam"ie el option seleccionado en el campo, cam"iar la class asociada al elemento ?4#

0al como 'a"rs deducido, las dos posi"les class que se le van a asignar al enca"ezado sern losvalue de los E70/E

,.1.&.- '8em#lo &E Asignar un arra( de $adenass tan sencillo como de6nir un arra! de alguna manera ! luego introducirlo dentro de nuestradirectiva# 7or facilitar las cosas vo! a de6nir el arra! de manera literal en el controlador#

6m0clases = G"#n": "ds": "tres"H

>uego podremos asociar ese arra! de cadenas, colocando todos los nom"res de clases a unelemento de la pgina con la directiva ngClass#

Cntrl de eraci+n/

Como resultado de esa directiva a nuestro enca"ezado ?2 se le van a aplicar las tres clases 1uno1,1dos1 ! 1tres1#



40/70

Manual de AngularJS DesarrolloWeb.com B0 / 70

,.1.).- '8em#lo )E Asignar un ob8eto $on uno o varios #ares $lave5 valor

ste es el uso ms comple$o de ngClass, pero tam"i)n el ms potente# &os permite de6nire;presiones ! gracias a ellas Angular sa"r si de"e colocar o no una clase CSS en concreto# Se ve"ien con un e$emplo delante#

En el ac#m#ladr lle6ams 556m0ttal

ste prrafo nos muestra un valor total de una cuenta# se valor lo sacamos de la propiedadvm#total ! esa misma propiedad es la que usamos para de6nir la clase de CSS que vamos a asociarcomo estilo al prrafo#

A'ora ec'a un vistazo al atri"uto ng=class ! vers que lo que le indicamos es un o"$eto, pues estentre llaves# se o"$eto tiene un n@mero de pares clave.valor indeterminado, puede ser uno ovarios# Cada uno de esos pares clave.valor nos sirven para de6nir si de"e o no aplicarse una claseen concreto#

n la clave colocas el nom"re de la clase, class de tu CSS, que Angular puede colocar si se cumple

una e;presi(n "oleana# Como valor colocamos la e;presi(n "oleana a evaluar por AngularJS paraque el sistema deduzca si se de"e aplicar esa clase o no#

n nuestro e$emplo se aplicar la clase 1positivo1 en caso que la propiedad vm#total sea ma!or oigual que cero# Se aplicar la clase 1negativo1 en caso que la propiedad vm#total tenga un valormenor que cero#

,.1.,.- '8er$i$io englobando estos tres usos de ngClass

+ien, con esto !a sa"es todo lo que necesitas para poder tra"a$ar con tus ngClass# A continuaci(nencuentras un e$ercicio en el que simplemente se usan estos mismos e$emplos relatados 'astaa'ora# Si lo 'as entendido no tendrs pro"lema alguno al ver el c(digo siguiente#

Nota:7ara la realizaci(n de este c(digo 'emos partido como "ase del e$emplo relatado en el artculo Segundo

e$ercicio con controller en AngularJS# n realidad solo 'emos agregado los tres posi"les usos de la directiva

ngClass e;plicados en este artculo#

>o vemos por partes# 7rimero el c(digo ?0M>uego, cuando cam"ias el estado de los c'eck"o;es !a se empiezaa ver el estado de los elementos# sta situaci(n podra cam"iar solo con inicializar esas propiedadesen el controlador# >o 'emos colocado en el c(digo comentado para que se vea "ien#

l otro detalle que igual no salta a la vista es la llamada a la funci(n del modelo vm#avisarHI,colocada en el ng=c'ange del primer c'eck"o;, que no se llama cuando se cam"ia el estado delcampo como consecuencia del Javascript# emostrar eso es el motivo de la e;istencia del "ot(n#

?a! in6nidad de prcticas con c'eck"o;es# Con lo que 'as visto aqu seguramente sepasdesempe8ar cualquier situaci(n#


,.).- iltrar5 ordenar ( otras variables embutidas en la dire$tivangFe#eat%sos m$s detallados de la directiva ng6epeat para filtrar, ordenar los elementos " acceder a variablesembutidas que nos dan informacin sobre las repeticiones!

>a directiva ngDepeat de AngularJS es una de esas cosas que llaman la atenci(n, por la sencillez !rapidez con la que se puede implementar un "ucle que nos repite una plantilla ?0M>, pero so"retodo por su potencia#

>a directiva !a la 'emos usado en diversos e$emplos anteriormente, incluso tenemos un artculoanterior donde se introdu$eron algunos detalles "sicos de ng=repeatpara empezar a usarla# A'oraqueremos profundizar un poco ms en otros usos que resultarn mu! @tiles para cualquier tipo deaplicaci(n we"#

n la documentaci(n de la directiva ngDepeatencuentras muc'os datos @tiles, aqui te vamos aresumir algunos ! vamos a realizar un e$emplo que lo ponga todo en prctica#

,.).1.- !inta6is ngFe#eat

&os tenemos que familiarizar primero con la sinta;is usada para especi6car el comportamiento del"ucle en ngDepeat# Aunque !a lo 'emos visto en cantidad de e$emplos, c

Manual AngularJS

Documents

Transcript of Manual AngularJS