Introducción a AngularJS #OpenExpoDay 2014

Introducción a AngularJS@felixzapata

#OpenExpoDay

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

Fuente de la imagen: http://cdn.meme.li/i/kdig0.jpg

Fuente de la imagen: http://alicialiu.net/leveling­up­angular­talk/#/1

Pero luego al final...

Fuente de la imagen: http://a.memegen.com/j5lept.gif

Un poco de vocabulario antes

ModeloRepresentación de los datos que vamos a tratar.

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.

ControladorEncargado de inicializar y modificar la información que contienen los scopes en función de las

necesidades de la aplicación.

¿Qué es?Un framework open source creado y mantenido por el equipo de Google.

Desarrollado en 2009 por Miško Hevery y Adam Abrons.

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.

¿Qué ofrece?

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>

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.

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?

FiltrosCambiamos el modo de presentar la información que queramos.

Tenemos filtros predefinidos por AngularJS o podemos hacernos filtros propios.

{{ uppercase_expression | uppercase}}

ServiciosEl nexo de unión entre el controlador y la vista.

Según las necesidades,   services, factories y providers.hay de tres tipos:

En el "futuro"¿Dónde está mi coche volador?

Vale, ahora en serio How Google is redefining web development (and Backbone.js is gettingobsolete)

¿Te la vas a perder?ng­europe, primera conferencia europea sobre AngularJS

(22 al 23 de octubre de 2014)

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?

Libro recomendadoMastering Web Application Development with AngularJS