Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Consumiendo una API REST con AngularJS

Consumiendo una API REST con AngularJS

César Suárez Ortega

February 11, 2016
Tweet

More Decks by César Suárez Ortega

Other Decks in Programming

Transcript

  1. CONSUMIENDO UNA API REST
    CON ANGULARJS
    César Suárez Ortega
    II Jornadas Técnicas UEx – CIEMAT: Introducción a NoSQL con MongoDB
    9 – 11 de Febrero, 2016

    View Slide

  2. Índice
    Conceptos básicos
    Patrón MVC
    Inyección de dependencias
    Promesas
    AngularJS
    Práctica:
    Nuestra tienda online

    View Slide

  3. PATRONES
    DE
    DISEÑO

    View Slide

  4. Patrón MVC

    View Slide

  5. Patrón MVC
    API

    View Slide

  6. “Dependency
    Injection”
    is a 25-dollar term
    for a 5-cent concept.
    James Shore
    http://www.jamesshore.com/Blog/Dependency-Injection-Demystified.html

    View Slide

  7. Inyección de dependencias
    public class Example {
    private DatabaseThingie myDatabase;
    //SIN inyección de dependencias
    public Example() {
    myDatabase = new DatabaseThingie();
    }
    //CON inyección de dependencias
    public Example(DatabaseThingie useThisDatabaseInstead) {
    myDatabase = useThisDatabaseInstead;
    }
    public void doStuff() {
    myDatabase.GetData();
    }
    }

    View Slide

  8. Promesas
    var result = sloooooowSyncMethod();
    console.log(result);
    var promise = promiseAsyncMethod();
    promise.then(function(result) {
    console.log(result);
    });

    View Slide

  9. View Slide

  10. View Slide

  11. View Slide

  12. Sobre AngularJS
     Framework JavaScript
    Extiende HTML
    Muchas facilidades para organizar
    nuestro front-end.
    Aproximación declarativa.
    Touch me
    DEPRECATED

    View Slide

  13. PRÁCTICA
    #2

    View Slide

  14. $ curl –sL https://deb.nodesource.com/setup | sudo bash -
    $ sudo apt-get install nodejs build-essential ruby ruby-dev
    $ git clone https://github.com/csuarez/juc-mongodb-web.git
    $ cd juc-mongodb-web
    $ sudo npm –g install grunt-cli
    $ sudo npm –g install bower
    $ sudo gem install compass
    $ npm install
    $ bower install --allow-root
    $ grunt serve
    Arrancando la web
    https://github.com/csuarez/juc-mongodb-web

    View Slide

  15. AngularJS facts
     Framework JavaScript MVC
     Flexible
    Muchas facilidades para

    View Slide

  16. AngularJS facts

    View Slide

  17. View Slide