CODEWITHSUNDEEP
angularjs
bfcamara
bfcamara

Reputation: 323

AngularJS: need to fire event every time an ajax call is started

I am trying to fire an event on $rootScope every time an ajax call is started.

var App = angular.module('MyApp');

App.config(function ($httpProvider) {
    //add a transformRequest to preprocess request
    $httpProvider.defaults.transformRequest.push(function () {
        //resolving $rootScope manually since it's not possible to resolve instances in config blocks
        var $rootScope = angular.injector(['ng']).get('$rootScope');
        $rootScope.$broadcast('httpCallStarted');

       var $log = angular.injector(['ng']).get('$log');
       $log.log('httpCallStarted');
    });
});

The event 'httpCallStarted' it's not being fired. I suspect that it's not correct to use $rootScope or any other instance service in config blocks. If so, how can I get an event everytime an http call is starting, without having to pass a config object in every time I am making a call?

Thanks in advance

Upvotes: 16

Views: 20895

Answers (4)

Ryan O'Neill
Ryan O'Neill

Reputation: 3757

I have verified that this code will work as you expect. As I mentioned above, you are not retrieving the injector that you think you are and need to retrieve the one being used for your app.

discussionApp.config(function($httpProvider) {
  $httpProvider.defaults.transformRequest.push(function(data) {
    var $injector, $log, $rootScope;
    $injector = angular.element('#someid').injector();

    $rootScope = $injector.get('$rootScope');
    $rootScope.$broadcast('httpCallStarted');

    $log = $injector.get('$log');
    $log.log('httpCallStarted');
    return data;
  });
});

Upvotes: 12

Onur Yıldırım
Onur Yıldırım

Reputation: 33634

Cagatay is right. Better use $http interceptors:

app.config(function ($httpProvider, $provide) {
    $provide.factory('httpInterceptor', function ($q, $rootScope) {
        return {
            'request': function (config) {
                // intercept and change config: e.g. change the URL
                // config.url += '?nocache=' + (new Date()).getTime();
                // broadcasting 'httpRequest' event
                $rootScope.$broadcast('httpRequest', config);
                return config || $q.when(config);
            },
            'response': function (response) {
                // we can intercept and change response here...
                // broadcasting 'httpResponse' event
                $rootScope.$broadcast('httpResponse', response);
                return response || $q.when(response);
            },
            'requestError': function (rejection) {
                // broadcasting 'httpRequestError' event
                $rootScope.$broadcast('httpRequestError', rejection);
                return $q.reject(rejection);
            },
            'responseError': function (rejection) {
                // broadcasting 'httpResponseError' event
                $rootScope.$broadcast('httpResponseError', rejection);
                return $q.reject(rejection);
            }
        };
    });
    $httpProvider.interceptors.push('httpInterceptor');
});

I think interceptors works for versions after 1.1.x. There was responseInterceptors before that version.

Upvotes: 12

Cagatay Kalan
Cagatay Kalan

Reputation: 4126

The best way to do this is to use an http interceptor. Check this link

Upvotes: 4

Ben Lesh
Ben Lesh

Reputation: 108481

You could always wrap $http in a service. Since services are only set up one time, you could just have the service factory set up the events for you. It feels a little hackish to me, honestly, but it's a good work around, since Angular doesn't have a global way to do this yet, unless something was added in 1.0.3 that I'm not aware of.

Here's a plunker of it working

And here's the code:

app.factory('httpPreConfig', ['$http', '$rootScope', function($http, $rootScope) {
    $http.defaults.transformRequest.push(function (data) {
        $rootScope.$broadcast('httpCallStarted');
        return data;
    });
    $http.defaults.transformResponse.push(function(data){ 
        $rootScope.$broadcast('httpCallStopped');
        return data;
    })
    return $http;
}]);

app.controller('MainCtrl', function($scope, httpPreConfig) {
  $scope.status = [];

  $scope.$on('httpCallStarted', function(e) {
    $scope.status.push('started');
  });
  $scope.$on('httpCallStopped', function(e) {
    $scope.status.push('stopped');
  });

  $scope.sendGet = function (){ 
    httpPreConfig.get('test.json');    
  };
});

Upvotes: 17

Related Questions