A global ajax interceptor for Angular application, where it cancels all the previous state's ajax + http requests on state change. I am cancelling ajax requests also because some applications might still have some jquery utilities which does ajax requests.

GlobalAjaxInterceptor

angular.module('globalmodule')
    .config(['$provide', '$httpProvider', function($provide, $httpProvider){

        $provide.factory('GlobalAjaxInterceptor', ['$q', '$rootScope', function($q, $rootScope){

          var currentRequests={http: {}, ajax: {}};

          function addHttpRequest(conf){
            currentRequests.http[conf.url] = conf.promiseObj;
          }

          function addAjaxRequest(conf){
            currentRequests.ajax[conf.url] = conf.promiseObj;
          }


          function abortAllHttpRequests(httpRequests){
            angular.forEach(httpRequests, function(promise, url){
              promise && promise.resolve();
            });

          }

          function abortAllAjaxRequests(ajaxRequests){
            angular.forEach(ajaxRequests, function(xhr, url){
              xhr && xhr.abort();
            });
          }

          function abortAllOldRequests(){
              var oldRequests = angular.copy(currentRequests);

              currentRequests = {
                http: {},
                ajax: {}
              };

              abortAllHttpRequests(oldRequests.http);
              abortAllAjaxRequests(oldRequests.ajax);
              
          }

          $( document ).ajaxSend(function(event, xhr, options) {
            addAjaxRequest({url: options.url, promiseObj: xhr});
          });

          $rootScope.$on('$stateChangeSuccess', function () {
              abortAllOldRequests();
          });

            return {
              // On request success
              request: function (config) {
                var deferred = $q.defer();
                config.timeout = deferred.promise;

                addHttpRequest({url: config.url, promiseObj: deferred});
                
                return config;
              },
         
              // On request failure
              requestError: function (rejection) {
                // Return the promise rejection.
                return $q.reject(rejection);
              },
         
              // On response success
              response: function (response) {
                // Return the response or promise.
                return response || $q.when(response);
              },
         
              // On response failture
              responseError: function (rejection) {
                // Return the promise rejection.
                return $q.reject(rejection);
              }
            };
        }]);

        $httpProvider.interceptors.push('GlobalAjaxInterceptor');
    }]);

Dependencies are angular, angular ui-router, jquery.
On statechangeSuccess event, all the jquery ajax requests and angular $http requests of the previous state will be aborted.

nice one! I will try something similar to this.. can you please add .js to your gist file name, so the syntax will be highlighted ;)

Do you have any experience using $resource?