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>
           

效果圖