anjularJs 添加页面加载动态效果

anjularJs真的是个好东西，让web开发变得更简单~，这里讲下用anjularJS开发的web页面，怎么添加动态加载效果

这里有三个必备的条件：

一：动态效果图

     可在线制作，这里给个网址:http://ajaxload.info/

将做好的动态图放到工程的webapp目录下，如：

二：controller 里边的scope包装的数据变量

加载数据完成时，改变loading值

三.ng-if 判断操作，ng-if=true时  元素下的内容才会显示出来

<span ng-model="tables" ng-if="!loading">{{tables|number}}</span><img ng-if="loading" src="images/ajax-loader-small.gif"/>张资源表,<span ng-model="indexs" ng-if="!loading">{{indexs|number}}</span><img ng-if="loading" src="images/ajax-loader-small.gif"/>条记录
<label><input ng-if='!loading' type="checkbox" ng-click="selectAll($event)" ng-checked="isSelectedAll()"><img ng-if="loading" src="images/ajax-loader-small.gif"/>全选</label>

效果图