如何在angularJS上通过$http请求服务器时进行加载（旋转）答案

【问题标题】：How to make a loading (spin) while requesting to server by $http on angularJS如何在angularJS上通过$http请求服务器时进行加载（旋转）
【发布时间】：2017-06-22 12:57:28
【问题描述】：

$http({
      method: 'POST',
      url: '',
      headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    transformRequest: function(obj) {
        var str = [];
        for(var p in obj)
        str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
        return str.join("&");
    },
      data: {
      }
      }).then(function successCallback(response) {
          // this callback will be called asynchronously
          // when the response is available

        if(response.data == 'true'){
            swal("Good job!", "New case has been created", "success");
        }
    }, function errorCallback(response) {
      // called asynchronously if an error occurs
      // or server returns response with an error status.
    });

我想在 angularjs 上的 http 请求时显示进度条或在 bootstrap 上旋转

【问题讨论】：

您可以添加一个加载 div 或 img，然后在其上放置一个 ng-if 属性，在您开始请求之前将一些 showLoader 变量在您的 $scope 中设置为 true，然后然后在成功或错误时设置为false。
我的回答有帮助吗？
是的，它很有帮助，非常感谢
@Aravind 你能回答我的另一个问题吗？ stackoverflow.com/questions/42532079/…谢谢大佬的支持
@ShabeebCk 你已经有答案了！你还想要我的解决方案吗？

标签： angularjs twitter-bootstrap

【解决方案1】：

建议你使用这个angular-loading-bar

步骤

包括上面提到的脚本引用和 css github，你可以使用cdn以及提到的。

在你的控制器中添加这两个函数

$scope.start = function() {
  cfpLoadingBar.start();
};

$scope.complete = function () {
   cfpLoadingBar.complete();
}

将'angular-loading-bar', 'ngAnimate' 包含为依赖项。

为应用配置添加以下代码

如果你正在寻找进度条

app.config(['cfpLoadingBarProvider', function(cfpLoadingBarProvider) {
   cfpLoadingBarProvider.includeSpinner = false;
}])

如果您正在寻找微调器

app.config(['cfpLoadingBarProvider', function(cfpLoadingBarProvider) {
   cfpLoadingBarProvider.includeSpinner = true;
}])

最后，在您的 $http 请求中调用 $scope.start() 函数并在您的成功方法中调用 $scope.complete()

LIVE DEMO

【讨论】：

【解决方案2】：

一个简单的方法：

html:

<div class="spinner" ng-show="loading"></div>

js:

$scope.loading = true
$http.post(...).then(function(response){
  $scope.data = response.data // or whatever you needs...
  $scope.loading = false
},function(){
  $scope.loading = false
  console.log("error")
})

如果你想概括，你也可以看看http拦截器：https://docs.angularjs.org/api/ng/service/$http#interceptors

【讨论】：