アニメーションを読み込んでアニメーションを読み込んでいる間に、アルゴリズムが遅い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> 

を、我々はangular-loading-barプラグインを使用するすべてのプロジェクトではmyTask.js

function algorithm(){ 
    return 1+1; 
} 


postMessage(algorithm()); 

Answer 2

であなたのアルゴリズムを置きます。

モジュールに依存関係として追加するだけで、自動的にすべてのXHR要求にインターセプタが追加されます。

あなたはここに例を確認することができます。

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