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

JUC2016 - Hands-on lab: Consumiendo una API Rest con AngularJS

CETA-Ciemat
February 11, 2016

JUC2016 - Hands-on lab: Consumiendo una API Rest con AngularJS

II Jornadas Técnicas UEx – CIEMAT. Hands-on lab: Consumiendo una API Rest con AngularJS

CETA-Ciemat

February 11, 2016
Tweet

More Decks by CETA-Ciemat

Other Decks in Technology

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 full-size slide

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

    View full-size slide

  3. PATRONES
    DE
    DISEÑO

    View full-size slide

  4. Patrón MVC
    API

    View full-size slide

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

    View full-size slide

  6. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  9. $ 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 full-size slide

  10. AngularJS facts
     Framework JavaScript MVC
     Flexible
    Muchas facilidades para

    View full-size slide

  11. AngularJS facts

    View full-size slide