データがロードされている間、Angular JSの高速解決と低速コントローラページは空です

Question

私はこのようなmain.htmlを持っています。名前カードとシステムの詳細が一定のままで、コンテンツはビューに応じて変化し続けます。

 <div ui-view="nameCard"></div> 
     <div ui-view="systemDetail"></div> 
     <div ui-view="content"></div> 

imルーティング用にuiルートを使用しています。あるビューから別のビューに切り替えると、解決が最初に起こります（ここではページが最初に読み込まれます）、次にコントローラの初期化が行われ、データがロードされます。怠け者のコントローラのために、ユーザはしばらくの間空白のページで見るために残されます。 Spinnerロジックを追加する場所と方法は、ユーザーがデータが読み込まれるまでスピナーで見られるようにするためです。彼がボタンをクリックするとき、解決が起こる前にスピナーを有効にし、投稿がうまくいった後にスピナーを隠したいと思っています。メインページでそれを聞いてください。またはコンテンツページに追加する必要があります

Answer 1

この

$scope.$on('$viewContentLoaded', function(){ 
    // add show spinner code here 
}); 

のような状態の変化にスピナーを有効にして

$scope.$on('$viewContentLoaded', function(){ 
    // add hide spinner code here 
}); 

Answer 2

はあなたがHTMLの下にあると仮定したときに、コンテンツのロードを無効

<div class="icon-spinner" ng-show="displaySpin"> 

ルート変更が発生したとき、あなたは、関数でスピナーディスプレイ用$rootscope変数をバインドすることができます。

$rootScope.$on("$stateChangeStart", 
    function (event, toState, toParams, fromState, fromParams) { 
     $rootScope.displaySpin = true; 
    }); 

ページがロードされると、コントローラが初期化されるとき、 は、コントローラの1行目に次の操作を行います。

$rootScope.displaySpin = false;