angular.js - angularJS怎麼實作請求的資料還未載入完成時展示「正在載入」的提示？

Question

在點擊button發出請求後，由於網路或資料較大的原因，頁面中的angularJS雙向綁定資料部分不顯示，頁面結構很難看，怎麼能實現在所有的資料載入完成之前，彈出層覆蓋掉原網頁並且提示“正在載入”，等所有的資料載入完成之後，再顯示帶有完整資料的網頁。
如下面的效果：

Answer 1

https://github.com/cgross/angular-busy/blob/master/README.md 使用這個模組

Answer 2

事先做好遮罩層，發起請求時（一般都是 $http 或 $resource）顯示遮罩，promise resolve 後關閉遮罩。

邏輯就是這麼簡單，但因為出現的很頻繁所以要考慮如何 DRY。

視圖層面上，如果遮罩是全應用通用的就不要每個 route 裡都寫一遍，而是考慮寫在比較上層的路由入口，讓子路由共享。

呼叫層面，簡單一點把遮罩狀態保存在 $rootScope，使用 DI 來隨取隨用；講究一點就寫個 service 來控制。

遮罩本身可以封裝成 directive 便於復用，不過這東西很簡單，不封裝也罷。