<!DOCTYPE html>
<html ng-app="app" ng-controller="AppCtrl">

  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.6/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.6/angular-resource.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="app.js"></script>
  </head>

  <body>
    Users via "response"
    <pre>
    {{users | json}}
    </pre>
    <hr>
    Users via "responseError"
    <pre>
    {{usersError | json}}
    </pre>
  </body>

</html>
var app = angular.module('app', ['ngResource'])
.controller('AppCtrl', function(
  $scope,
  $window,
  $resource,
  $http
) {
  
  
  /*
    This resource will resolve successfully (ignoring the data, just testing returning a promise)
  */
  
  var Users = $resource('http://jsonplaceholder.typicode.com/users', {}, {
    query: {
      method: 'GET',
      responseType: 'json',
      isArray: true
    }
  });
  
  /*
    This resource will fail and be handled by responseError interceptor below
  */
  
  var UsersError = $resource('http://google.com/asdflkajsdf;lksadf$%^&sdfsdfg', {}, {
    query: {
      method: 'GET',
      responseType: 'json',
      isArray: true
    }
  });
  
  $scope.users = Users.query();
  $scope.usersError = UsersError.query();
  
})
.config(function($httpProvider, $provide){
  
  $provide.factory('httpInterceptor', function($q, $injector){
    return {
      'response': function(data) {
        var deferred = $q.defer();
        var promise = deferred.promise;
        setTimeout(function(){
          deferred.resolve({data: ['response resolved']});
        }, 500)
        return promise;
      },
      'responseError': function(rejection) {
        var deferred = $q.defer();
        var promise = deferred.promise;
        setTimeout(function(){
          deferred.resolve({data: ['responseError resolved']});
        }, 500)
        return promise;
      }
    };
  });
  $httpProvider.interceptors.push('httpInterceptor');
})
;

/* Styles go here */