<!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 */