Material‎ > ‎Software‎ > ‎Angular 1.x con ES6‎ > ‎

Manejo de $resource para pedidos REST - ES6

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:
angular
.module('librosApp', ['ngAnimate', 'ngResource', 'chieffancypants.loadingBar'])

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 este caso vamos a definir un objeto service al que le inyectamos en el constructor el objeto $resource:
const librosService = ($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 librosService:
class LibrosController {
constructor($timeout, librosService) {
this.libros = []
this.librosService = librosService

y usamos los mensajes definidos anteriormente, por ejemplo para mostrar la información de los libros:
actualizarLista() {
this.librosService.query((data) => {
this.libros = data
}, this.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 (como en la búsqueda de un libro en particular, o la eliminación/actualización de un libro)
  • 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 eliminación de un libro, donde pasamos el identificador del libro como parámetro:

// ELIMINAR
eliminar(libro) {
const mensaje = "¿Está seguro de eliminar: '" + libro.titulo + "'?"
bootbox.confirm(mensaje, (confirma) => {
if (confirma) {
this.librosService.remove(libro, () => {
this.notificarMensaje('Libro eliminado!')
this.actualizarLista()
}, this.errorHandler)
}
})
}


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