如何为$http请求添加进度条

app.factory('httpInterceptor', ['$q', function($q) {
  return {
    request: function(config) {
      // 在请求发送之前执行的逻辑
      // 显示进度条
      return config;
    },
    response: function(response) {
      // 在响应返回之后执行的逻辑
      // 隐藏进度条
      return response;
    },
    responseError: function(rejection) {
      // 在响应错误时执行的逻辑
      // 隐藏进度条
      return $q.reject(rejection);
    }
  };
}]);

app.config(['$httpProvider', function($httpProvider) {
  $httpProvider.interceptors.push('httpInterceptor');
}]);

app.factory('httpInterceptor', ['$q', 'progressBarService', function($q, progressBarService) {
  return {
    request: function(config) {
      progressBarService.show(); // 显示进度条
      return config;
    },
    response: function(response) {
      progressBarService.hide(); // 隐藏进度条
      return response;
    },
    responseError: function(rejection) {
      progressBarService.hide(); // 隐藏进度条
      return $q.reject(rejection);
    }
  };
}]);

app.factory('progressBarService', ['$rootScope', function($rootScope) {
  var progressBarService = {};

  progressBarService.show = function() {
    $rootScope.showProgressBar = true;
  };

  progressBarService.hide = function() {
    $rootScope.showProgressBar = false;
  };

  return progressBarService;
}]);

<div class="progress-bar" ng-show="showProgressBar"></div>