Introducción a Angular JS

Charla introductoria a Angular JS para el meetup Wordpress Perú Diciembre 2014. Repo del tema AngularPress http://bit.ly/angularpress

Transcript

1. INTRODUCCIÓN A César Jefferson Aquino Maximiliano (@jovenred) #WPPERU
2. Nombre: César Jefferson Aquino Maximiliano Ocupación: - Web Developer Orange 612 - Profesor I.S.T.P. ISMEM - Freelance - Bombero Voluntario Twitter: @jovenred Email: cesar@jovenred.com Web: cesaraquino.info </info> <info>
3. ¿QUÉ ES ANGULAR JS?
4. ¿QUÉ ES ANGULAR JS? - Framework de Javascript. - Mantenido por el equipo de Google - Creado en el 2009 por Misko Hevery y Adam Abrons - Adopta el modelo MVC, aunque ellos mismos lo definen como MVW. - Extiende el lenguaje HTML. - Nos ayuda a desarrollar SPA.
5. ¿SPA?
6. Single Page Apps Aplicaciones que no refrescan toda la página Maximizan la experiencia del usuario Tiene Operaciones complejas: - Manipulación DOM - Routing - Data Binding
7. ¿POR QUÉ ANGULAR JS?
8. No manoseas el DOM para acceder al valor de un elemento.
9. Two-way Data binding Con AngularJS podemos sincronizar el modelo y la vista automáticamente. 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.
10. Directives Mediante el uso de las mismas podemos extender la sintaxis de HTML y darle el comportamiento que deseemos. Podemos crear directives a nivel de elemento, de atributo, de clase y de comentario.
11. Filters Los filters nos permiten modificar el modo en el que se va a presentar la información al usuario. {{ información | filter }}
12. Services Los services son los encargados de comunicarse con el servidor para enviar y obtener información que después será tratada por los controllers para mostrarla en las vistas.
13. ¿Creías que eso era todo?
14. Reausability. Permite crear componentes (directivas) reutilizable. Aísla su función haciendo que no choque con otros. Testing. Al tener componentes aislados, podemos testear su comportamiento de manera independiente. Inyección de dependencias. Si necesitamos hacer uso de un servicio, lo inyectamos en nuestro controlador directamente y funciona.
15. MVC
16. CONTROLADOR Es el código con la lógica que comunica el modelo con la vista.
17. MODELO Son los datos, que junto con la plantilla producen las vistas.
18. VISTA Lo que el usuario visualiza. Parte de una plantilla, se funde con el modelo y se renderiza en el árbol DOM.
19. … y WordPress?
20. Ya lo saben, es genial...
21. Muchas Gracias + angular js: www.google.com/search?q=angularjs + repo AngularPress: bit.ly/angularpress + info: cesaraquino.info + presentaciones: speakerdeck.com/jovenred