angularjs - How to loading indicator in angular service -

i need make show user ajax request still being executed.

i have angular module:

var mymodule = angular.module('mymodule', [     'ngroute',     'ngcookies',     'localization',     'mycontrollers',     'myservices' ]); 

my service looks like:

var myservices = angular.module('myservices', ['ngresource']); myservices.factory('myinfo', ['$resource',function($resource){     return $resource('/api/:method', {}, {         getsettings: {method:'post', params:{method:'get_my_settings'}},         getinfo: {method:'post',params:{method:'get_my_info'}}     }); }]); 

and controller:

var mycontrollers = angular.module('mycontrollers', []); mycontrollers.controller('somectrl', ['$scope', 'myinfo',    function($scope, myinfo) {       $scope.myinfo = myinfo.getinfo();    } ]); 

everything works fine! how can start doing action before sending request , finish action when request complete , response received?

ajax in jquery has parameters "beforesend" , "complete" can define before send , when request complete.

how in angular?

thanks

angular give access $http module have pendingrequests property.

see example : https://github.com/angular-app/angular-app/blob/master/client/src/common/services/httprequesttracker.js

they're creating service :

angular.module('services.httprequesttracker', [])  .factory('httprequesttracker', ['$http',     function($http) {          var httprequesttracker = {};         httprequesttracker.haspendingrequests = function() {             return $http.pendingrequests.length > 0;         };          return httprequesttracker;     } ]) 

then can create directive showing ajax loader (or else) when service returns pending request :

angular.module('directives.ajaxloader', [     'services.httprequesttracker' ])  .directive('ajaxloader', ['httprequesttracker',     function(httprequesttracker) {         return {             templateurl: 'common/ajaxloader.tpl.html',             restrict: 'ea',             replace: true,             scope: true,             link: function($scope) { // function can have more parameters after $scope, $element, $attrs, $controller                 $scope.haspendingrequests = function() {                     return httprequesttracker.haspendingrequests();                 };             }         };     } ]) 

ajaxloader.tpl.html :

<div class="fade" ng-class="{in: haspendingrequests(), out: !haspendingrequests()}">     loading ... </div> 

hope helps