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
   

   View Slide

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
   
   
   

   View Slide

3. ¿QUÉ ES ANGULAR JS?
   

   View Slide

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.
   

   View Slide

5. ¿SPA?
   

   View Slide

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
   

   View Slide

7. ¿POR QUÉ
   ANGULAR JS?
   

   View Slide

8. No manoseas el DOM para acceder al
   valor de un elemento.
   

   View Slide

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.
   

   View Slide

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.
    

    View Slide

11. Filters
    Los filters nos permiten modificar el modo en el
    que se va a presentar la información al usuario.
    {{ información | filter }}
    

    View Slide

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.
    

    View Slide

13. ¿Creías que eso era todo?
    

    View Slide

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.
    

    View Slide

15. MVC
    

    View Slide

16. CONTROLADOR
    Es el código con la lógica que comunica el
    modelo con la vista.
    

    View Slide

17. MODELO
    Son los datos, que junto con la plantilla
    producen las vistas.
    

    View Slide

18. VISTA
    Lo que el usuario visualiza. Parte de una
    plantilla, se funde con el modelo y se
    renderiza en el árbol DOM.
    

    View Slide

19. … y WordPress?
    

    View Slide

20. Ya lo saben, es genial...
    

    View Slide

21. Muchas Gracias
    + angular js:
    www.google.com/search?q=angularjs
    + repo AngularPress:
    bit.ly/angularpress
    + info:
    cesaraquino.info
    + presentaciones:
    speakerdeck.com/jovenred
    

    View Slide