Codemotion how to create a product copy - Codemotion Rome 2015
Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015
-
Upload
jose-manuel-garcia-garcia -
Category
Software
-
view
687 -
download
1
Transcript of Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015
![Page 1: Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015](https://reader031.fdocuments.us/reader031/viewer/2022030318/58eddbc21a28ab66208b46e7/html5/thumbnails/1.jpg)
MADRID · NOV 27-28 · 2015
Carrera de fondo: la continuada
lucha de AngularJSJosé Manuel García García (Sema)
![Page 2: Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015](https://reader031.fdocuments.us/reader031/viewer/2022030318/58eddbc21a28ab66208b46e7/html5/thumbnails/2.jpg)
José Manuel García · MADRID · NOV 27-28 · 2015MADRID · NOV 27-28 · 2015
![Page 3: Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015](https://reader031.fdocuments.us/reader031/viewer/2022030318/58eddbc21a28ab66208b46e7/html5/thumbnails/3.jpg)
![Page 4: Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015](https://reader031.fdocuments.us/reader031/viewer/2022030318/58eddbc21a28ab66208b46e7/html5/thumbnails/4.jpg)
“He visto
aplicaciones en
JavaScript
que harIan vomitar a una cabra…”
![Page 5: Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015](https://reader031.fdocuments.us/reader031/viewer/2022030318/58eddbc21a28ab66208b46e7/html5/thumbnails/5.jpg)
José Manuel García · MADRID · NOV 27-28 · 2015
Sema
Sako
![Page 6: Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015](https://reader031.fdocuments.us/reader031/viewer/2022030318/58eddbc21a28ab66208b46e7/html5/thumbnails/6.jpg)
José Manuel García · MADRID · NOV 27-28 · 2015
FrontEnd Development
De páginas sencillas y primerizas…
![Page 7: Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015](https://reader031.fdocuments.us/reader031/viewer/2022030318/58eddbc21a28ab66208b46e7/html5/thumbnails/7.jpg)
José Manuel García · MADRID · NOV 27-28 · 2015
FrontEnd Development
… a complejas aplicaciones de hoy día.
![Page 8: Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015](https://reader031.fdocuments.us/reader031/viewer/2022030318/58eddbc21a28ab66208b46e7/html5/thumbnails/8.jpg)
![Page 9: Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015](https://reader031.fdocuments.us/reader031/viewer/2022030318/58eddbc21a28ab66208b46e7/html5/thumbnails/9.jpg)
José Manuel García · MADRID · NOV 27-28 · 2015
FrontEnd Development
Necesidades comunes que se detectan:
Peticiones AJAX
Interacción con el DOM
Eventos y animaciones
Organización del código (código spaghetti)
Cross browsing
Tamaño, peso
![Page 10: Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015](https://reader031.fdocuments.us/reader031/viewer/2022030318/58eddbc21a28ab66208b46e7/html5/thumbnails/10.jpg)
José Manuel García · MADRID · NOV 27-28 · 2015
FrontEnd Development
José Manuel García · MADRID · NOV 27-28 · 2015
![Page 11: Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015](https://reader031.fdocuments.us/reader031/viewer/2022030318/58eddbc21a28ab66208b46e7/html5/thumbnails/11.jpg)
José Manuel García · MADRID · NOV 27-28 · 2015
Empiezan los cambios
![Page 12: Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015](https://reader031.fdocuments.us/reader031/viewer/2022030318/58eddbc21a28ab66208b46e7/html5/thumbnails/12.jpg)
José Manuel García · MADRID · NOV 27-28 · 2015
FrontEnd Development
![Page 13: Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015](https://reader031.fdocuments.us/reader031/viewer/2022030318/58eddbc21a28ab66208b46e7/html5/thumbnails/13.jpg)
José Manuel García · MADRID · NOV 27-28 · 2015
FrontEnd Development2007 2009 2012
2013 2014 2015
![Page 14: Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015](https://reader031.fdocuments.us/reader031/viewer/2022030318/58eddbc21a28ab66208b46e7/html5/thumbnails/14.jpg)
![Page 15: Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015](https://reader031.fdocuments.us/reader031/viewer/2022030318/58eddbc21a28ab66208b46e7/html5/thumbnails/15.jpg)
José Manuel García · MADRID · NOV 27-28 · 2015
FrontEnd Development
![Page 16: Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015](https://reader031.fdocuments.us/reader031/viewer/2022030318/58eddbc21a28ab66208b46e7/html5/thumbnails/16.jpg)
José Manuel García · MADRID · NOV 27-28 · 2015
FrontEnd Development
![Page 17: Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015](https://reader031.fdocuments.us/reader031/viewer/2022030318/58eddbc21a28ab66208b46e7/html5/thumbnails/17.jpg)
![Page 18: Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015](https://reader031.fdocuments.us/reader031/viewer/2022030318/58eddbc21a28ab66208b46e7/html5/thumbnails/18.jpg)
José Manuel García · MADRID · NOV 27-28 · 2015
![Page 19: Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015](https://reader031.fdocuments.us/reader031/viewer/2022030318/58eddbc21a28ab66208b46e7/html5/thumbnails/19.jpg)
José Manuel García · MADRID · NOV 27-28 · 2015
Indeed
(Búsqueda realizada a 21/11/2015)
![Page 20: Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015](https://reader031.fdocuments.us/reader031/viewer/2022030318/58eddbc21a28ab66208b46e7/html5/thumbnails/20.jpg)
José Manuel García · MADRID · NOV 27-28 · 2015
0 100 200 300 400 500 600 700
Portal F
Portal E
Portal D
Portal C
Portal B
Portal A
Nº ofertas trabajo (21/11/2015, España)
Knockout Ember Backbone AngularJS jQuery
Ofertas actuales de empleo
![Page 21: Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015](https://reader031.fdocuments.us/reader031/viewer/2022030318/58eddbc21a28ab66208b46e7/html5/thumbnails/21.jpg)
José Manuel García · MADRID · NOV 27-28 · 2015
¿Qué es Backbone?
• Librería MVC (last versión: 1.2.3)
• Ligera: 69kb (dev) y 7.3kb (prod)
• Dependencia: underscore (y jQuery para vistas)
• Ayuda a organizar la estructura de nuestra app
• Sincroniza modelos y colecciones (API Rest)
• Todo lo debe controlar el programador (+ verboso)
![Page 22: Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015](https://reader031.fdocuments.us/reader031/viewer/2022030318/58eddbc21a28ab66208b46e7/html5/thumbnails/22.jpg)
José Manuel García · MADRID · NOV 27-28 · 2015
¿Cuándo puedo utilizarlo?
• Estás empezando en el mundo FrontEnd & SPA
• Quieres tener un código estructurado (!spaghetti)
• Quieres tener un control de todo lo que ocurre
• Quieres entender que es un sistema dirigido por eventos
• Quieres tener libertad para el sistema de templating
• Curva de aprendizaje suave (rápido aprendizaje)
• Conceptos básicos sobre SPA, SRP, DRY, AMD, state-machine…
![Page 23: Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015](https://reader031.fdocuments.us/reader031/viewer/2022030318/58eddbc21a28ab66208b46e7/html5/thumbnails/23.jpg)
José Manuel García · MADRID · NOV 27-28 · 2015
¿Qué puedo utilizar?• Modelos y colecciones: objetos contenedores de información
que representan el dominio de aplicación
• Vistas: que se asocian a la UI
• MVC MVP: se delega responsabilidad del controlador a las
vistas, y éste se convierte en un router
BackEnd
DOM
Router
Vista
Modelo
Colección
event
event
event
event
eventuser
action
render
BackEnd
![Page 24: Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015](https://reader031.fdocuments.us/reader031/viewer/2022030318/58eddbc21a28ab66208b46e7/html5/thumbnails/24.jpg)
José Manuel García · MADRID · NOV 27-28 · 2015
Hablamos de AngularJS,¡cojones ya!
![Page 25: Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015](https://reader031.fdocuments.us/reader031/viewer/2022030318/58eddbc21a28ab66208b46e7/html5/thumbnails/25.jpg)
José Manuel García · MADRID · NOV 27-28 · 2015
“Superheroic
JavaScript MVW
Framework”
![Page 26: Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015](https://reader031.fdocuments.us/reader031/viewer/2022030318/58eddbc21a28ab66208b46e7/html5/thumbnails/26.jpg)
José Manuel García · MADRID · NOV 27-28 · 2015
• Framework MVVM (1.4.8-stable, 1.5-beta.2, 2.0-alpha.46)
• Peso: 1.02Mb (unpacked), 144kb (minified)
• Modularidad => Inyección de dependencias => Testeable
• Two-way data-binding
• Extender la semántica de HTML (etiquetas propias)
• Caché, interceptores, AJAX, patrón decorator, promesas…
• No more jQuery*!
¿Qué es AngularJS?
![Page 27: Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015](https://reader031.fdocuments.us/reader031/viewer/2022030318/58eddbc21a28ab66208b46e7/html5/thumbnails/27.jpg)
José Manuel García · MADRID · NOV 27-28 · 2015
• No es una librería de acceso al DOM
• No es una librería de controles visuales o widgets
• No te abstrae de HTML, JS o CSS
• No es la mejor solución para juegos
• ¡No es tan difícil como parece!
Además, AngularJS…
![Page 28: Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015](https://reader031.fdocuments.us/reader031/viewer/2022030318/58eddbc21a28ab66208b46e7/html5/thumbnails/28.jpg)
José Manuel García · MADRID · NOV 27-28 · 2015
Modularidad
• Módulo: conjunto de contenedores
• Contenedor: estructura de Angular para encapsular código
• Controlador: funciones que recogen los eventos de la UI y define
funcionalidad para una parte de la aplicación o página
• Servicio: función singleton para realizar acciones comunes
• Filtro: función que transforma un objeto (entrada) en otro (salida)
• Directiva: conjunto de “controlador + vista” encapsulado en una
etiqueta o atributo HTML
![Page 29: Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015](https://reader031.fdocuments.us/reader031/viewer/2022030318/58eddbc21a28ab66208b46e7/html5/thumbnails/29.jpg)
Para una buena appSPA necesitaremos
1. Una buena división en módulos.
2. Un controlador.3. Un “modelo”.4. Una vista.5. Un enrutador
![Page 30: Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015](https://reader031.fdocuments.us/reader031/viewer/2022030318/58eddbc21a28ab66208b46e7/html5/thumbnails/30.jpg)
José Manuel García · MADRID · NOV 27-28 · 2015
Modularidad & Dep. Injection
Un módulo no está
obligado a utilizar todos
los contenedores
(moduleName)
![Page 31: Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015](https://reader031.fdocuments.us/reader031/viewer/2022030318/58eddbc21a28ab66208b46e7/html5/thumbnails/31.jpg)
José Manuel García · MADRID · NOV 27-28 · 2015
Dependency Injection• Módulo root: ExampleApp1
• Una vista: index.html
• Dos controladores: ctrl1 y
ctrl2 (dos ámbitos de
ejecución) inyectados en
el módulo root
Módulo root (ExampleApp1)
ctrl1ctrl2
![Page 32: Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015](https://reader031.fdocuments.us/reader031/viewer/2022030318/58eddbc21a28ab66208b46e7/html5/thumbnails/32.jpg)
José Manuel García · MADRID · NOV 27-28 · 2015
$scope: ámbito de ejecución
• Módulo root: nombre y deps
• Definimos ahora la lógica
que cada controlador
expondrá a la vista
• Controlador: nombre y…
• Dependencias
• Array de dependencias
![Page 33: Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015](https://reader031.fdocuments.us/reader031/viewer/2022030318/58eddbc21a28ab66208b46e7/html5/thumbnails/33.jpg)
José Manuel García · MADRID · NOV 27-28 · 2015
$scope: ámbito de ejecución
• El objeto $scope es una especie
de contenedor común entre la
vista y el controlador
• A través de él se produce toda
la comunicación bidireccional
(two-way data-binding)
• Podemos definir una jerarquía
por herencia
![Page 34: Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015](https://reader031.fdocuments.us/reader031/viewer/2022030318/58eddbc21a28ab66208b46e7/html5/thumbnails/34.jpg)
José Manuel García · MADRID · NOV 27-28 · 2015
• ng-model: pareja perfecta para $scope
$scope: ámbito de ejecución
![Page 35: Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015](https://reader031.fdocuments.us/reader031/viewer/2022030318/58eddbc21a28ab66208b46e7/html5/thumbnails/35.jpg)
José Manuel García · MADRID · NOV 27-28 · 2015
$scope: ámbito de ejecución
• Data-binding en dos direcciones… ¡mola!
![Page 36: Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015](https://reader031.fdocuments.us/reader031/viewer/2022030318/58eddbc21a28ab66208b46e7/html5/thumbnails/36.jpg)
José Manuel García · MADRID · NOV 27-28 · 2015
$scope: ¿cómo detecta cambios?
• Opción 1: mediante eventos (Backbone style)
(Esfuerzo manual, verboso, sobreruido si hay muchos eventos)
• Opción 2: dirty-checking (AngularJS style)
(Automágico, transparente, problemático si no se usa bien)
![Page 37: Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015](https://reader031.fdocuments.us/reader031/viewer/2022030318/58eddbc21a28ab66208b46e7/html5/thumbnails/37.jpg)
José Manuel García · MADRID · NOV 27-28 · 2015
$scope y el ciclo de digestión
![Page 38: Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015](https://reader031.fdocuments.us/reader031/viewer/2022030318/58eddbc21a28ab66208b46e7/html5/thumbnails/38.jpg)
José Manuel García · MADRID · NOV 27-28 · 2015
$scope y el ciclo de digestión
• El digest cycle es un bucle
mediante el que observar esos
cambios
• $scope.$apply()
• $scope.$digest()
• $scope.$watch()
• $scope.$destroy()
![Page 39: Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015](https://reader031.fdocuments.us/reader031/viewer/2022030318/58eddbc21a28ab66208b46e7/html5/thumbnails/39.jpg)
José Manuel García · MADRID · NOV 27-28 · 2015
$scope y el ciclo de digestión
![Page 40: Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015](https://reader031.fdocuments.us/reader031/viewer/2022030318/58eddbc21a28ab66208b46e7/html5/thumbnails/40.jpg)
José Manuel García · MADRID · NOV 27-28 · 2015
$scope y el ciclo de digestión
![Page 41: Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015](https://reader031.fdocuments.us/reader031/viewer/2022030318/58eddbc21a28ab66208b46e7/html5/thumbnails/41.jpg)
José Manuel García · MADRID · NOV 27-28 · 2015
$scope y data-binding
($rootScope, $scope y herencia)
![Page 42: Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015](https://reader031.fdocuments.us/reader031/viewer/2022030318/58eddbc21a28ab66208b46e7/html5/thumbnails/42.jpg)
José Manuel García · MADRID · NOV 27-28 · 2015
Directivas, pegamento para unir piezas
![Page 43: Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015](https://reader031.fdocuments.us/reader031/viewer/2022030318/58eddbc21a28ab66208b46e7/html5/thumbnails/43.jpg)
José Manuel García · MADRID · NOV 27-28 · 2015
Directivas
• Mecanismo para extender el comportamiento de HTML
• Out-of-the-box: predefinidas por Angular:
• Personalizadas: nos dan la posibilidad de crearlas a
medida o bien para encapsular plugins/librerías externas
• De aplicación: ng-app, ng-controller, ng-model, ng-bind, ng-repeat,
ng-if|show, ng-style, ng-init, ng-class…
• De eventos HTML: ng-click, ng-keyup, ng-mouseup, ng-mouseover…
![Page 44: Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015](https://reader031.fdocuments.us/reader031/viewer/2022030318/58eddbc21a28ab66208b46e7/html5/thumbnails/44.jpg)
José Manuel García · MADRID · NOV 27-28 · 2015
Directivas
Son el pegamento entre la vista y el controlador:
• En una dirección, la directiva toma los datos expuestos
por el controlador y los renderiza en la vista
• En otra dirección, la directiva captura los eventos que se
originan en el DOM e invoca al controlador
Las directivas son el nuevo conducto de comunicación…
![Page 45: Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015](https://reader031.fdocuments.us/reader031/viewer/2022030318/58eddbc21a28ab66208b46e7/html5/thumbnails/45.jpg)
José Manuel García · MADRID · NOV 27-28 · 2015
Directivas (ng-repeat)
• Iterar sobre colecciones
o conjunto de elementos
![Page 46: Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015](https://reader031.fdocuments.us/reader031/viewer/2022030318/58eddbc21a28ab66208b46e7/html5/thumbnails/46.jpg)
José Manuel García · MADRID · NOV 27-28 · 2015
Directivas (ng-if | show)
• Mostrar/ocultar la lista
• Mostrar/ocultar un label
![Page 47: Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015](https://reader031.fdocuments.us/reader031/viewer/2022030318/58eddbc21a28ab66208b46e7/html5/thumbnails/47.jpg)
José Manuel García · MADRID · NOV 27-28 · 2015
Directivas (una propia)
• Módulo /
comportamiento
(lógica)
• Declaración en la
vista (parte visual)
![Page 48: Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015](https://reader031.fdocuments.us/reader031/viewer/2022030318/58eddbc21a28ab66208b46e7/html5/thumbnails/48.jpg)
José Manuel García · MADRID · NOV 27-28 · 2015
Filtros
![Page 49: Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015](https://reader031.fdocuments.us/reader031/viewer/2022030318/58eddbc21a28ab66208b46e7/html5/thumbnails/49.jpg)
José Manuel García · MADRID · NOV 27-28 · 2015
Filtros
• Un filtro formatea el resultado de una expresión de
entrada para presentarla al usuario
• Los filtros pueden aplicarse directamente en la vista o
inyectándolos en un módulo
![Page 50: Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015](https://reader031.fdocuments.us/reader031/viewer/2022030318/58eddbc21a28ab66208b46e7/html5/thumbnails/50.jpg)
José Manuel García · MADRID · NOV 27-28 · 2015
Filtros predefinidosAngularJS provee de algunos predefinidos:
• currency: formatear una cifra como cantidad monetaria
• number: formatea un número como texto
• date: convierte la fecha a un formato especificado
• json: convierte un objeto en una cadena JSON
• lowercase/uppercase: formatea una cadena a mayúsc./min.
• limitTo: filtrar un subconjunto de elementos (array/string)
• orderBy: ordena un array en función de un predicado
![Page 51: Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015](https://reader031.fdocuments.us/reader031/viewer/2022030318/58eddbc21a28ab66208b46e7/html5/thumbnails/51.jpg)
José Manuel García · MADRID · NOV 27-28 · 2015
Filtro + directivaVamos a pintar una tabla y vamos a filtrar con un criterio:
![Page 52: Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015](https://reader031.fdocuments.us/reader031/viewer/2022030318/58eddbc21a28ab66208b46e7/html5/thumbnails/52.jpg)
José Manuel García · MADRID · NOV 27-28 · 2015
Servicios
![Page 53: Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015](https://reader031.fdocuments.us/reader031/viewer/2022030318/58eddbc21a28ab66208b46e7/html5/thumbnails/53.jpg)
José Manuel García · MADRID · NOV 27-28 · 2015
Servicios
• Son la forma de organizar y reusar el código de tareas
comunes en una app (separación de responsabilidades)
• Simplifican la lógica de negocio de los controladores,
desacoplándolos de los servicios
• Son singletons, se instancia una sola vez y se comparte
• $log, $timeout, $location, $window, $http, $q…
![Page 54: Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015](https://reader031.fdocuments.us/reader031/viewer/2022030318/58eddbc21a28ab66208b46e7/html5/thumbnails/54.jpg)
José Manuel García · MADRID · NOV 27-28 · 2015
Servicios
Servicios “especiales”:
• constant: module(“x”).constant(nombre, valor);
• value: module(“x”).value(nombre, valor);
Servicios puros:
• service: module(“x”).service(nombre, function);
• factory: module(“x”).factory(nombre, function);
• provider: module(“x”).provider(nombre, function);
![Page 55: Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015](https://reader031.fdocuments.us/reader031/viewer/2022030318/58eddbc21a28ab66208b46e7/html5/thumbnails/55.jpg)
José Manuel García · MADRID · NOV 27-28 · 2015
Servicios (ejemplo)• Vista:
• Controlador:
• Factoría:
![Page 56: Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015](https://reader031.fdocuments.us/reader031/viewer/2022030318/58eddbc21a28ab66208b46e7/html5/thumbnails/56.jpg)
José Manuel García · MADRID · NOV 27-28 · 2015
![Page 57: Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015](https://reader031.fdocuments.us/reader031/viewer/2022030318/58eddbc21a28ab66208b46e7/html5/thumbnails/57.jpg)
José Manuel García · MADRID · NOV 27-28 · 2015
Calling BackEnd Services
Posiblemente, los dos servicios que más vas a utilizar:
$http $q
![Page 58: Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015](https://reader031.fdocuments.us/reader031/viewer/2022030318/58eddbc21a28ab66208b46e7/html5/thumbnails/58.jpg)
José Manuel García · MADRID · NOV 27-28 · 2015
Calling BackEnd ServicesCombinando las promesas con peticiones AJAX:
![Page 59: Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015](https://reader031.fdocuments.us/reader031/viewer/2022030318/58eddbc21a28ab66208b46e7/html5/thumbnails/59.jpg)
José Manuel García · MADRID · NOV 27-28 · 2015
![Page 60: Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015](https://reader031.fdocuments.us/reader031/viewer/2022030318/58eddbc21a28ab66208b46e7/html5/thumbnails/60.jpg)
José Manuel García · MADRID · NOV 27-28 · 2015
AngularJS & jQuery: ¿divorcio?
• Nunca, nunca… modificar el DOM desde el controlador!!
• El controlador nunca modificará el DOM!!
• Directivas: el único lugar lícito para modificar el DOM
• AngularJS tiene su filosofía, hay que seguirla
• Pensar siempre en términos de arquitectura
• AngularJS tiene su “propio jQuery” => jqLite
• La función link de las directivas son las elegidas!
![Page 61: Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015](https://reader031.fdocuments.us/reader031/viewer/2022030318/58eddbc21a28ab66208b46e7/html5/thumbnails/61.jpg)
José Manuel García · MADRID · NOV 27-28 · 2015
testing
![Page 62: Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015](https://reader031.fdocuments.us/reader031/viewer/2022030318/58eddbc21a28ab66208b46e7/html5/thumbnails/62.jpg)
¿Cómo será el camino?
![Page 63: Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015](https://reader031.fdocuments.us/reader031/viewer/2022030318/58eddbc21a28ab66208b46e7/html5/thumbnails/63.jpg)
José Manuel García · MADRID · NOV 27-28 · 2015
![Page 64: Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015](https://reader031.fdocuments.us/reader031/viewer/2022030318/58eddbc21a28ab66208b46e7/html5/thumbnails/64.jpg)
José Manuel García · MADRID · NOV 27-28 · 2015
![Page 65: Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015](https://reader031.fdocuments.us/reader031/viewer/2022030318/58eddbc21a28ab66208b46e7/html5/thumbnails/65.jpg)
¡¡Aún hay más“complementos”!!
![Page 66: Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015](https://reader031.fdocuments.us/reader031/viewer/2022030318/58eddbc21a28ab66208b46e7/html5/thumbnails/66.jpg)
José Manuel García · MADRID · NOV 27-28 · 2015
¡Más cosas interesantes!
• Campos en formularios: pristine, dirty, touched…
• Angular nivel pro: $injector, $location, decoradores…
• Routing, securización, interceptores, login, I18N…
• Angular 2.0* (:-P)
![Page 67: Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015](https://reader031.fdocuments.us/reader031/viewer/2022030318/58eddbc21a28ab66208b46e7/html5/thumbnails/67.jpg)
José Manuel García · MADRID · NOV 27-28 · 2015
¡Más cosas interesantes!
![Page 68: Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015](https://reader031.fdocuments.us/reader031/viewer/2022030318/58eddbc21a28ab66208b46e7/html5/thumbnails/68.jpg)
José Manuel García · MADRID · NOV 27-28 · 2015
¡Más cosas interesantes!
![Page 69: Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015](https://reader031.fdocuments.us/reader031/viewer/2022030318/58eddbc21a28ab66208b46e7/html5/thumbnails/69.jpg)
A programaaaarrr!!!!
![Page 70: Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015](https://reader031.fdocuments.us/reader031/viewer/2022030318/58eddbc21a28ab66208b46e7/html5/thumbnails/70.jpg)
MADRID · NOV 27-28 · 2015
https://github.com/semagarcia/angularjs-codemotion-2015
![Page 71: Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015](https://reader031.fdocuments.us/reader031/viewer/2022030318/58eddbc21a28ab66208b46e7/html5/thumbnails/71.jpg)
![Page 72: Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015](https://reader031.fdocuments.us/reader031/viewer/2022030318/58eddbc21a28ab66208b46e7/html5/thumbnails/72.jpg)
![Page 73: Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015](https://reader031.fdocuments.us/reader031/viewer/2022030318/58eddbc21a28ab66208b46e7/html5/thumbnails/73.jpg)