AngularJSロードプログレスバー

Question

AngularJSを使用し、$location.path('/path')を使用してリダイレクトすると、新しいページに、特にモバイルで読み込みに時間がかかります。

ロードするためのプログレスバーを追加する方法はありますか？ YouTubeのようなものがありますか？

Answer 1

YouTubeの進行状況バーについては、ngprogressをご覧ください。その後、あなたのアプリの設定直後に（例えば）intercept route's eventsとすることができます。

など何かをする：それは、例えば読み込みに時間がかかり、次の経路である場合

app.run(function($rootScope, ngProgress) { 
    $rootScope.$on('$routeChangeStart', function() { 
    ngProgress.start(); 
    }); 

    $rootScope.$on('$routeChangeSuccess', function() { 
    ngProgress.complete(); 
    }); 
    // Do the same with $routeChangeError 
}); 

Answer 2

コントローラが実行される前にajaxコールを作成し（ルート上でconfigを解決する）、$ route serviceの$ routeChangeStart、$ routeChangeSuccess、$ routeChangeErrorイベントを使用します。

これらのイベントをリッスンし、その$ scopeでブール型変数を管理するトップレベルコントローラ（outside ng-view）を登録します。

ng-showでこの変数を使用すると、「読み込んでください、お待ちください」divにオーバーレイされます。

次のルートが高速にロードされる（つまりコントローラがすぐに実行される）が、コントローラによって要求されたデータがロードされるまでに時間がかかる場合は、コントローラのスピナの可視状態を管理する必要があります。ビュー。以下のような

何か：ここ

$scope.data = null; 
$http.get("/whatever").success(function(data) { 
    $scope.data = data; 
}); 

<div ng-show="data !== null">...</div> 
<div ng-show="data === null" class="spinner"></div> 

Answer 3

使用角度ローディングバー

スタンドアロンデモ..ここ https://github.com/danday74/angular-loading-bar-standalone-demo

Answer 4

は、私は自分のアプリケーションで使用している実用的なソリューションです。 ngProgressは、URLを変更するときにロードバーを表示するのに最適なライブラリです。

Lucのソリューションではなく、ngProgressの代わりにngProgressFactoryを注入することを忘れないでください。

angular.module('appRoutes', []).run(function ($rootScope, ngProgressFactory) { 
    $rootScope.$on("$routeChangeStart", function() { 
     $rootScope.progressbar = ngProgressFactory.createInstance(); 
     $rootScope.progressbar.start(); 

    }); 

    $rootScope.$on("$routeChangeSuccess", function() { 
     $rootScope.progressbar.complete(); 
    }); 
}); 

更新11月 - 2015 - クロムのタイミングで、このアプローチを分析した後、私は、これはロードバーを追加するための正しい方法ではないであろうことを認めました。もちろん、ローディングバーは訪問者に表示されますが、実際のページ読み込みタイミングとは同期しません。

Answer 5

@ LucのアンカーngProgressが少し変わったので、今度はngProgressFactoryしか注入できません。これはngProgressインスタンスの作成に使用する必要があります。また@Ketanパティルの答えに反しあなただけインスタンス化するngProgress 一度：

angular.module('appRoutes', []).run(function ($rootScope, ngProgressFactory) { 

    // first create instance when app starts 
    $rootScope.progressbar = ngProgressFactory.createInstance(); 

    $rootScope.$on("$routeChangeStart", function() { 
     $rootScope.progressbar.start(); 
    }); 

    $rootScope.$on("$routeChangeSuccess", function() { 
     $rootScope.progressbar.complete(); 
    }); 
});