为AngularJS添加Ajax载入动画

因为效率问题，我的小项目使用AngularJS的http服务加载数据时会有明显的卡顿现象，需要一种机制告诉用户后台正在加载数据，让用户耐心等待，而不是以为网页没有响应。想到很多网站中使用的载入动画。

在网上找到一个很棒的例子，直接拿来使用。
《Angularjs loading screen on ajax request》
代码如下

使用AngularJS的directive指令来设置载入数据时需要显示的组件，当加载数据时，显示该组件，不加载时，隐藏该组件。通过$http服务的pendingRequests属性来检测是否有数据在加载，用统一的方式显示加载动画，不用为每一次ajax请求单独设置。
我在项目中使用Bootstrap的对话框加进度条构造加载动画

指令也被改为

显示效果如下图所示