放開這些得失，不考慮計較成敗，只是盡力地投入一項工作，意外地有著調整身心的效果。
所以有時會構思一些可以在週末完成的開發計劃，而今個星期的結果就是一個叫做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網頁
。
沒有留言:
發佈留言