AngularJS es un framework JavaScript de código abierto creado por Google para desarrollar aplicaciones web de una sola página. Ofrece características como enlace de datos bidireccional, directivas, filtros y servicios que permiten separar la lógica empresarial de la interfaz de usuario. El documento proporciona una introducción a estos conceptos clave de AngularJS y recomienda recursos adicionales para aprender más sobre el framework.

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.
<div ng-app="myApp">
<ul ng-controller='ExampleController'>
<li ng-repeat="contacto in contactos">
{{contacto.nombre}} ({{contacto.telefono}})
</li>
</ul>
</div>

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.
<div ng-app='directiveExample'>
<hello></hello>
</div>
¿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.
{{ uppercase_expression | uppercase}}

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