Question

我有一个关于在执行I / O时显示/隐藏ajax加载动画的最佳实践问题。目前，我正在使用以下代码处理动画：

JS

app.controller('MyController', function($scope, Resource) {
    $scope.loading = true;
    Resource.query(function(response) {
        $scope.loading = false;
        $scope.items = response;
    });
});

HTML

<ul ng-controller="MyController">
    <div ng-if="loading">
        <img src="/assets/ajax-loader.gif">
    </div>
    <li ng-repeat="item in items">{{ item }}</li>
</ul>

这是处理ajax加载器显示/隐藏的最佳方法吗？我看到一些可扩展性问题，因为我开始添加多个模块，并且必须为每个模块存储单独的loading值。

Answer 1

以下是一些解决方案：

https://github.com/chieffancypants/angular-loading-bar

https://github.com/zhoutuoy/ngRainbow

其中一些操纵服务中的css。但是代码很好地记录了为什么。我希望这有帮助。

Answer 2

用于实现此行为的技术是创建自己的拦截器（如标题所示）拦截任何XHR请求。

有关这方面的更多信息，请参阅AngularJS文档： http://code.angularjs.org/1.2.8/docs/api/ng。$ HTTP＃description_interceptors

它有一个很好的文档示例。您还可以搜索堆栈溢出以获得良好的方法。请注意，响应拦截器（不要与拦截器混淆）在较新的AngularJs版本中已弃用。

或者您想要一个一体化的解决方案，您可以查看calebboyd建议的众多开源项目之一。

在AngularJS中显示AJAX加载条

2 个答案: