angularjs 1 - a superheroic javascript mvc framework (spanish)
Post on 22-Jan-2018
251 Views
Preview:
TRANSCRIPT
AngularJS
Superheroic Javascript MVCFramework
Agenda
• Introducción &repasodejavascript• Herramientas&frameworks javascript• AngularJS
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.
=Mito
Javascript• ¿Quées?
– Lenguajeutilizadoprincipalmenteenelladodelcliente,conelfindecrearpáginaswebdinámicas.
– Apesardesunombre,Javascript yJavanotienenningunarelación.– ECMAScript seencargadedesarrollarlasespecificacionesparaeste
lenguaje(actualmenteES5).– Suusoseestáextendiendoaaplicacionesdeservidor,utilizando
NodeJS (v8).
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.
Mitos• “Javascript esunlenguajemuysucio.”
Mitos• “Javascript nocompila,soloseinterpretaenelnavegador”• “EnJavascript noexistentipos”• “EnJavascript lospuntosycomanosonnecesarios”.• “Javascript noesunlenguajeorientadoaobjetos.Esúnicamente
funcional”
Javascript:Números
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).
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
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
Javascript Quiz1. ‘1’==12. null ==undefined3. typeof(undefined)=="undefined”4. 2<="3“5. []==[]
Javascript:The abstract equalitycomparison algorithm ‘==‘
Javascript:The strict equals operator‘===‘
LaevolucióndeJavascript
Javascript:Developer Tools
Javascript:Librerías
Javascript:Frameworks
AngularJS• ¿PorquéAngularJS?
– 100%Javascript– Open-source ymantenidoporGoogle– PatrónMVC&MVVM.– Modularizable– Muyutilizado.Muybuenadocumentación.Cualquierproblemaque
tengas,estarárespondidoenStackoverflow.
AngularJS:Definición• Pero,que(...)esesto?
– EsunframeworkMVC&MVVM(diferenciardelibrería)Javascript.– Permitedesarrollaraplicacionesconmuchomenoscódigo,evitando
infiernoscomolasvariablesglobales.
• ¿Quénosofrece?– Client-side templating– Databinding– Directives– Filters– Services– …
AngularJS• ¿cuándousar?
– SiempreorientadoaREST.– NotienesentidoutilizarAngularJS yotroframeworkMVCenel
backend.– TodalainformacióndebeserconsumidaporserviciosREST/Restful
SpringMVC+AngularJS =
SpringREST+AngularJS =
Arquitecture enAngularJS
PipelinedeAngularJSangular
.module
.config.run
.controller.directive
.factory.service
.value.constant
…
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.
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.
Módulo• Order deejecución
1. module.config()2. module.run()3. Funcionescompile dedirectivas(siseencuentranenelDOM)4. module.controller()5. Funcioneslink dedirectivas(siseencuentranenelDOM)
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.
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?
Módulo:Inyeccióndedependencias
• Ejemplo
– $scope:Servicionativoquealinyectarenuncontrolador,inicializaunámbitoparaéste.
– Person:Servicio(service ofactory)definidopreviamenteporelusuario.
– $route:ServiciodelmódulongRoute utilizadoparagestionarURLs.– $log:Servicionativo,wrapper delobjetowindow.console.
Módulo:RecomendacionesAngularJS
• Ejemplo:HolamundoenAngularJS• Ejemplo:Creaciónyaccesoamódulo.
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.
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.
Routes• ¿Cuándo usar?
– ParacrearpáginasSPA(Single-pageapplication).
Routes• Ejemplo:Aplicaciónderutassimple.
Controlador• ¿Quées?
– UncontroladorenAngularJS esunafunción .– Pertenecenaunmódulo determinado.– Cadacontroladortienesupropio$scope,ysoncreados
automáticamenteconlainstanciadecadacontrolador.
Controlador• Usarcontroladorescuandoqueramos….
– Inicializarunobjeto$scope contodassuspropiedades.– Añadircomportamientoanuestro$scope.
Controlador• Nousarcontroladorespara…
– ManipularDOM
– HacepeticionesAJAX
– Funcionesdeformateo
– Compartirdatosentredistintoscontroladores
– Gestionarelciclodevidadeotroscomponentes(inicializarservicios)
sustituir porbinding envistas
sustituir porfactorías
aplicarfilters
utilizarservicios
inyeccióndedependencias
Controlador– Engeneral,todaslasfuncionesdeclaradasenuncontroladordeben
dependerdelmodelo($scope).
– Funcionesgenéricasnodebenserdeclaradasenuncontrolador.
– Laprogramacióndefuncionesquenodependandelscope sepodránhacermedianteservicios,factorías,filtros,etc.
$scope• ¿Quées?
– Variableutilizadaparacomunicarlavista(HTML)contodosloscontroladores(JS).
– Cadacontroladortienesupropio$scope,ysoncreadosautomáticamenteconlainstanciadecadacontrolador.
– Existeunscope raíz$rootScope paracompartirvariablesentodalaaplicación.
– SitenemosMcontroladoresyNinstanciasdecadaunodeellos,tendremos(N*M)+1scopes.
$scope
$scope
• Accesoa$scope– Enlaspáginas HTMLmediante{{variable}}– Medianteusodedirectivang-bind=“variable”ong-cloack=“variable”
$scope• Ejemplo1:Scopesencillo
• Ejemplo2:Scopesanidados
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
Databinding:one-way• Utilizadoporsistemasdeplantillaclasicos:
– ApacheTiles– Thymeleaf– JSF
Databinding:one-way• ¿Problemas?
– Trasdevolverunapágina personalizadaaunusuario,loscambiosproducidosenlavista(página)nosonactualizadosenelmodelodeformaautomática.Esnecesarioprogramarcódigoqueactualiceestosdatos.
– Viceversa:cuandocambiaelmodelo,lavistanoesactualizadadeformaautomática.
– Eldesarrolladortienequeescribircódigoqueconstantementesincronize todas lasvistasconsusrespectivosmodelos=> pérdidadetiempo.
Databinding:one-way• Ejemplo1:Detectarcambiosenunselect
• Ejemplo2:Añadirnuevoscamposaunselect
Databinding:two-way• Utilizadoporsistemasdeplantillamásmodernos:
– AngularJS– BackboneJS– EmberJS– MeteorJS
Databinding:AngularJS (two-way)• Esteflujoesejecutadocadavezqueserealizauncambioenelmodelo o
enlavista.
Databinding:two-way• Ejemplo1:Detectarcambiosenunselect
• Ejemplo2:Añadirnuevoscamposaunselect
View/Templates
• ¿Quées?– Aligualquelasvistasdecualquierframework,enAngularJS éstassondocumentosque
contienecódigoHTML.– EnelcasodeAngularJS,puedenydebenexistirelementosyatributosespecíficosde
Angular.
Directivas
• ¿Quéson?– LasdirectivassonmarcasenloselementosdelárbolDOM,
representadasmedianteetiquetas,atributos,clasesy/ocomentarios.
– EstasmarcasindicanalcompiladordeAngularJS ($compiler)quedebeasignarciertocompartamiento adichoselementos,otransformarlossegúncorresponda.
– Permite,porlotanto,encapsularfuncionalidadycrearnuevoscomponentesparautilizardeformasencilla.
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.
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.
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):
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
DirectivasdeAngularJSEjemplodedirectiva:Directivasimple
Servicios
• ¿Quéson?– Utilidadquenospermitecompartirdatosentrediferentes
controladores.– Sonsingletons;pormuchasvecesqueseinyecten,soloseinstancian
unavez(realmente,unaporcada$injector)– Aldeclararserecibenunafunción constructor(internamentese
manejaríacomounaclasesingleton dejava)
Servicios
Factorías
• ¿Quéson?– Similaresalosservicios;sintaxisdiferente.
Factorías
value/constant
• ¿Quéson?– Definenvariablesyconstantesdelaaplicación(nombredelaapp,
versión,etc.)– Aligualquelosserviciosyfactorías,losdatossecompartendesde
varioscontroladores.
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…
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
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
top related