Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introducción a AngularJS

Introducción a AngularJS

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

5c086974327e7f3da17333e836f1a9ba?s=128

fzberlinches

June 26, 2014
Tweet

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