顯示加載動畫，而慢算法工作AngularJS

Question

我想在算法工作時在頁面顯示加載動畫。我如何使用角度承諾做到這一點？例如：

<div ng-hide='algEnded' > Content to hide while alg. works</div> 
<div ng-hide='!algEnded' > <img href='img/loading.svg'> </div> 

Answer 1

對於耗時的任務，您可以使用Web Workers。

angular.module('myModule').service(myService); 

function myService($q){ 

    function calculate(){ 
     return $q(function(resolve, reject){ 
       var myWorker = new Worker("myTask.js"); 

       myWorker.onmessage = function (e) { 
        resolve(e.data); //resolve promise when worker posts data 
        myWorker.terminate(); 
       }; 
     }); 
    } 

    this.calculate = calculate; 
} 

angular.module('myModule').controller(MyController); 

function MyController(myService){ 
    var vm = this; 

    this.calculate = function(){ 
      algEnded = false; 
      myService.calculate().then(function(){ 
       algEnded = true; 
      }); 
    } 
} 

修改HTML這樣的：

<div ng-controller="MyController as vm"> 
    <div ng-hide='vm.algEnded' > Content to hide while alg. works</div> 
    <div ng-hide='!vm.algEnded' > <img href='img/loading.svg'> </div> 
</div> 

，並把你的算法myTask.js

function algorithm(){ 
    return 1+1; 
} 


postMessage(algorithm()); 

Answer 2

在每一個項目中，我們使用angular-loading-bar插件。

您只需將它作爲依賴添加到您的模塊，它會自動爲所有XHR請求添加攔截器。

你可以在這裏檢查的例子：

https://chieffancypants.github.io/angular-loading-bar/