![Page 1: AngularJS 1 - A Superheroic Javascript MVC framework (Spanish)](https://reader030.vdocuments.site/reader030/viewer/2022021501/589a0c371a28ab7a318b5c1f/html5/thumbnails/1.jpg)
AngularJS
Superheroic Javascript MVCFramework
![Page 2: AngularJS 1 - A Superheroic Javascript MVC framework (Spanish)](https://reader030.vdocuments.site/reader030/viewer/2022021501/589a0c371a28ab7a318b5c1f/html5/thumbnails/2.jpg)
Agenda
• Introducción &repasodejavascript• Herramientas&frameworks javascript• AngularJS
![Page 3: AngularJS 1 - A Superheroic Javascript MVC framework (Spanish)](https://reader030.vdocuments.site/reader030/viewer/2022021501/589a0c371a28ab7a318b5c1f/html5/thumbnails/3.jpg)
Configuración rápida
sudo apt-get install python-software-propertiessudo apt-add-repository ppa:chris-lea/node.jssudo apt-get updatesudo apt-get install nodejs
Paraejecutarlosejemplos,necesitaremosnpm,disponible dentrodenodejs.
![Page 4: AngularJS 1 - A Superheroic Javascript MVC framework (Spanish)](https://reader030.vdocuments.site/reader030/viewer/2022021501/589a0c371a28ab7a318b5c1f/html5/thumbnails/4.jpg)
=Mito
![Page 5: AngularJS 1 - A Superheroic Javascript MVC framework (Spanish)](https://reader030.vdocuments.site/reader030/viewer/2022021501/589a0c371a28ab7a318b5c1f/html5/thumbnails/5.jpg)
Javascript• ¿Quées?
– Lenguajeutilizadoprincipalmenteenelladodelcliente,conelfindecrearpáginaswebdinámicas.
– Apesardesunombre,Javascript yJavanotienenningunarelación.– ECMAScript seencargadedesarrollarlasespecificacionesparaeste
lenguaje(actualmenteES5).– Suusoseestáextendiendoaaplicacionesdeservidor,utilizando
NodeJS (v8).
![Page 6: AngularJS 1 - A Superheroic Javascript MVC framework (Spanish)](https://reader030.vdocuments.site/reader030/viewer/2022021501/589a0c371a28ab7a318b5c1f/html5/thumbnails/6.jpg)
Javascript• ¿Paraqueloutilizamos?
– Crearefectosytransaccionesennuestraweb.– Gestionarinteraccióndelusuario:quepasacuandounusuariohace
click enunbotón,cuandosesitúasobreunaimagen,etc.– Enviaryrecibirinformacióndeformaasíncronaennuestraweb
(AJAX).
Aunque aprimeravistanoloparezca,unaaplicaciónenJavascriptesMUYcompleja,por loquenecesitaunestudioyanálisisprevioparamontarlaarquitecturacorrecta(aligualqueunaaplicaciónJava).Pornormageneral,ésto nosehace.
![Page 7: AngularJS 1 - A Superheroic Javascript MVC framework (Spanish)](https://reader030.vdocuments.site/reader030/viewer/2022021501/589a0c371a28ab7a318b5c1f/html5/thumbnails/7.jpg)
Mitos• “Javascript esunlenguajemuysucio.”
![Page 8: AngularJS 1 - A Superheroic Javascript MVC framework (Spanish)](https://reader030.vdocuments.site/reader030/viewer/2022021501/589a0c371a28ab7a318b5c1f/html5/thumbnails/8.jpg)
Mitos• “Javascript nocompila,soloseinterpretaenelnavegador”• “EnJavascript noexistentipos”• “EnJavascript lospuntosycomanosonnecesarios”.• “Javascript noesunlenguajeorientadoaobjetos.Esúnicamente
funcional”
![Page 9: AngularJS 1 - A Superheroic Javascript MVC framework (Spanish)](https://reader030.vdocuments.site/reader030/viewer/2022021501/589a0c371a28ab7a318b5c1f/html5/thumbnails/9.jpg)
Javascript:Números
![Page 10: AngularJS 1 - A Superheroic Javascript MVC framework (Spanish)](https://reader030.vdocuments.site/reader030/viewer/2022021501/589a0c371a28ab7a318b5c1f/html5/thumbnails/10.jpg)
Javascript:Elproblema
Aplicación inmantenible
Desarrollolento
Malcódigo
Malascostumbres
• Malascostumbres:Malusodetecnologías,noseguirningúnorden, desconocimiento,etc.
• Malcódigo:Debidoamalascostumbres,elcódigodesarrolladoseconviertepocoapocoenunaenormecajanegrainmanejable.
• Desarrollolento:Estoproduceque,amedidaqueavanzaelproyecto,añadircualquierfuncionalidad omodificaralgoexistentesevuelveundolor.
• Aplicacióninmantenible:Trasunañodedesarrollo, tenemosunaaplicacióntotalmenteinmanejable,quenadieentiende(nisiquierayomismo).
![Page 11: AngularJS 1 - A Superheroic Javascript MVC framework (Spanish)](https://reader030.vdocuments.site/reader030/viewer/2022021501/589a0c371a28ab7a318b5c1f/html5/thumbnails/11.jpg)
Javascript:Preguntas• Unpardepreguntas…
– ¿Cómoañadísvuestros<scripts>alosHTML?¿cómodescargáislosfuentes?
– ¿Cuántosarchivosutilizáisparaeldesarrollo?¿cuántosincluísenlaaplicaciónfinal?
– ¿Cómohacéislostests unitariosdelaaplicación?¿ylase2e?– SimiramoselJSdetuaplicaciónahoramismo,¿detectaríamos
duplicidaddecódigo?¿Utilizasalgunaherramientaparagestionaresto?
– Siguesalgúnestiloconcretodeprogramación,revisaslacalidaddelcódigoolacoberturadetustests?.
Obviamente,todoestopuedeconsiderarseexcesivoparaunaappdependiendo deltiempodedesarrolloquetengamos.Pero,enlamayoría deocasiones,perderunasemanaconfigurandoestasherramientasenelfrontend nosayudaráaevitarydetectarmuchosfallosenelfuturo
![Page 12: AngularJS 1 - A Superheroic Javascript MVC framework (Spanish)](https://reader030.vdocuments.site/reader030/viewer/2022021501/589a0c371a28ab7a318b5c1f/html5/thumbnails/12.jpg)
Javascript callbacks &chaining API• ¿Quéesuncallback?
– callback:‘Llamadadevuelta’.• Yotepasounafunciónytúseráselencargadodeejecutarlacuandotudecidas.• Muyutilizadoenescenariosdonde sesolicitandatosdeformaasíncrona.• Loscallbacks conlabasedelaAPIdeAngularJS.
• ¿Quéeselmethod chaining?– Chaining API:‘Encadenamientodemétodos’.
• Códigomás‘bonito’yentendible.• LaAPIdeangularestá100%orientadaalencadenamientodemétodos
![Page 13: AngularJS 1 - A Superheroic Javascript MVC framework (Spanish)](https://reader030.vdocuments.site/reader030/viewer/2022021501/589a0c371a28ab7a318b5c1f/html5/thumbnails/13.jpg)
Javascript Quiz1. ‘1’==12. null ==undefined3. typeof(undefined)=="undefined”4. 2<="3“5. []==[]
![Page 14: AngularJS 1 - A Superheroic Javascript MVC framework (Spanish)](https://reader030.vdocuments.site/reader030/viewer/2022021501/589a0c371a28ab7a318b5c1f/html5/thumbnails/14.jpg)
Javascript:The abstract equalitycomparison algorithm ‘==‘
![Page 15: AngularJS 1 - A Superheroic Javascript MVC framework (Spanish)](https://reader030.vdocuments.site/reader030/viewer/2022021501/589a0c371a28ab7a318b5c1f/html5/thumbnails/15.jpg)
Javascript:The strict equals operator‘===‘
![Page 16: AngularJS 1 - A Superheroic Javascript MVC framework (Spanish)](https://reader030.vdocuments.site/reader030/viewer/2022021501/589a0c371a28ab7a318b5c1f/html5/thumbnails/16.jpg)
LaevolucióndeJavascript
![Page 17: AngularJS 1 - A Superheroic Javascript MVC framework (Spanish)](https://reader030.vdocuments.site/reader030/viewer/2022021501/589a0c371a28ab7a318b5c1f/html5/thumbnails/17.jpg)
Javascript:Developer Tools
![Page 18: AngularJS 1 - A Superheroic Javascript MVC framework (Spanish)](https://reader030.vdocuments.site/reader030/viewer/2022021501/589a0c371a28ab7a318b5c1f/html5/thumbnails/18.jpg)
Javascript:Librerías
![Page 19: AngularJS 1 - A Superheroic Javascript MVC framework (Spanish)](https://reader030.vdocuments.site/reader030/viewer/2022021501/589a0c371a28ab7a318b5c1f/html5/thumbnails/19.jpg)
Javascript:Frameworks
![Page 20: AngularJS 1 - A Superheroic Javascript MVC framework (Spanish)](https://reader030.vdocuments.site/reader030/viewer/2022021501/589a0c371a28ab7a318b5c1f/html5/thumbnails/20.jpg)
AngularJS• ¿PorquéAngularJS?
– 100%Javascript– Open-source ymantenidoporGoogle– PatrónMVC&MVVM.– Modularizable– Muyutilizado.Muybuenadocumentación.Cualquierproblemaque
tengas,estarárespondidoenStackoverflow.
![Page 21: AngularJS 1 - A Superheroic Javascript MVC framework (Spanish)](https://reader030.vdocuments.site/reader030/viewer/2022021501/589a0c371a28ab7a318b5c1f/html5/thumbnails/21.jpg)
AngularJS:Definición• Pero,que(...)esesto?
– EsunframeworkMVC&MVVM(diferenciardelibrería)Javascript.– Permitedesarrollaraplicacionesconmuchomenoscódigo,evitando
infiernoscomolasvariablesglobales.
• ¿Quénosofrece?– Client-side templating– Databinding– Directives– Filters– Services– …
![Page 22: AngularJS 1 - A Superheroic Javascript MVC framework (Spanish)](https://reader030.vdocuments.site/reader030/viewer/2022021501/589a0c371a28ab7a318b5c1f/html5/thumbnails/22.jpg)
AngularJS• ¿cuándousar?
– SiempreorientadoaREST.– NotienesentidoutilizarAngularJS yotroframeworkMVCenel
backend.– TodalainformacióndebeserconsumidaporserviciosREST/Restful
SpringMVC+AngularJS =
SpringREST+AngularJS =
![Page 23: AngularJS 1 - A Superheroic Javascript MVC framework (Spanish)](https://reader030.vdocuments.site/reader030/viewer/2022021501/589a0c371a28ab7a318b5c1f/html5/thumbnails/23.jpg)
Arquitecture enAngularJS
![Page 24: AngularJS 1 - A Superheroic Javascript MVC framework (Spanish)](https://reader030.vdocuments.site/reader030/viewer/2022021501/589a0c371a28ab7a318b5c1f/html5/thumbnails/24.jpg)
PipelinedeAngularJSangular
.module
.config.run
.controller.directive
.factory.service
.value.constant
…
![Page 25: AngularJS 1 - A Superheroic Javascript MVC framework (Spanish)](https://reader030.vdocuments.site/reader030/viewer/2022021501/589a0c371a28ab7a318b5c1f/html5/thumbnails/25.jpg)
Módulo• ¿Quées?
– Contenedordefuncionalidades.– Unaapppuede(yseguramentedebe)tenermásdeunmódulo.– Eslabasedenuestraaplicación:cualquierfuncionalidaddesarrollada
perteneceráaunmódulo.
• ¿Quépermite?– Empaquetarelcódigo comomódulosreusables.– Códigomáslimpio,ordenadoryestructurado.– Facilitalaspruebasunitariasye2e,permitiendoindependizarlas
pruebassegúnelmóduloalquepertenezcan.
![Page 26: AngularJS 1 - A Superheroic Javascript MVC framework (Spanish)](https://reader030.vdocuments.site/reader030/viewer/2022021501/589a0c371a28ab7a318b5c1f/html5/thumbnails/26.jpg)
Módulo• ¿Cuándousar?
– Paracadafuncionalidad– Paracadacomponenequepuedaser“reusable”(servicios,directivas,
factorías).– Unmóduloglobaldelquedependentodoslosmódulosdela
aplicación,elcualcontendrácódigodeinicializacióndelaapp.– angular.module (string,array?):Elprimerparámetroeselnombredel
módulo,mientrasqueelsegudno essuarray dedependencias.• Sisoloseespecificanlosdosparámetros,elmóduloseinicializa.Sisolose
especificaelprimero,seestaráaccediendoaunmóduloquedeberáhabersidocreadopreviamente.
![Page 27: AngularJS 1 - A Superheroic Javascript MVC framework (Spanish)](https://reader030.vdocuments.site/reader030/viewer/2022021501/589a0c371a28ab7a318b5c1f/html5/thumbnails/27.jpg)
Módulo• Order deejecución
1. module.config()2. module.run()3. Funcionescompile dedirectivas(siseencuentranenelDOM)4. module.controller()5. Funcioneslink dedirectivas(siseencuentranenelDOM)
![Page 28: AngularJS 1 - A Superheroic Javascript MVC framework (Spanish)](https://reader030.vdocuments.site/reader030/viewer/2022021501/589a0c371a28ab7a318b5c1f/html5/thumbnails/28.jpg)
config()&run():Módulo• ¿Quéson?
– Métodos disponibleenlosmódulosAngularJS.– module.config (function):Utilizadoparaconfigurarlaaplicación(e.g:
configurarlasrutasdeunaapp).– module.run (function):Utilizadoparaejecutaroinicializarcódigoal
iniciodeunaaplicación.
![Page 29: AngularJS 1 - A Superheroic Javascript MVC framework (Spanish)](https://reader030.vdocuments.site/reader030/viewer/2022021501/589a0c371a28ab7a318b5c1f/html5/thumbnails/29.jpg)
Módulo:Inyeccióndedepencias• ¿Quéson?
– Todaslasfuncionesdelpipeline.module recibenfuncionescomoparámetros.
– Estasfuncionespuedenllevar“inyectados”unaseriedeparámetros,necesariosparaelcorrectofuncionamientodelaaplicación.
– Dadoquenosomosnosotrosquienejecutamosesafunción,sinoAngular,eséstequienseencargade“inicializar”esosparámetros.
– EstosellamainyeccióndedependenciasoDI.Angularutiliza$injector abajonivelparagestionarlasDI.
– Norma:Todoslosparámetrosdebenserservicios.WTF?
![Page 30: AngularJS 1 - A Superheroic Javascript MVC framework (Spanish)](https://reader030.vdocuments.site/reader030/viewer/2022021501/589a0c371a28ab7a318b5c1f/html5/thumbnails/30.jpg)
Módulo:Inyeccióndedependencias
• Ejemplo
– $scope:Servicionativoquealinyectarenuncontrolador,inicializaunámbitoparaéste.
– Person:Servicio(service ofactory)definidopreviamenteporelusuario.
– $route:ServiciodelmódulongRoute utilizadoparagestionarURLs.– $log:Servicionativo,wrapper delobjetowindow.console.
![Page 31: AngularJS 1 - A Superheroic Javascript MVC framework (Spanish)](https://reader030.vdocuments.site/reader030/viewer/2022021501/589a0c371a28ab7a318b5c1f/html5/thumbnails/31.jpg)
Módulo:RecomendacionesAngularJS
• Ejemplo:HolamundoenAngularJS• Ejemplo:Creaciónyaccesoamódulo.
![Page 32: AngularJS 1 - A Superheroic Javascript MVC framework (Spanish)](https://reader030.vdocuments.site/reader030/viewer/2022021501/589a0c371a28ab7a318b5c1f/html5/thumbnails/32.jpg)
Routes• ¿Quéson?
– Permitedefinirrutasypaths deformadinámicaenAngularJS.– LasURLs yendpoints sondefinidasenelladodelcliente.Muchomás
simpleyágil.– Lasrutassedefinenmedianteelprovider$routeProvider.– Unarutapuedecontenerlassiguientespropiedades:
• templateURL (string):RutadondeseencuentralaplantillaautilizarenformatoHTML.
• tempalte (string):Harcoded template• controller (string |function):Controladorqueseejecutarácuandoseaccedaala
rutadefinida.Puedeserunnombre(controladoryadefinidoennuestromódulo)ounafunción(declaracióndecontroladorinline).
• resolve (Object):Silarutainvocadadebecargadependenciasdeformaasíncrona,deberánindicarseenestavariable,pararenderizar lavistaúnicamentecuandolasdependenciashansidocargadas.
• redirectTo (string):Redirigiraotraruta.
![Page 33: AngularJS 1 - A Superheroic Javascript MVC framework (Spanish)](https://reader030.vdocuments.site/reader030/viewer/2022021501/589a0c371a28ab7a318b5c1f/html5/thumbnails/33.jpg)
Routes• Algunosconceptodelmódulo ngRoute:
– $routeProvider:Generalmenteutilizadoparaconfigurarlasrutas.Esraroversuusofueradelafunciónconfig deunmódulo.• when (string,object):Defineunanuevaruta.ElprimerparámetroindicalaURLde
acceso.Elsegundo,definelaruta(template,controlador,resolve,etc.).ChainingAPI.
• otherwise (object):Trasdefinirtodaslasrutas,sepuedeutilizarotherwise para,encasodeaccederaunarutanodefiniva previamente,redigir oforzarunerror).
– $route:Servico paragestionarlasrutas.Utilizadoencontroladoresmedianteinyección dedependencias.
• current:Accesoalarutaactual(configuraciones,parámetros).• previous:Siexiste,accedealcontextodelarutaanterior.
![Page 34: AngularJS 1 - A Superheroic Javascript MVC framework (Spanish)](https://reader030.vdocuments.site/reader030/viewer/2022021501/589a0c371a28ab7a318b5c1f/html5/thumbnails/34.jpg)
Routes• ¿Cuándo usar?
– ParacrearpáginasSPA(Single-pageapplication).
![Page 35: AngularJS 1 - A Superheroic Javascript MVC framework (Spanish)](https://reader030.vdocuments.site/reader030/viewer/2022021501/589a0c371a28ab7a318b5c1f/html5/thumbnails/35.jpg)
Routes• Ejemplo:Aplicaciónderutassimple.
![Page 36: AngularJS 1 - A Superheroic Javascript MVC framework (Spanish)](https://reader030.vdocuments.site/reader030/viewer/2022021501/589a0c371a28ab7a318b5c1f/html5/thumbnails/36.jpg)
Controlador• ¿Quées?
– UncontroladorenAngularJS esunafunción .– Pertenecenaunmódulo determinado.– Cadacontroladortienesupropio$scope,ysoncreados
automáticamenteconlainstanciadecadacontrolador.
![Page 37: AngularJS 1 - A Superheroic Javascript MVC framework (Spanish)](https://reader030.vdocuments.site/reader030/viewer/2022021501/589a0c371a28ab7a318b5c1f/html5/thumbnails/37.jpg)
Controlador• Usarcontroladorescuandoqueramos….
– Inicializarunobjeto$scope contodassuspropiedades.– Añadircomportamientoanuestro$scope.
![Page 38: AngularJS 1 - A Superheroic Javascript MVC framework (Spanish)](https://reader030.vdocuments.site/reader030/viewer/2022021501/589a0c371a28ab7a318b5c1f/html5/thumbnails/38.jpg)
Controlador• Nousarcontroladorespara…
– ManipularDOM
– HacepeticionesAJAX
– Funcionesdeformateo
– Compartirdatosentredistintoscontroladores
– Gestionarelciclodevidadeotroscomponentes(inicializarservicios)
sustituir porbinding envistas
sustituir porfactorías
aplicarfilters
utilizarservicios
inyeccióndedependencias
![Page 39: AngularJS 1 - A Superheroic Javascript MVC framework (Spanish)](https://reader030.vdocuments.site/reader030/viewer/2022021501/589a0c371a28ab7a318b5c1f/html5/thumbnails/39.jpg)
Controlador– Engeneral,todaslasfuncionesdeclaradasenuncontroladordeben
dependerdelmodelo($scope).
– Funcionesgenéricasnodebenserdeclaradasenuncontrolador.
– Laprogramacióndefuncionesquenodependandelscope sepodránhacermedianteservicios,factorías,filtros,etc.
![Page 40: AngularJS 1 - A Superheroic Javascript MVC framework (Spanish)](https://reader030.vdocuments.site/reader030/viewer/2022021501/589a0c371a28ab7a318b5c1f/html5/thumbnails/40.jpg)
$scope• ¿Quées?
– Variableutilizadaparacomunicarlavista(HTML)contodosloscontroladores(JS).
– Cadacontroladortienesupropio$scope,ysoncreadosautomáticamenteconlainstanciadecadacontrolador.
– Existeunscope raíz$rootScope paracompartirvariablesentodalaaplicación.
– SitenemosMcontroladoresyNinstanciasdecadaunodeellos,tendremos(N*M)+1scopes.
![Page 41: AngularJS 1 - A Superheroic Javascript MVC framework (Spanish)](https://reader030.vdocuments.site/reader030/viewer/2022021501/589a0c371a28ab7a318b5c1f/html5/thumbnails/41.jpg)
$scope
![Page 42: AngularJS 1 - A Superheroic Javascript MVC framework (Spanish)](https://reader030.vdocuments.site/reader030/viewer/2022021501/589a0c371a28ab7a318b5c1f/html5/thumbnails/42.jpg)
$scope
• Accesoa$scope– Enlaspáginas HTMLmediante{{variable}}– Medianteusodedirectivang-bind=“variable”ong-cloack=“variable”
![Page 43: AngularJS 1 - A Superheroic Javascript MVC framework (Spanish)](https://reader030.vdocuments.site/reader030/viewer/2022021501/589a0c371a28ab7a318b5c1f/html5/thumbnails/43.jpg)
$scope• Ejemplo1:Scopesencillo
• Ejemplo2:Scopesanidados
![Page 44: AngularJS 1 - A Superheroic Javascript MVC framework (Spanish)](https://reader030.vdocuments.site/reader030/viewer/2022021501/589a0c371a28ab7a318b5c1f/html5/thumbnails/44.jpg)
Databinding
• ¿Quées?“Databinding is the process that establishes aconnection between the applicationUIandbusiness logic.If the binding hasthe correct settings andthe data providesthe proper notifications, then,when the data changes its value,the elements thatarebound tothe data reflect changes automatically.”- Microsoft
“UIdatabinding is asoftwaredesign pattern tosimplify development ofGUIapplications.UIdatabinding binds UIelements toan application domain model.Most framrworks employ the Observer pattern asthe underlying bindingmechanism.Towork efficiently,UIdatabinding hastoaddress inputvalidationanddatatype mapping.”–Wikipedia
“Databinding inAngularappsis the automatic sunchronization ofdatabetweenthe model andview components.The view is aprojection ofthe model.When themodel changes,the view reflects the change,andviceversa”- AngularJS
![Page 45: AngularJS 1 - A Superheroic Javascript MVC framework (Spanish)](https://reader030.vdocuments.site/reader030/viewer/2022021501/589a0c371a28ab7a318b5c1f/html5/thumbnails/45.jpg)
Databinding:one-way• Utilizadoporsistemasdeplantillaclasicos:
– ApacheTiles– Thymeleaf– JSF
![Page 46: AngularJS 1 - A Superheroic Javascript MVC framework (Spanish)](https://reader030.vdocuments.site/reader030/viewer/2022021501/589a0c371a28ab7a318b5c1f/html5/thumbnails/46.jpg)
Databinding:one-way• ¿Problemas?
– Trasdevolverunapágina personalizadaaunusuario,loscambiosproducidosenlavista(página)nosonactualizadosenelmodelodeformaautomática.Esnecesarioprogramarcódigoqueactualiceestosdatos.
– Viceversa:cuandocambiaelmodelo,lavistanoesactualizadadeformaautomática.
– Eldesarrolladortienequeescribircódigoqueconstantementesincronize todas lasvistasconsusrespectivosmodelos=> pérdidadetiempo.
![Page 47: AngularJS 1 - A Superheroic Javascript MVC framework (Spanish)](https://reader030.vdocuments.site/reader030/viewer/2022021501/589a0c371a28ab7a318b5c1f/html5/thumbnails/47.jpg)
Databinding:one-way• Ejemplo1:Detectarcambiosenunselect
• Ejemplo2:Añadirnuevoscamposaunselect
![Page 48: AngularJS 1 - A Superheroic Javascript MVC framework (Spanish)](https://reader030.vdocuments.site/reader030/viewer/2022021501/589a0c371a28ab7a318b5c1f/html5/thumbnails/48.jpg)
Databinding:two-way• Utilizadoporsistemasdeplantillamásmodernos:
– AngularJS– BackboneJS– EmberJS– MeteorJS
![Page 49: AngularJS 1 - A Superheroic Javascript MVC framework (Spanish)](https://reader030.vdocuments.site/reader030/viewer/2022021501/589a0c371a28ab7a318b5c1f/html5/thumbnails/49.jpg)
Databinding:AngularJS (two-way)• Esteflujoesejecutadocadavezqueserealizauncambioenelmodelo o
enlavista.
![Page 50: AngularJS 1 - A Superheroic Javascript MVC framework (Spanish)](https://reader030.vdocuments.site/reader030/viewer/2022021501/589a0c371a28ab7a318b5c1f/html5/thumbnails/50.jpg)
Databinding:two-way• Ejemplo1:Detectarcambiosenunselect
• Ejemplo2:Añadirnuevoscamposaunselect
![Page 51: AngularJS 1 - A Superheroic Javascript MVC framework (Spanish)](https://reader030.vdocuments.site/reader030/viewer/2022021501/589a0c371a28ab7a318b5c1f/html5/thumbnails/51.jpg)
View/Templates
• ¿Quées?– Aligualquelasvistasdecualquierframework,enAngularJS éstassondocumentosque
contienecódigoHTML.– EnelcasodeAngularJS,puedenydebenexistirelementosyatributosespecíficosde
Angular.
![Page 52: AngularJS 1 - A Superheroic Javascript MVC framework (Spanish)](https://reader030.vdocuments.site/reader030/viewer/2022021501/589a0c371a28ab7a318b5c1f/html5/thumbnails/52.jpg)
Directivas
• ¿Quéson?– LasdirectivassonmarcasenloselementosdelárbolDOM,
representadasmedianteetiquetas,atributos,clasesy/ocomentarios.
– EstasmarcasindicanalcompiladordeAngularJS ($compiler)quedebeasignarciertocompartamiento adichoselementos,otransformarlossegúncorresponda.
– Permite,porlotanto,encapsularfuncionalidadycrearnuevoscomponentesparautilizardeformasencilla.
![Page 53: AngularJS 1 - A Superheroic Javascript MVC framework (Spanish)](https://reader030.vdocuments.site/reader030/viewer/2022021501/589a0c371a28ab7a318b5c1f/html5/thumbnails/53.jpg)
Directivas:Retorno
• ¿Quépropiedadestieneelobjetoqueseretornaenladeclaracióndeunadirectiva?– restrict (‘A’|’E’|’C’|’M’):Restringeausarladirectivacomounatributo,
elemento,nombredeclaseocomentario.– transclude (true|false|element):Sitransclude estrue,dentrodela
plantillaseespear unelementoconelatributong-transclude.Enelelemneto DOMalquepertenezcaesteatributoserádondeserenderizará laplantilla.
– template/templateUrl (string):HTMLconelcontenidodelaplantilla.– link(function):Función utilizadageneralmentepararegistrareventos
sobreelelemento(element)deladirectiva.– controller (function |string): Controladorutilizadoporladirectiva.
![Page 54: AngularJS 1 - A Superheroic Javascript MVC framework (Spanish)](https://reader030.vdocuments.site/reader030/viewer/2022021501/589a0c371a28ab7a318b5c1f/html5/thumbnails/54.jpg)
Directivas:Retorno
– restrict (‘A’|’E’|’C’|’M’):Restringeausarladirectivacomounatributo,elemento,nombredeclaseocomentario.
– transclude (true|false|element):Sitransclude estrue,dentrodelaplantillaseespear unelementoconelatributong-transclude.Enelelemneto DOMalquepertenezcaesteatributoserádondeserenderizará laplantilla.
– template/templateUrl (string):HTMLconelcontenidodelaplantilla.– link(function):Función utilizadageneralmentepararegistrareventos
sobreelelemento(element)deladirectiva.– controller (function |string): Controladorutilizadoporladirectiva.
![Page 55: AngularJS 1 - A Superheroic Javascript MVC framework (Spanish)](https://reader030.vdocuments.site/reader030/viewer/2022021501/589a0c371a28ab7a318b5c1f/html5/thumbnails/55.jpg)
Directivas:Retorno– scope (boolean):
• true:Secreaunnuevoscope paraladirectiva.Sehaceunacopiadelscope padre.lasmodificacioneshechasenladirectivanopropaganloscambioshaciaelámbitosuperior.
• false:Ladirectivautilizaelscope padre.DesdeladirectivasepuedenmodificarTODOSlosatributosdelscope padre.scope=false
– scope (object):Creaunnuevoscope aislado.isolatedscope• @ (Textbinding /One-way binding):Elvalorindicadodebedeserunaexpresión.
Loscambiosrealizadosenelpadretienenefectoenelhijoynoalrevés.• &(Beahivour binding /Method binding):• =(Directmodel binding /Two-way binding):
![Page 56: AngularJS 1 - A Superheroic Javascript MVC framework (Spanish)](https://reader030.vdocuments.site/reader030/viewer/2022021501/589a0c371a28ab7a318b5c1f/html5/thumbnails/56.jpg)
DirectivasdeAngularJS– ng-app:Permiteinicializarunaaplicaciónsimplemente conponerel
atributoenunelementodelárbolDOM.• Conng-app:• Sinng-app:
– ng-controller:InicializauncontroladorenunelementoDOMconcreto.– ng-model:“Bindea”unavariabledelsopeaunelementoinput,
select otextarea. (two-way)– ng-bind:Muestraelvalordeunelementodelscope medianteng-
bind=“var” o{{var}}(one-way)– ng-click/ngDblclick:Especificauncomportamientocuandounelemento
espulsado.– ng-change:Evalua unaexpresióncuandoelusuariocambialaentrada
(input, select, textarea, etc.).– ng-repeat:CreaunelementoDOMporcadaelemento delarray
especificado.– …
Built-intAngularJSdirectives
![Page 57: AngularJS 1 - A Superheroic Javascript MVC framework (Spanish)](https://reader030.vdocuments.site/reader030/viewer/2022021501/589a0c371a28ab7a318b5c1f/html5/thumbnails/57.jpg)
DirectivasdeAngularJSEjemplodedirectiva:Directivasimple
![Page 58: AngularJS 1 - A Superheroic Javascript MVC framework (Spanish)](https://reader030.vdocuments.site/reader030/viewer/2022021501/589a0c371a28ab7a318b5c1f/html5/thumbnails/58.jpg)
Servicios
• ¿Quéson?– Utilidadquenospermitecompartirdatosentrediferentes
controladores.– Sonsingletons;pormuchasvecesqueseinyecten,soloseinstancian
unavez(realmente,unaporcada$injector)– Aldeclararserecibenunafunción constructor(internamentese
manejaríacomounaclasesingleton dejava)
![Page 59: AngularJS 1 - A Superheroic Javascript MVC framework (Spanish)](https://reader030.vdocuments.site/reader030/viewer/2022021501/589a0c371a28ab7a318b5c1f/html5/thumbnails/59.jpg)
Servicios
![Page 60: AngularJS 1 - A Superheroic Javascript MVC framework (Spanish)](https://reader030.vdocuments.site/reader030/viewer/2022021501/589a0c371a28ab7a318b5c1f/html5/thumbnails/60.jpg)
Factorías
• ¿Quéson?– Similaresalosservicios;sintaxisdiferente.
![Page 61: AngularJS 1 - A Superheroic Javascript MVC framework (Spanish)](https://reader030.vdocuments.site/reader030/viewer/2022021501/589a0c371a28ab7a318b5c1f/html5/thumbnails/61.jpg)
Factorías
![Page 62: AngularJS 1 - A Superheroic Javascript MVC framework (Spanish)](https://reader030.vdocuments.site/reader030/viewer/2022021501/589a0c371a28ab7a318b5c1f/html5/thumbnails/62.jpg)
value/constant
• ¿Quéson?– Definenvariablesyconstantesdelaaplicación(nombredelaapp,
versión,etc.)– Aligualquelosserviciosyfactorías,losdatossecompartendesde
varioscontroladores.
![Page 63: AngularJS 1 - A Superheroic Javascript MVC framework (Spanish)](https://reader030.vdocuments.site/reader030/viewer/2022021501/589a0c371a28ab7a318b5c1f/html5/thumbnails/63.jpg)
AngularJS utils• Util functions
– angular.element– angular.equals– angular.forEach– angular.isArray– angular.isDate– angular.isDefined– angular.isElement– angular.isNumber– angular.isObject– angular.isUndefined– angular.isString– angular.toJson– angular.fromJson– angular.copy– angular.merge
• functions– angular.controller– angular.directive– angular.service– angular.factory– angular.injector– angular.module…
![Page 64: AngularJS 1 - A Superheroic Javascript MVC framework (Spanish)](https://reader030.vdocuments.site/reader030/viewer/2022021501/589a0c371a28ab7a318b5c1f/html5/thumbnails/64.jpg)
Ejercicio:Controllers yServicesDebemosdecrearunaaplicaciónquepermitacrearpedidos.– Unpedidoestarácompuestode:
• Nombredepedido• Nombredeobjetoacomprar• Unidades
Sedeberáproporcionarunformulariosencillo,queseencarguedegenerarestosdatosmedianteunbotón“Generarpedido”.Laaplicacióndeberátenerotrasecciónquemostrará,entodomomento(enformadelistaotabla),todoslospedidosañadidosporelusuario.Además,sepermitiráeliminarsiempreelúltimopedidomedianteunbotón“Eliminarúltimo”
Esqueleto
![Page 65: AngularJS 1 - A Superheroic Javascript MVC framework (Spanish)](https://reader030.vdocuments.site/reader030/viewer/2022021501/589a0c371a28ab7a318b5c1f/html5/thumbnails/65.jpg)
Ejercicio:DirectivaLasiguienteurl nosdevuelveinformacióndeusuarios:https://randomuser.me/api/.Deberemoscrearunadirectivaquetengalasiguientepinta:<user-table size=“10” autoreload=“true”></user-table>
Esimportanterecalcarqueladirectivanodependedeningúncontrolador,ydeberáfuncionarporsisola.
Lainformacióndelosusuariosdeberádesermostrada,porejemplo,enformadelistaodetabla.
Esqueleto