如何在 angularJS 上通过 $http 请求服务器时进行加载(旋转) [英] How to make a loading (spin) while requesting to server by $http on angularJS

问题描述

$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 上旋转

I want to show a progress bar or spin on bootstrap while http request on angularjs

推荐答案

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

Sugessting you to use this angular-loading-bar

步骤

1. 包括上面提到的脚本引用和cssgithub，你可以使用cdn以及提到的.

1. Include the script references and css as mentioned in the above github, you can use cdn as well as mentioned.

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

Add these two functions in your controller

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

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

包括 'angular-loading-bar', 'ngAnimate' 作为依赖项.

为应用配置添加以下代码

Add the below code for the app configurations

• 如果您正在寻找进度条

• If you are looking for the progress bar

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

如果您正在寻找旋转器

If you are looking for a spinner

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

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

Finally, In your $http request call the $scope.start() function and in your success method call the $scope.complete()

现场演示

这篇关于如何在 angularJS 上通过 $http 请求服务器时进行加载(旋转)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！