加载...

位置：
年龄：
身高：
俱乐部：

加载完成：

Anthony Lopes
葡萄牙
位置：守门员
年龄：26
高度：184厘米
俱乐部：里昂奥林匹克

我想应用加载图标（spinny wheel或其他东西）来表示它正在等待来自API的响应。

我假设我需要设置加载状态并将其附加到变量，然后说出ng-if="loadingContent()"或其他内容，然后创建一个函数来显示加载状态。

是吗？如果可以的话，可以为我充实这个过程吗？

如果没有，你是怎么做到的？

提前致谢。

Answer 1

您可以使用cgbusy指令： https://github.com/cgross/angular-busy

将文件包含在HTML中，并将cgBusy作为依赖项添加到您的应用中：

angular.module('myApp', ['cgBusy']);

您可以设置加载模板并将其包含在HTML中，如下所示：

<div cg-busy="{promise: myPromise.$promise, message: 'Loading...',backdrop:true}"></div>

您现在必须将$ scope.myPromise绑定到您的API调用（应该返回一个承诺），如：

$scope.myPromise = $http.post("/echo/json/", data).success(function(data, status) {
        $scope.hello = data;
    });

这样，只要API调用繁忙，加载模板（您可以编辑）就是可见的。您可以将其添加到您想要的任何API调用中，也可以为其他调用添加其他模板。

您可以在指令中轻松自定义所有内容，在提供的Github页面上阅读更多内容。

Answer 2

只需在AJAX / HTTP调用完成时分配一个布尔范围变量。在我的例子中，我只使用了5秒的$timeout。

<强> JS /角：

$scope.isLoaded = false;
    $timeout(function() {
        $scope.isLoaded = true;
    }, 5000)
}

<强> HTML：

<!-- This element is displayed while loading -->
<div ng-if="!isLoaded" id="loading-container">
    <div id="loading-inner">
        <img src="http://loadinggif.com/images/image-selection/27.gif" />
    </div>

    <h4>Loading...</h4>
    Position: <br/>
    Age: <br/>
    Height: <br/>
    Club:<br/>
</div>

<!-- This element is displayed after loading is complete -->
<div ng-if="isLoaded">
    <h4> Loading finished:</h4>
    Anthony Lopes<br/>
    Portugal<br/>
    Position: Goalkeeper<br/>
    Age: 26<br/>
    Height: 184 cm<br/>
    Club: Olympique Lyonnais<br/>
</div>

老实说，我可以在演示中花几个小时来设置加载屏幕，但这足以让你顺利上路，这样你就可以理解它是如何工作的。

如果您使用Angular的$http函数来执行API调用，您可以像这样设置变量：

$scope.isLoaded = false;

$http({
    method: 'GET',
    url: '/someUrl'
}).then(function successCallback(response) {
    $scope.isLoaded = true;
});

<强> WORKING EXAMPLE

Answer 3

以下方法可以使用：

模板代码：

<div>
    <div ng-if="isLoading" class="loaderIcon">
    </div>

    <div ng-if="!isLoading">
        <div>
            Main Content
            </div>
    </div>
</div>

Contorller代码：

app.controller('mainCntrl', function($scope, backendService) {

    function successCallback(res) {
        $scope.isLoading = false;
    }

    function failureCallback(res) {
        $scope.isLoading = false;
    }

    $scope.fetchData = function() {
        $scope.isLoading = true;
        backendService.fetchData(successCallback, failureCallback);
    }

});

服务代码：

app.service('backendService', function($http) {
    this.fetchData = function(successCallback, failureCallback) {
        $http.put('url', data).then(function(res) {
            successCallback(res);   
        }, function(res) {
            failureCallback(res);
        });
    };

});

实施＆＃39; loading＆＃39;等待服务器响应时的图标（AngularJS）

加载...

加载完成：

3 个答案: