Consumiendo una API REST con AngularJS

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. cesar.suarez@externos.ciemat.es
    

    View Slide