2013年6月16日星期日

週末的軟件開發計劃 - Angular Loading Promise

有太多時候想做一件「實事」是非常之困難的,有無數的東西要先打點及考慮,無論是資源,人際關係,市場等等, 結果與想做的事越走越遠。

放開這些得失,不考慮計較成敗,只是盡力地投入一項工作,意外地有著調整身心的效果。


所以有時會構思一些可以在週末完成的開發計劃,而今個星期的結果就是一個叫做Angular Loading Promise的套件:



當你做一個網頁的時候,有時候會希望可以當所有資源都載入之後才顯示,在這之前則顯示Loading Spinner的提示。

而這個套件的作用就是讓你的Angular應用可以輕鬆地做到這個功能,甚至不用寫上JavaScript.

例子:


<html ng-app="bn.loadingPromise">
<head>
    <title>Demo1 - Use it without coding</title>
</head>
<script src="lib/angular.js"></script>
<script src="../src/bnloadingpromise.js"></script>

<body>
    <div bn-promise-show="loading">
        Loading <img src="assets/ajax-loader.gif">
    </div>
    
    <div bn-promise-hide="loading">
        All the content loaded.
    </div>
    
    <div style="width:680px;" bn-promise-show="success">
        <img src="assets/01.jpg" bn-promise>
        <img src="assets/02.jpg" bn-promise>
        <img src="assets/03.jpg" bn-promise>
        <img src="assets/04.jpg" bn-promise>
    </div>

</body>

</html>

示範:


在以上的例子裏只是使用了3個directive : bn-promise , bn-promise-show , bn-promise-hide。

bn-promise
只要把bn-promise加入標籤,那影像的載入就會被追蹤

bn-promise-show / bn-promise-hide
二者的的作用跟ng-show及ng-hide差不多,視乎狀況決定DOM tree的顯示與否
雖然bn-promise-show不及ng-show般用途廣泛,但因為針對資源載入,可以簡單地設定loading spinner。


例如說:

<div bn-promise-show="loading"> Loading... </div>

以上的內容只有在Loading時會顯示,當所有資源都載入後就會自動消失。

那樣就能簡單地做出Loading spinner的效果。

註:進階使用方法請參考Github網頁


沒有留言:

Creative Commons License
本網誌Ben Lau製作,以共享創意署名-非商業性-相同方式共享 3.0 香港 授權條款釋出。