Comenzando con AngularJS

Es un momento grandioso para ser un developer de JavaScript. Los frameworks modernos de

JavaScript como Backbone, Knockout, AngularJs y demas, an llevado aun nivel de madure! y
sofisticaci"n la creaci"n de aplicaciones web enri#uecidas basadas en $%&L #ue ab'an sido muy
solicitadas. Estos frameworks tienen un ob(etivo en com)n* acer simple para los desarrolladores la
construcci"n de aplicaciones robustas con $%&L, +SS y JavaScript.
Este tutorial e,plora el framework AngularJs de -oogle. +omen!aremos describiendo la filosofia de
dise.o usada en este framework y despues desarrollaremos una simple pero no trivial aplicaci"n para
demostrar los fundamentos de AngularJs as' como sus caracteristicas principales incluidas data binding,
dependency in(ection, loosely
coupled code y conciseness.
Nota: /uedes seguir el tutorial usando los links de /lunker. /lunker es una erramienta de generaci"n
de prototipos para $%&L, +SS y JavaScript. Si prefieres editar tus arcivos localmente puedes
descargar el arcivo !ip con el c"digo -ettingStarted0itAngularJS.!ip
La filosofia de AngularJS
La filosofia de AngularJS esta basada en me(orar y e,tender $%&L entendiendo las necesidades tanto
de los nuevos como de los ya e,perimentados desarrolladores.
HTML mejorado
$%&L es muy bueno para describir documentos estaticos, pero se #ueda corto cuando se trata de
describir las 1vistas2 de una aplicaci"n web enri#uecida pues no es algo para lo cual aya sido dise.ado
$%&L. La mayor'a de los frameworks de JavaScript abstraen esta limitaci"n separando la descripci"n
de las vistas del $%&L o usan arcivos bastante largos de JavaScript para manipular el 34&
53ocument 4b(ect &odel6. AngularJs toma esto desde una perspectiva diferente. En lugar de ocultar el
$%&L y el +SS, toma sus fortale!as y las e,tiende volviendolas adecuadas para la descripci"n de
vistas din7micas. El resultado es un flu(o de traba(o #ue resulta bastante familiar para cual#uier
desarrollador web y con un estilo de programaci"n de JavaScript sorprendentemente conciso, claro y
enfocado.
Simple pero escalable
4tra caracter'stica #ue distingue a AngularJs es #ue es de f7cil comprensi"n para los #ue comien!an a
usarlo pues ofrece caracteristicas sofiticadas para desarrolladores con necesidades comple(as. 4tros
frameworks se enfocan en la simplicidad sin proveer muca asistencia para crear aplicaciones
comple(as u ofrecen caracteristicas sofisticadas #ue re#uieren mucas plantillas de c"digo y mover
mucas partes de ellas incluso para aplicaciones simples.
Los bloques de AngularJs
El c"digo de aplicaciones creadas con AngularJs siempre esta organi!ado Modelos, Vistas,
Controladores y 5opcionalmente6 Servicios.
Los Modelos son ob(etos #eu representan los datos a los cuales puede acceder la aplicaci"n. Los
&odelos tambi8n son usados para representar el estado actual de la aplicaci"n.
Los Controladores definen el comportamiento actual de la aplicaci"n 5tamb'en conocido como 1la
l"gica de la aplicaci"n26 y (uega un rol clave conectando los modelos con las vistas.
Los Sericios son ob(etos especiali!ados #ue reali!an el traba(o en nombre de otros ob(etos. Los
servicios tienen varios usos, desde traer datos remotos asta proveer e implementar alg)n algoritmo. Se
busca #ue los Servicios sean altamente reusables y son dise.ados para ser intercambiados facilmente
por otros servicios similares.
$asta este punto toda este panorama de la filosof'a y ar#uitectura parecera probablemente muy
abastracto, pero aora #ue ya conoces un poco mas de la teor'a estas listo para entrar a la pr7ctica y
construir una aplicaci"n.
Constru!endo una app
9amos a desarrollar una aplicaci"n #ue bus#ue fotograf'as con AngularJS. /odr7s ver la aplicaci"n
final a#ui. /ara probar la aplicaci"n escribe alguna palabra en el cuadro de bus#ueda en la es#uina
superior i!#uierda y pulsa el bot"n 1:ind2. /odr7s elegir entre miniaturas pe#ue.as o grandes aciendo
click en los botones de la es#uina superior dereca.
+onforme vayas avan!ando iras descubriendo links acia /lunk o 1plunks2 5c"digo en linea editable6
#ue podr7s usar en cada paso. /ara continuar visita el url de /lunk y da click en el bot"n 1:ork2 para
crear tu copia y traba(ar dede ella.
El primer paso es algo a lo #ue ya deberias de estar muy acostumbrado* ma#uetar tu aplicaci"n usando
$%&L y +SS. %oma un momento para revisar el $%&L seleccionado Source +ode ; inde,.tml
5/uedes ver este plunk a#u'6.
Agregando AngularJS
<a con la estructura b7sica ma#uetada es momento de configurar AngularJs
=.> Abre el plunk /oto App y a! click en :ork para usarlo como base.%ambi8n puedes descargar los
arcivos y traba(ar localmente.
?.> Agrega la siguiente eti#ueta al final de la p7gina (usto antes de la eti#ueta de cierre </body>
<script
src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js">
</script>
@ecesitaras indicarle al framework #ue trate la p7gina como una aplicaci"n AngularJs
A.> Agrega la directiva ng>app a la eti#ueta de <body> de la siguiente forma*
<body ng-app>
Las directivas son la manera en como AngularJS extiende el HTML
para hacerlo un leguaje de plantillas ms adecuado para interfaces
de usaurios enriquecidas. Aprenderas sore la variedad de
direcativas conforme va!as avan"ando.
"ntroducci#n a data binding
El data inding es una de las caracteristicas ms poderosas de
AngularJs. #ata inding es una elegante soluci$n para una de las
tareas mas complejas de construir una aplicaci$n %e enriquecida&
mantener multiples datos en sincronia. 'sta aplicaci$n hace un
fuerte uso del data inding. (ntegremos data inding con los
siguientes pasos para mejorar la interfa" del usuario.
=.> Bbica el elemento de formulario searc>field*
<form class="searc-field">
<input type="text">
<input type="submit" !alue=""ind">
<span class="searc-message">potos of #ater</span>
</form>
?.> Agrega la directiva ng>modelC2searcKeyword2 al te,tinput*
<input type="text" ng-model="searc$ey#ord">
La directiva ng>model le dira a AngularJS #ue #uieres ligar el valor del campo de te,to a una variable
del modelo llamada searcKeyword. +on esta ligadura, siempre #ue el usuario edite el campo de te,to,
la variable searcKeyword ser7 actuali!ada automaticamente.
A.> Deempla!a el te,to 1potos of water2 por 1potos of EEsearcKeywordFF2*
<span class="searc-message">potos of %%searc$ey#ord&&</span>
La notaci"n de las dobles llaves es otra forma de declarar el data binding. La e,presi"n dentro de las
llaves ser7 evaluada y actuali!ada cada ve! #ue el valor en dica e,presi"n cambie.
La versi"n actuali!ada de la aplicaci"n puedes verla a#u'. Escribe alg)n te,to en el campo de te,to para
ver esta me(ora en acci"n.
la siguiente me(ora usar7 data binding para reempla!ar la lista actual de imagenes #ue estan en c"digo
duro 51ardcodeadas26 en el $%&L. /rimero necesitaremos crear un controlador.
"ntroducci#n a los Controladores
+omo abr7s notado anteriormente, los controladores (uegan un rol clave ligando ob(etos en la
aplicaci"n. Las mayoria de las aplicaciones del mundo real pueden tener mucos controladores,
incluyendo un controlador para cada pantalla de la aplicaci"n e inclusive controladores para cada
componente de la interfa! de usuario. La aplicaci"n en la #ue estamos traba(ando solo necesita un solo
controlador. Lo llamaremos 1&ain+ontroller2.
Nota* Si lo prefieres, puedes continuar editando el proyecto en el #ue estas traba(ando o puedes abrir el
plunk /oto App G Step = y acer click en 1:ork2 para usarlo como base para continuar.
=.> +rea un nuevo arcivo de JavaScript con el nombre &ain+ontroller.(s 5/ara crear el arcivo en
/lunk, a! click en H@ew en la secci"n :iles en la es#uina superior i!#uierda.6
Nota: +rear arcivos separados .(s no es un re#uerimiento de AngularJS, pero es una buena pr7ctica y
t8cnica para administrar nuestro c"digo, principalmente cuando traba(amos en e#uipo con otros
desarrolladores.
?.> Agrega el siguiente c"digo al arcivo #ue acabas de crear*
function 'ain(ontroller)*scope+ %
,use strict,-
*scope.potos = .
% title/ ,0oto 1,1 tumb2rl/
,//googledri!e.com/ost/0345'6j789u:'7;<#cm<;=>?@dms/images/mountains
1.jpg,&1
% title/ ,0oto A,1 tumb2rl/
,//googledri!e.com/ost/0345'6j789u:'7;<#cm<;=>?@dms/images/mountains
A.jpg,&1
% title/ ,0oto 9,1 tumb2rl/
,//googledri!e.com/ost/0345'6j789u:'7;<#cm<;=>?@dms/images/mountains
9.jpg,&
B-
&
Los controladores en AngularJS son declarados en el constructor como se muestra en el c"digo anterior.
Bna de las responsabilidades del controlador en AngularJS es configurar cual#uier modelo para #ue el
controlador de la vista asociada pueda tener acceso. El ob(eto del modelo puede ser cual#uier tipo de
ob(eto de JavaScript, desde una simple cadena de te,to o un n)mero asta un ob(eto comple(o
personali!ado. El c"digo #ue agregamos define el modelo potos, el cual es un arreglo de ob(etos
#ue describe cada foto a mostrar.
Seguramente estar7s preguntandote cual es la istoria detras del argumento *scope. IJu8 esK, Ide
donde vieneK *scope es un ob(eto especial #ue se pasa a la funci"n del controlador por AngularJS.
Sirve de puente entre el controlador y la vista y es uno de los mas importantes tipos de ob(etos #ue se
usan en AngularJS. +ual#uier propiedad #ue agregues a Lscope se podr7 acceder directamente a ella
desde la vista, naturalmente es el lugar perfecto para alamacenra las referencias a tu modelo5como se
ace en el c"digo anterior con potos6.
%ienes aora dos pe#ue.os cambios #ue reali!ar antes de tomar venta(a del nuevo modelo. /rimero
abr7 #ue ligar el arcivo &ain+ontroller.(s a la p7gina inde,.tml
A.> Agrega la eti#ueta <script src="'ain(ontroller.js"> (usto deba(o de la referencia a
angular.(s
<script
src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js">
</script>
<script src="'ain(ontroller.js"></script>
:inalmente necesitas indicarle a AngularJS #ue parte de la vista esta asociada a &ain+ontroller. 3ado
#ue esta aplicaci"n solo tiene un controlador, podremos asociar la eti#ueta <di!> principal con el
&ain+ontrolles usando la directiva ng-controller.
M.> Agrega ngcontroller="'ain(ontroller" a la eti#ueta <di!> en la linea =A*
<di! ng-controller="'ain(ontroller">
Aora cada elemento $%&L dentro de la eti#ueta <di!> tiene acceso directo al modelo de fotos.
Aora sacaremos proveco en la siguiente me(ora.
$eclarando elementos repetidos del %"
Aora reemplacemos los tres elementos de la lista*
=.> En inde,.tml, elimina los elementos <li> e,cepto el primero*
<li>
<img
src="ttp///googledri!e.com/ost/0345'6j789u:'7;<#cm<;=>?@dms/images/
ocean1.jpg"/>
<p class="title">0oto Citle</p>
</li>
?.> $agamos los siguientes cambios al c"digo anterior*
<li ng-repeat="poto in potos">
<img ng-src="%%poto.tumb2rl&&"/>
<p class="title">%%poto.title&&</p>
</li>
Este c"digo usa la directiva ng-repeat para indicarle a AngularJS #ue genere un <li> por cada
ob(eto en el modelo potos. +ada <li> usa la misma notaci"n de data binding vista anteriormente
para ligar las propiedades tumb2rl y title a cada ob(eto de poto. /odras notas como se cambia
el atributo src de la eti#ueta <img> por la directiva ng>src puesto #ue es necesario para poder usar el
valor del data binding como valor para el atributo de la eti#ueta.
La versi"n actuali!ada de la aplicaci"n puedes visuali!arla a#ui. /odr7s darte cuenta #ue el resultado de
la lista es aora una representaci"n din7mica del modelo potos.
Aora #ue la relaci"n entre la vista el modelo potos esta establecida ya se podemos agregar
comportamiento a la aplicaci"n.
$efiniendo el comportamiento
/ara acer accesible los modelos acia las vistas, el otro rol clave de un controlador es definir la logica
de nuestra aplicaci"n rapidamente. Bn controlador puede lograr esto implementando una interfa! de
JavaScript #ue la vista pueda llamar a traves de ciertas acciones de la aplicaci"n. Este concepto se
illustra implementando los botones 1Small2 y 1Large2 #ue cambian de tama.o las fotos.
Nota* /odr7s continuar editando tu proyecto o abrir el plunk /oto App G Step ? y acer click en
1:ork2 para usarlo de base y poder continuar.
@ecesitaras una forma de dar seguimiento a las acciones #ue eli(a el usuario sobre ver grandes o
pe#ue.as las fotos. Esto suena a un traba(o del modelo.
=.> Agrega la siguiente linea de c"digo a &ain+ontroller.(s (usto despues de la declaraci"n del modelo
potos para establecer el modelo tumbSi!e*
*scope.tumb7i4e = ,small,-
<a mencione #ue el controlador debe proveer una interfa! JavaScript #ue la vista pueda invocar. El
forma de acer esto es usando nuevamente el ob(eto *scope como puente. +ual#uier funci"n #ue se
declare dentro del ob(eto *scope podr7 ser llamada directamente desde la vista.
?.> 3aba(o de *scope.tumb7i4e = ,small,D agrega una funci"n al controlador para
gestionar el tama.o de las fotos*
*scope.setCumb7i4e = function)si4e+ %
*scope.tumb7i4e = si4e-
&-
A.> Degresa a inde,.tml
Bno de los roles de las vistas es convertir las interacciones del usuario en acciones de la aplicaci"n.
/ara esta app convertiremos la interacci"n de pulsar el bot"n para cambiar de tama.o las imagenes en
una acci"n llamada setCumb7i4e)+.
M.> /ara lograrlo, agrega la directiva bg-clicE a cada bot"n.
<di! class="si4e-controls btn-group">
<button ng-clicE="setCumb7i4e),small,+">7mall</button>
<button ng-clicE="setCumb7i4e),large,+">Farge</button>
</di!>
N.> /uedes desabilitar el bot"n correspondiente al tama.o de la imagen con la directiva
ng-disabled y un binding.
<di! class="si4e-controls btn-group">
<button ng-disabled="tumb7i4e == ,small,"
ng-clicE="setCumb7i4e),small,+">7mall</button>
<button ng-disabled="tumb7i4e == ,large,"
ng-clicE="setCumb7i4e),large,+">Farge</button>
</di!>
Aora pulsa los botones de 1Small2 y 1Large2 y veras como desbilitan de manera adecuada. Aora
necesitaras modificar las fotos acorde al bot"n seleccionado.5@ota* para e(ecutar el c"digo con /lunker,
a! click en el icono con el o(o ubicado en la barra de erramientas, el cual mostrar7 el preview panel
con el resultado final6.
En la vista, el tama.o de la miniatura se establece aplicando el estilo 1small>tumbs2 o 1large>tumbs2
a 1results>list2. Estas clases fueron definidas previamente en el arcivo poto>app.css.
Se pueden aplicar clases din7micamente con AngularJS usando la directiva 1ngclass2
O.> En el elemento <ul>, cambia PclassC2results>list small>tumbs2P por PclassC2results>list2
ng>classC2tumbSi!e H P>tumbsQ2P*
<ul class="results-list" ng-class="tumb7i4e G ,-tumbs,">
<li ng-repeat="poto in potos">
<img ng-src="%%poto.tumb2rl&&"/>
<p class="title">%%poto.title&&</p>
</li>
</ul>
+on esa modificaci"n final el comportamiento de selecci"n de tama.o de la miniatura est7 completo.
/uedes verlo en acci"n en la versi"n actuali!ada a#u'6.
Aora est7s listo para la )ltima pero m7s importante caracter'stica de tu aplicaci"n, el comportamiento
de la bus#ueda de fotos.
"ntroducci#n a Sericios
En AngularJS, los servicios son ob(etos espoeciales #ue registras con el framework para poder ser
llamados por otros ob(etos, usualmente controladores, para reali!ar ciertas funciones. 3eber7s
encapsular la l"gica de la b)s#ueda de fotos de la aplicaci"n en un ob(eto de servicio llamado
1potoSearc2. /ero antes de poder acer eso, necesitas establecer un m#dulo a la aplicaci"n.
En la comunidad de (avascript, el significado del t8rmino m"dulo var'a dependiendo del conte,to en el
#ue se able de el. En AngularJS el t8rmino m"dulo se refiere al mecan'smo espec'fico para agrupar y
configurar ob(etos en tu aplicaci"n. Esto incluye a los ob(etos de servicio, as' #ue para crear el servicio
1potoSearc2 debes comen!ar declarando un m"dulo de alto nivel para la aplicaci"n y llamarlo
potoApp.
Nota* /uedes abrir /oto App G Step A plunk y dar click en :ork para usarlo como tu punto de inicio, o
simplemente seguir editando los arcivos de la secci"n anterior.
=.> +rea un nuevo arcivo llamado potoApp.(s
?.> Agrega el siguiente c"digo a el*
angular.module)"poto8pp"1 .B+D
Sencillo I@oK 3e eco, debes estar pregunt7ndote por #u8 est7 en su propio arcivo .(s. En la mayor'a
de aplicaciones reales, el m"dulo de alto nivel re#uerir7 de una configuraci"n m7s comple(a,
incluyendo la declaraci"n de rutas 5BDLs #ue mapean a estados o vistas6 y parametros de BDL #ue tu
aplicaci"n acepte. /or esto, es )til separar la definici"n del m"dulo en su propio arcivo .(s para tener
claro su rol como configuraci"n.
A.>/ara usar el nuevo m"dulo necesitas acer ? pe#ue.os cambios al inde,.tml. /rimero, a.ade una
nueva eti#ueta <script> para cargar el nuevo arcivo potoApp.(s*
<script
src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js">
</script>
<script src="'ain(ontroller.js"></script>
<script src="poto8pp.js"></script>
M.> Aora, debes indicarle a AngularJS c"mo debe de tratar 1potoApp2 como el m"dulo de alto nivelR
modificando la directiva ng>app como se indica a continuaci"n*
<body ng-app="poto8pp">
N.> +on el m"dulo en su lugar, aora puedes definir el servicio 1potoSearc2. +rea un nuevo arcivo
llamado potoSearcService.(s.
Antes de a.adir el c"digo completo, observa el es#ueleto de sus caracter'sticas clave para ver como
funcionan los servicios.
angular.module),poto8pp,+.factory),poto7earc7er!ice,1 function)+ %
!ar ser!ice = %&D
/HH
Iparam Eey#ord - Ce Eey#ord to searc for.
Iparam callbacE - 8 function to call #en te searc is complete.
Ce function #ill be passed a single argument #ic is an array of
poto items matcing te Eey#ord.
H/
ser!ice.find0otos = function)Eey#ord1 callbacE+ %
...
&D
return serviceR
F6R
/rimero, el c"digo obtiene la referencia al m"dulo de alto nivel de la aplicaci"n usando
1angular.module5PpotoAppQ62. 3espu8s, registra el servicio llamando al m8todo 1factory52 en ese
m"dulo. El primer par7metro es el nombre #ue #uieres darle al servicio. El segundo par7metro es una
funci"n factory. 1:actory2 es solo una eti#ueta #ue se le da a cual#uier funci"n #ue regresa una nueva
instancia de un ob(eto. En este caso, se espera #ue la funci"n factory regrese un nuevo ob(eto #ue pueda
ser usado como una instancia de 1potoSearcService2. /uedes ver #ue 1potoSearcService2 consta
de un solo m8todo llamado 1find/otos562, #ue busca fotos basado en una palabra clave y e(ecuta una
funci"n de callback pasando con ella los resultados.
Es importante aprender el patr"n general mostrado arriba para escribir un servicio y registrarlo con tu
aplicaci"n. Los detalles de implementaci"n reales del m8todo 1find/otos562, #ue est7n a punto de ver,
no son importantes. Es mas, no es nada pr7ctica la implementaci"n #ue usa resultados predefinidos y
)nicamente sosporta dos t8rminos de b)s#ueda 1water2 y 1monta.as2. Se plantea esta implementaci"n
por#ue es simple y funciona lo suficientemente bien para producir una aplicaci"n completa y funcional,
lo cual es el ob(etivo de este art'culo.
O.> A.ade el siguiente c"digo al arcivo potoSearcService.(s*
angular.module),poto8pp,+.factory),poto7earc7er!ice,1 function)+ %
Puse strictQR
var service C EFR
STT
Uparam keyword G %e keyword to searc for.
Uparam callback G A function to call wen te searc is complete. %e function
will be passed a single argument wic is an array of poto items matcing te
keyword.
TS
service.find/otos C function5keyword, callback6 E
SS :or simplicity weQre ard coding te results for te
SS two supported searc terms, 1water2 and 1mountains2.
var matces C VWR
if 5keyword.toLower+ase56 CCC PwaterQ6 E
matces C V
E
title* XA /erfect &orningX,
tumbBrl* Xttp*SSgoogledrive.comSostSYB!O&Z(SAAuN&S3@wcm@3<094dmsSimagesSwater=.(pgX
F,
E
title* X:ootprintsX,
tumbBrl* X ttp*SSgoogledrive.comSostSYB!O&Z(SAAuN&S3@wcm@3<094dmsSimagesSwater?.(pgX
F,
E
title* XDus 5ZZ6X,
tumbBrl* Xttp*SSgoogledrive.comSostSYB!O&Z(SAAuN&S3@wcm@3<094dmsSimagesSwaterA.(pgX
F,
E
title* XEl &atador State BeacX,
tumbBrl* Xttp*SSgoogledrive.comSostSYB!O&Z(SAAuN&S3@wcm@3<094dmsSimagesSwaterM.(pgX
F,
E
title* XEl &atador State BeacX,
tumbBrl* Xttp*SSgoogledrive.comSostSYB!O&Z(SAAuN&S3@wcm@3<094dmsSimagesSwaterN.(pgX
F,
E
title* XBig SurX,
tumbBrl* Xttp*SSgoogledrive.comSostSYB!O&Z(SAAuN&S3@wcm@3<094dmsSimagesSwaterO.(pgX
FWR
F else if 5keyword.toLower+ase56 CCC PmountainsQ6 E
matces C V
E
title* X3ifficult DoadsX,
tumbBrl*
Xttp*SSgoogledrive.comSostSYB!O&Z(SAAuN&S3@wcm@3<094dmsSimagesSmountains=.(pgX
F,
E
title* XKlondike $igway > &ountainX,
tumbBrl*
Xttp*SSgoogledrive.comSostSYB!O&Z(SAAuN&S3@wcm@3<094dmsSimagesSmountains?.(pgX
F,
E
title* X&ount 4ssa and +atedral &ountainX,
tumbBrl*
Xttp*SSgoogledrive.comSostSYB!O&Z(SAAuN&S3@wcm@3<094dmsSimagesSmountainsA.(pgX
F,
E
title* X$eading 3own te &ountainX,
tumbBrl*
Xttp*SSgoogledrive.comSostSYB!O&Z(SAAuN&S3@wcm@3<094dmsSimagesSmountainsM.(pgX
F,
E
title* XStone BridgeX,
tumbBrl*
Xttp*SSgoogledrive.comSostSYB!O&Z(SAAuN&S3@wcm@3<094dmsSimagesSmountainsN.(pgX
F
WR
F
callback5matces6R
FR
return serviceR
F6R
[.> Agrega este script al 'ndice*
<script
src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js">
</script>
<script src="'ain(ontroller.js"></script>
<script src="poto8pp.js"></script>
<script src="poto7earc7er!ice.js"></script>
Aora #ue la configuraci"n b7sica de 1potoSearcService2 est7 terminada, necesitas una forma de #ue
&ain+ontroller aprovece este servicio. /ara lo cual puedes utili!ar in!ecci#n de dependencias.
"ntroducci#n a in!ecci#n de dependencias
+uando un ob(eto necesita llamar a otro para #ue realice su traba(o, se dice #ue el primer ob(eto es
dependiente al segundo.
Las dependencias\ob(etos colaborando con otros\son las #ue acen posibles las aplicaciones
modernas y comple(as. /ero tambi8n la dependencia presenta un reto. /uedes adaptar la dependencia
entre dos ob(etos incluyendo una referencia escrita de. primer al segundo ob(eto, pero eso resulta en
c"digo no escalable. Esto es malo por varias ra!ones. $ace los ob(etos y funciones muy dif'ciles de
probar de manera aislada. $ace el c"digo fr7gil y resistente al cambio. Limita tu abilidad para
reutili!ar ob(etos o cambiarlos en implementaciones alternativas. La lista sigue y sigue.
El patr"n de dise.o de in!ecci#n de dependencias surgi" para encarar este reto, y el soporte de
nyecci"n de dependencias de AngularJS es una de sus principales caracter'sticas. +omo ver7s,
inyecci"n de dependencias es un t8rmino e,travangante para una t8cnica sencilla. En el caso de un
controlador, la forma de evadir dependencias de c"digo est7tico al pedir a AngularJS #ue provea las
dependencias del controlador como par7metros al constructos de este. /uedes reali!ar esto simplemente
especificando nombres de par7metros #ue AngularJS pueda reconocer.
An#ue probablemente no lo ayas notado, arriba te beneficiaste de la inyecci"n de dependencias en
&ain+ontroller. Su referencia al ob(eto Lscope est7 proporcionada por inyecci"n de dependencias. /ero
Lscope no es la )nica dependencia #ue puedes pedirle al framework. +omo e(emplo, si aparte de
Lscope #uisieras pedirle a AngularJS un ob(eto #ue pueda porporcionar acceso a cual#uier parametro
especial #ue sea parte de la BDL actual puedes solicitar el ob(eto Lroute/arams as'*
function 'ain(ontroller)*scope1 *route0arams+ % J &
/uedes encontrar mucas m7s ob(etos inyectables )tiles listados en la documentaci"n del A/Z de
AngularJS. El orden de los par7metros no es importanteR los nombres lo son. El nombre de cada
par7metro es la forma en #ue AngularJS reconoce #u8 ob(eto est7 pidiendo el controlador.
+on este conocimiento b7sico de inyecci"n de dependencias de AngularJS, est7s listo para integrar
1potoSearcService2 a 1&ain+ontroller2.
=.> A.ade 1potoSearcService2 a los parametros de la funci"n 1&ain+ontroller2 en &ain+ontroller.(s*
function 'ain(ontroller)*scope1 poto7earc7er!ice+ %
?.> Borra los datos de fotos est7ticos borrando de la l'nea O a la ]*
*scope.potos = .BD
A.> Aora, a.ade el siguiente m8todo a Lscope (usto despu8s del m8todo set%umbnailSi!e56*
*scope.submit7earc = function)+ %
Lscope.potos C VWR
var keyword C Lscope.searcKeywordR
potoSearcService.find/otos5keyword, function5potos6 E
Lscope.potos C potosR
F6R
FR
+uando es llamado, este m8todo limpia temporalmente el modelo 1potos2 y solicita
1potoSearcService2 para encontrar fotos #ue coincidan con los criterios de b)s#ueda del usuario.
+uando la b)s#ueda se completa, el modelo de fotos es actuali!ado con los resultados. /resta atenci"n
al uso de 1Lscope.searcKeyword2. @o se define e,pl'citamente el modelo dentro de &ain+ontroller.
En cambio, e,iste por#ue lo declaraste usando Png>modelC2searcKeyword2P en el campo de te,to de
manera previa.
M.> +on la nueva acci"n 1submitSearc562 de la aplicaci"n en su lugar, solo necesitas dispararla desde
la interacci"n del usuario con la vista. En inde,.tml a.ade Png>submitC2submitSearc562P al elemento
form*
<form class="searc-field" ng-submit="submit7earc)+">
<input type="text" ng-model="searc$ey#ord">
<input type="submit" !alue=""ind">
<span class="searc-message">potos of %%searc$ey#ord&&</span>
</form>
Aora cuando un usuario env'e la solicitud, e(ecutar7 la l"gica definida en el controlador.
+on esto tu aplicaci"n est7 completa.
/uedes ver la aplicaci"n final a#u'6 /rueba buscar 1water2 o 1mountains2.
&bseraciones
Aora #ue la aplicaci"n est7 completa, toma un momento para anali!ar y acer unas pocas
observaciones.
Bna carcter'stica notable de la aplicaci"n es el poco c"digo de (avascript #ue necesita ser escrito.
Zgnorando los datos est7ticos de la implementaci"n del c"digo de potoSearcService, as' como las
l'neas #ue contienen solamente llaves de cierre, son menos de ?Y l'neas de (avascript. Lo cual es
impresionante.
%ambi8n es importante notar algo #ue est7 ausente. Javascript es completamente libre del c"digo #ue
manipula el 34&. Esta caracter'stica de AngularJS lo ace muy diferente de otros framworks de
(avascript. Esta caracter'stica ace muco m7s f7cil construir aplicaciones dise.adas con una clara
separaci"n entre la l"gica de la aplicaci"n y la vista #ue se muestra al usuario.
:inalmente, como la l"gica es la #ue define como se lleva a cabo la b)s#ueda es encapsulada en un
ob(eto de servicio, as' es f7cil cambiar la implementaci"n rudimentaria del servicio por otra m7s
robusta en el futuro, tal ve! en un servicio #ue aga b)s#uedas en :lickr o Znstagram. &ientras #ue el
servicio sea implementado de una forma como la funci"n 1find/otos5keyword, callback62 funcionar7
sin re#uerir ning)n cambio al controlador, modelo o vista.
A donde partir de ac'
La aplicaci"n #ue acabas de construir a lo largo de este art'culo a demostrados los fundamentos de
AngularJS, pero esto es solo la superficie de mucas caracter'sticas #ue el framework ofrece. /ara
observar algunas de estas caracter'sticas, puedes visitar la -u'a de 3esarrollo de AngularJS o reali!ar el
tutorial oficial de AngularJS.
AngularJS es un framework relativamente nuevo, as' #ue las buenas pr7cticas de este a)n son
emergentes. Encontr8 este codigo fuente de referencia de aplicaci"n en -it$ub #ue puede servir como
gu'a para pr7cticas )tiles. %ambien puedes visitar el amistoso y activo -rupo de -oogle de AngularJS
para buscar respuestas y acer preguntas.
En mi e,periencia, AngularJS es un framwork para aplicaciones muy f7cil para traba(ar. La llegada de
frameworks maduros para aplicaciones como AngularJS es un parteaguas por el cual los
desarrolladores web deber'an estar muy emocionados.
Este articulo esta publicado en Adobe 3eveloper +onnnetion 5devnet6 ba(o licencia Creatie
Commons, escrito originalmente por (ris Sc)ultz, 3irector del laboratorio de innovaci"n de
*esource.