angular.js - angularJS怎么实现请求的数据还未加载完成时展示“正在加载”的提示？

问题描述

在点击button发出请求后，由于网络或者数据较大的原因，页面中的angularJS双向绑定数据部分不显示，页面结构很难看，怎么能实现在所有的数据加载完成之前，弹出层覆盖掉原网页并且提示“正在加载”，等所有的数据加载完成之后，再显示带有完整数据的网页。如下面的效果：

问题解答

https://github.com/cgross/angular-busy/blob/master/README.md 使用这个模块

事先做好遮罩层，发起请求时（一般都是 $http 或 $resource）显示遮罩，promise resolve 后关闭遮罩。

逻辑就是这么简单，但是因为出现的很频繁所以要考虑如何 DRY。

视图层面上，如果遮罩是全应用通用的就不要每个 route 里都写一遍，而是考虑写在比较上层的路由入口，让子路由共享。

调用层面，简单一点把遮罩状态保存在 $rootScope，使用 DI 来随取随用；讲究一点就写个 service 来控制。

遮罩本身可以封装成 directive 便于复用，不过这东西很简单，不封装也罢。