Material‎ > ‎Software‎ > ‎Angular JS‎ > ‎

Manejo de $resource para pedidos REST

Objetivo

Una alternativa a utilizar el servicio $http para hacer pedidos REST es inyectar la dependencia a ngResource. Las principales diferencias son 
  • el servicio http es de bajo nivel
  • no lo podemos usar como dependencia de nuestros módulos, en cambio con resource instanciamos el servicio y después lo inyectamos como dependencia de un módulo.

Dependencias

Primero que nada debemos agregar la dependencia en el package.json
     "angular-resource": ">=1.3.15",

Y además en nuestra app debemos agregar también la dependencia al módulo ngResource:
var app = angular.module('...App', ['ngResource', ...]);

Por último, en el index.html debemos agregar el link al archivo js:
<script src="node_modules/angular-resource/angular-resource.min.js"></script>

Ejemplo de servicio

En lugar de mapear a mano la relación entre un servicio REST con un método http y un método del service de Angular:
app.service('Libros', function($http) {
    this.query = function(callback) {
      $http.get('/libros').success(callback);
    }
etc.

Lo hacemos en la definición del factory (devolviendo un objeto $resource):
app.factory('Libros', function($resource) {
    return $resource('/libros/:id', {'id': '@id'}, {
        'query': { method: 'GET', isArray: true},
        'update': { method: 'PUT' },
        'save': { method: 'POST' },
        'remove': { method:'DELETE' }
    });
});

Luego, en el controller, inyectamos el singleton Libros 
app.controller('TodosLosLibrosCtrl', function($resource, $timeout, cfpLoadingBar, Libros) {
y usamos los mensajes definidos anteriormente:
    this.verLista = function() {
        Libros.query(function(data) {
            self.libros = data;
        }, errorHandler);
    };
El errorHandler es opcional, es una función que permite definir cómo mostrar el mensaje de error que devuelve el servicio REST. 

En general lo que necesitamos para disparar el servicio REST es:
  • acceder al objeto Factory / Service inyectado en el controller en la definición
  • enviar el mensaje que está en la definición del mapa del lado izquierdo (la clave, que en nuestro caso podría ser query, update, save o remove)
  • opcionalmente, le podemos pasar valores definidos en el $resource (en nuestro caso el 'id' que se mapea contra la propiedad id del objeto que le pasemos)
  • una función o closure que le diga qué hacer al service cuando el servicio REST se llame exitosamente
  • opcionalmente, una función o closure que le diga qué hacer al service cuando ocurra un error

Vemos cómo funciona el ejemplo de la actualización de un libro, donde pasamos el identificador del libro como parámetro:
    this.guardarLibro = function() {
        Libros.update(this.libroSeleccionado, function() {
            self.notificarMensaje('Libro actualizado!');
            self.actualizarLista();
        }, errorHandler);

        this.libroSeleccionado = null;
        $("#editarLibroModal").modal('toggle');
    };
En el caso del update, el primer parámetro no es la función por éxito sino un objeto que representa al Libro (no es un número ni un código, sino el objeto de dominio Libro en javascript con sus propiedades y comportamiento).

Links relacionados

Comments