Allow users to extend restangularizePromise (and/or decorate $object) for customization

I’ve been using Restangular for some time now. It’s a fantastic library (IMO due in large part to the “restangularized” Promise object).

I’d like to be able to add some custom behavior to a “restangularized” Promise. I can halfway do what I want using addResponseInterceptor but I think a much better solution would be to allow users to extend the special methods added to a “restangularized” promise. For example:

function restangularizePromise(promise, isCollection, valueToFill) {
    promise.call = _.bind(promiseCall, promise);
    promise.get = _.bind(promiseGet, promise);
    promise[config.restangularFields.restangularCollection] = isCollection;
    if (isCollection) {
        promise.push = _.bind(promiseCall, promise, 'push');
    }
    promise.$object = valueToFill;

    // New code below
    if (config.restangularizePromiseInterceptor) {
        config.restangularizePromiseInterceptor(promise);
    }
    // New code above

    return promise;
}

This would allow a lot of additional flexibility for Restanglar users. For instance:

var restangularizePromiseInterceptor = function(promise) {
  promise.$object.$isLoading = true;
};

var responseInterceptor = function(data, operation, what, url, response, deferred) {
  delete deferred.promise.$object.$isLoading;

  return data;
};

var restangular =
  Restangular.withConfig(
    function(RestangularConfigurer) {
      RestangularConfigurer.
        setRestangularizePromiseInterceptor(restangularizePromiseInterceptor).
        addResponseInterceptor(responseInterceptor);
    });

Now I could write a directive to wrap any view objects depending on async data being loaded by Restangular to display an is-loading status indicator until the HTTP request completes, like so:

<div>
  <div ng-if="$object.$isLoading" class="loading-indicator">
    <i class="fa fa-circle-o-notch fa-spin"></i>
    Loading..
  </div>

  <div ng-if="!$object.$isLoading">
    <div ng-transclude></div> <!-- Only show content once Restangular finishes loading -->
  </div>
</div>

This seems like a small change that would allow a lot of great flexibility for Restangular users. Please consider approving my pull request.

Thanks!

[christiaanwesterbeek]

If you wind up here trying to solve the problem of the loading indicator easily with Restangular like I did. Here’s how you can do it today.

First configure the RestangularProvider like so:

angular
    .module('MyApp')
    .config(configureRestangular);

configureRestangular.$inject = ['RestangularProvider'];
function configureRestangular(RestangularProvider) {

    // Add a convenient isLoading boolean to the $object
    RestangularProvider.setRestangularizePromiseInterceptor(function(promise) {
        promise.$object.$isLoading = true;
        promise.finally(function() {
            delete promise.$object.$isLoading;
          });
    });
}

In your controller, set the scope with the Restangular resource $object:

angular
    .module('MyApp')
    .controller('MyCtrl', fn);

    fn.$inject = ['$scope', 'Restangular'];
    function fn($scope, Restangular) {
        $scope.list = Restangular.all('transports').getList().$object;
    }

In your html implement something like this:

<md-list flex>
    <md-subheader ng-show="list.$isLoading">Loading...</md-subheader>
    <md-list-item ng-repeat="item in list">
        <h4 class="id id-transports">{{ item.id }}</h4>
    </md-list-item>
<md-list flex>

[christiaanwesterbeek]

Without seeing you code, it’s hard for me to tell. When it’s not working do you see an error in the console log of you browser?