Ver la galería de libros

Por defecto cuando se ingresa a la aplicación o cunado el usuario selecciona refresh, se despliega la galería de libros como se muestra en la figura 1. Figura 1.

Interacción del usuario y llamado al api rest

Tomaremos de ejemplo el mostrar la galería de los libros para ilustrar una secuencia de control en la interfaz usuario desde que el usuario hace clic en Refresh en la interfaz de Book.

EL template tiene asociado con el botón el llamado a la función fetchRecords de su controlador; el controlador construye un [promise][cg] para delegar en el servicio la invocación al servicio rest a través de $http de angular. Si el promise regresa correctamente (then) se actualiza el resultado del llamado rest que viene en response.data en la variable del scope llamada records. El template html de book utiliza esta colección para desplegar la galería.

Cuando la respuesta que se recibe no es exitosa (es decir código de error 4xx o 5xx), se ejecuta la función pasada como segundo parámetro, en este caso responseError. Para más información sobre esta función ver [conceptos generales][cg].

this.fetchRecords = function () {
    return svc.fetchRecords().then(function (response) {
        $scope.records = response.data; // Asigna al scope los datos obtenidos
        $scope.currentRecord = {}; // Limpia los datos temporales de currentRecord
        self.editMode = false; // Desactiva el modo edición para ver la lista de registros.
        return response;
    }, responseError);
};

Envío de petición con $http

Cuando se invoca la función fetchRecords de bookService, este hace una petición a la URL /books con método GET usando la librería $http de AngularJS:

mod.service("bookService", ["$http", "bookContext", "$log", function ($http, context, $log) {
    // ...

    this.fetchRecords = function () {
        return $http.get(context);
    };

    // ...
}]);

Este método retorna un promise para ser utilizado por el controlador quien lo invocó.

La variable context se define en una constante del módulo bookModule llamada bookContext y define la URL base a la cual debe hacerse la petición. Esto se encuentra en el archivo book.mod.js.

(function (ng) {
    var mod = ng.module("bookModule", ["ui.bootstrap", "ngMessages"]);
    mod.constant("bookContext", "api/books"); // Definición de bookContext
})(window.angular);

El siguiente diagrama de secuencia muestra el orden de los llamados. El llamado del ctlr al srv es asíncrono y lo mismo el llamado del srv al api rest.