$30 off During Our Annual Pro Sale. View Details »

Introducción a Angular JS

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

César J. Aquino Maximiliano

December 20, 2014
Tweet

More Decks by César J. Aquino Maximiliano

Other Decks in Technology

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: [email protected]
    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