Introducción a AngularJS #OpenExpoDay 2014
-
Upload
openexpoes -
Category
Technology
-
view
184 -
download
4
description
Transcript of Introducción a AngularJS #OpenExpoDay 2014
![Page 1: Introducción a AngularJS #OpenExpoDay 2014](https://reader033.fdocuments.us/reader033/viewer/2022060203/559d66841a28abea5d8b4571/html5/thumbnails/1.jpg)
Introducción a AngularJS@felixzapata
#OpenExpoDay
![Page 2: Introducción a AngularJS #OpenExpoDay 2014](https://reader033.fdocuments.us/reader033/viewer/2022060203/559d66841a28abea5d8b4571/html5/thumbnails/2.jpg)
Qué hagoDesarrollador senior front end y consultor de accesibilidad web en .Organizador del grupo meetup .Organizador del grupo meetup .Coorganizador del grupo meetup .Coorganizador del grupo meetup .Aerotranstornado: piloto online P1 y controlador S1 (aspirante a S2) en la red .
Adesis NetlifeWordPress MadridMadrid Sass & CompassAccesibilidad SpainAngularJS Madrid
VATSIM
![Page 3: Introducción a AngularJS #OpenExpoDay 2014](https://reader033.fdocuments.us/reader033/viewer/2022060203/559d66841a28abea5d8b4571/html5/thumbnails/3.jpg)
Fuente de la imagen: http://cdn.meme.li/i/kdig0.jpg
![Page 4: Introducción a AngularJS #OpenExpoDay 2014](https://reader033.fdocuments.us/reader033/viewer/2022060203/559d66841a28abea5d8b4571/html5/thumbnails/4.jpg)
Fuente de la imagen: http://alicialiu.net/levelingupangulartalk/#/1
![Page 5: Introducción a AngularJS #OpenExpoDay 2014](https://reader033.fdocuments.us/reader033/viewer/2022060203/559d66841a28abea5d8b4571/html5/thumbnails/5.jpg)
Pero luego al final...
Fuente de la imagen: http://a.memegen.com/j5lept.gif
![Page 6: Introducción a AngularJS #OpenExpoDay 2014](https://reader033.fdocuments.us/reader033/viewer/2022060203/559d66841a28abea5d8b4571/html5/thumbnails/6.jpg)
Un poco de vocabulario antes
![Page 7: Introducción a AngularJS #OpenExpoDay 2014](https://reader033.fdocuments.us/reader033/viewer/2022060203/559d66841a28abea5d8b4571/html5/thumbnails/7.jpg)
ModeloRepresentación de los datos que vamos a tratar.
![Page 8: Introducción a AngularJS #OpenExpoDay 2014](https://reader033.fdocuments.us/reader033/viewer/2022060203/559d66841a28abea5d8b4571/html5/thumbnails/8.jpg)
scopeContextos de ejecución sobre los que trabajan las expresiones de AngularJS.
Guarda la información de los modelos que se representan en la vista y también atributos que seutilizan para manejar la lógica de la misma.
![Page 9: Introducción a AngularJS #OpenExpoDay 2014](https://reader033.fdocuments.us/reader033/viewer/2022060203/559d66841a28abea5d8b4571/html5/thumbnails/9.jpg)
ControladorEncargado de inicializar y modificar la información que contienen los scopes en función de las
necesidades de la aplicación.
![Page 10: Introducción a AngularJS #OpenExpoDay 2014](https://reader033.fdocuments.us/reader033/viewer/2022060203/559d66841a28abea5d8b4571/html5/thumbnails/10.jpg)
¿Qué es?Un framework open source creado y mantenido por el equipo de Google.
Desarrollado en 2009 por Miško Hevery y Adam Abrons.
![Page 11: Introducción a AngularJS #OpenExpoDay 2014](https://reader033.fdocuments.us/reader033/viewer/2022060203/559d66841a28abea5d8b4571/html5/thumbnails/11.jpg)
FilosofíaProgramación declarativa.Separación de la manipulación del DOM de la lógica de la aplicación.Importancia de los tests.Separación del desarrollo del lado cliente de la del lado de servidor permitiendo desarrollos enparalelo.
![Page 12: Introducción a AngularJS #OpenExpoDay 2014](https://reader033.fdocuments.us/reader033/viewer/2022060203/559d66841a28abea5d8b4571/html5/thumbnails/12.jpg)
¿Qué ofrece?
![Page 13: Introducción a AngularJS #OpenExpoDay 2014](https://reader033.fdocuments.us/reader033/viewer/2022060203/559d66841a28abea5d8b4571/html5/thumbnails/13.jpg)
Client-side templateEn AngularJS el servidor proporciona los contenidos estáticos (plantillas) y la información que seva a representar (modelo) y es el cliente el encargado de mezclar la información del modelo con
la plantilla para generar la vista.
<div ng-app="myApp"> <ul ng-controller='ExampleController'> <li ng-repeat="contacto in contactos"> {{contacto.nombre}} ({{contacto.telefono}}) </li> </ul> </div>
![Page 14: Introducción a AngularJS #OpenExpoDay 2014](https://reader033.fdocuments.us/reader033/viewer/2022060203/559d66841a28abea5d8b4571/html5/thumbnails/14.jpg)
Data bindingLa primera vez que uno lo ve piensa que es brujería.
Sincronizamos el modelo y la vista automáticamente utilizando ciertas directivas de AngularJS.Esta sincronización es bidireccional, es decir, la información se sincroniza tanto si cambia el
valor en la vista como si lo hace el valor en el modelo.
![Page 15: Introducción a AngularJS #OpenExpoDay 2014](https://reader033.fdocuments.us/reader033/viewer/2022060203/559d66841a28abea5d8b4571/html5/thumbnails/15.jpg)
DirectivasExtensiones de HTML con la posibilidad de tener comportamiento propio.
<div ng-app='directiveExample'> <hello></hello> </div>
¿Os imagináis un Simon hecho en AngularJS?
![Page 16: Introducción a AngularJS #OpenExpoDay 2014](https://reader033.fdocuments.us/reader033/viewer/2022060203/559d66841a28abea5d8b4571/html5/thumbnails/16.jpg)
FiltrosCambiamos el modo de presentar la información que queramos.
Tenemos filtros predefinidos por AngularJS o podemos hacernos filtros propios.
{{ uppercase_expression | uppercase}}
![Page 17: Introducción a AngularJS #OpenExpoDay 2014](https://reader033.fdocuments.us/reader033/viewer/2022060203/559d66841a28abea5d8b4571/html5/thumbnails/17.jpg)
ServiciosEl nexo de unión entre el controlador y la vista.
Según las necesidades, services, factories y providers.hay de tres tipos:
![Page 18: Introducción a AngularJS #OpenExpoDay 2014](https://reader033.fdocuments.us/reader033/viewer/2022060203/559d66841a28abea5d8b4571/html5/thumbnails/18.jpg)
En el "futuro"¿Dónde está mi coche volador?
Vale, ahora en serio How Google is redefining web development (and Backbone.js is gettingobsolete)
![Page 19: Introducción a AngularJS #OpenExpoDay 2014](https://reader033.fdocuments.us/reader033/viewer/2022060203/559d66841a28abea5d8b4571/html5/thumbnails/19.jpg)
¿Te la vas a perder?ngeurope, primera conferencia europea sobre AngularJS
(22 al 23 de octubre de 2014)
![Page 20: Introducción a AngularJS #OpenExpoDay 2014](https://reader033.fdocuments.us/reader033/viewer/2022060203/559d66841a28abea5d8b4571/html5/thumbnails/20.jpg)
Enlaces de interésIntroducción a AngularJS¿Qué es AngularJS? Una breve introducciónConceptual OverviewYou may not need jQueryWhat is the difference between Polymer elements and AngularJS directives?
![Page 21: Introducción a AngularJS #OpenExpoDay 2014](https://reader033.fdocuments.us/reader033/viewer/2022060203/559d66841a28abea5d8b4571/html5/thumbnails/21.jpg)
Libro recomendadoMastering Web Application Development with AngularJS