Introducción a AngularJS

Presentación utilizada en la charla "Introducción a AngularJS" celebrada en el OpenExpo Day

Transcript

1. Introducción a AngularJS @felixzapata #OpenExpoDay
2. Qué hago Desarrollador 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 Netlife WordPress Madrid Madrid Sass & Compass Accesibilidad Spain AngularJS Madrid VATSIM
3. Fuente de la imagen: http://cdn.meme.li/i/kdig0.jpg
4. Fuente de la imagen: http://alicialiu.net/leveling­up­angular­talk/#/1
5. Pero luego al final... Fuente de la imagen: http://a.memegen.com/j5lept.gif
6. Un poco de vocabulario antes
7. Modelo Representación de los datos que vamos a tratar.
8. scope Contextos 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 se utilizan para manejar la lógica de la misma.
9. Controlador Encargado de inicializar y modificar la información que contienen los scopes en función de las necesidades de la aplicación.
10. ¿Qué es? Un framework open source creado y mantenido por el equipo de Google. Desarrollado en 2009 por Miško Hevery y Adam Abrons.
11. Filosofía Programació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 en paralelo.
12. ¿Qué ofrece?
13. Client-side template En AngularJS el servidor proporciona los contenidos estáticos (plantillas) y la información que se va a representar (modelo) y es el cliente el encargado de mezclar la información del modelo con la plantilla para generar la vista. < d i v n g - a p p = " m y A p p " > < u l n g - c o n t r o l l e r = ' E x a m p l e C o n t r o l l e r ' > < l i n g - r e p e a t = " c o n t a c t o i n c o n t a c t o s " > { { c o n t a c t o . n o m b r e } } ( { { c o n t a c t o . t e l e f o n o } } ) < / l i > < / u l > < / d i v >
14. Data binding La 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.
15. Directivas Extensiones de HTML con la posibilidad de tener comportamiento propio. < d i v n g - a p p = ' d i r e c t i v e E x a m p l e ' > < h e l l o > < / h e l l o > < / d i v > ¿Os imagináis un Simon hecho en AngularJS?
16. Filtros Cambiamos el modo de presentar la información que queramos. Tenemos filtros predefinidos por AngularJS o podemos hacernos filtros propios. { { u p p e r c a s e _ e x p r e s s i o n | u p p e r c a s e } }
17. Servicios El nexo de unión entre el controlador y la vista. Según las necesidades, services, factories y providers. hay de tres tipos:
18. En el "futuro" ¿Dónde está mi coche volador? Vale, ahora en serio How Google is redefining web development (and Backbone.js is getting obsolete)
19. ¿Te la vas a perder? ng­europe, primera conferencia europea sobre AngularJS (22 al 23 de octubre de 2014)
20. Enlaces de interés Introducción a AngularJS ¿Qué es AngularJS? Una breve introducción Conceptual Overview You may not need jQuery What is the difference between Polymer elements and AngularJS directives?
21. Libro recomendado Mastering Web Application Development with AngularJS