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