Posted at

[AngularJS] [Parse.com] シンプルなローディングバーライブラリを手軽に使う

More than 3 years have passed since last update.


環境等


  • AngularJS:1.3.4

  • Parse JS SDK:1.4.2

  • Angular Loading Bar:0.8.0


Angular Loading Bar

[Official] http://chieffancypants.github.io/angular-loading-bar/

[GitHub] https://github.com/chieffancypants/angular-loading-bar

上のサンプル画像では、bodyの最上部のバーと左上のインジケータ(ぐるぐる)がAngular Loading Barで表示されています。

シンプルですね。

バーかインジケータのどちらかのみ使うことも簡単にできます(今回は割愛)。[こちらを参考]

Angularの $http のリクエストをフックして自動的にローディングバーを表示できるようですが、Parse.comを使用していると $http は使いません。

そこでAngular Loading Barが用意してくれているAPIを使います。と言ってもParse.comへのアクセス開始時にstart()、完了時にcomplete()を呼ぶだけです。簡単。では↓で使い方。


使い方


インストール

$ npm install angular-loading-bar

# または
$ bower install angular-loading-bar

または

<link rel='stylesheet' href='//cdnjs.cloudflare.com/ajax/libs/angular-loading-bar/0.8.0/loading-bar.min.css' type='text/css' media='all' />

<script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/angular-loading-bar/0.8.0/loading-bar.min.js'></script>

APIを使いたいのでこちらにあるとおり'cfp.loadingBar' をDIします(APIを使わないときは 'angular-loading-bar')。


index.js

    angular.module('myApp', ['cfp.loadingBar'])



ローディングバーの表示(サンプルコードはTypeScriptです)


sample.ts


var MyObject = Parse.Object.extend('MyObject');
var query = new Parse.Query(MyObject);

// ローディングバー スタート!
// complete()を呼ぶまで自動的にじわじわ進んで行きます。
// (100%の手前で止まります)
cfpLoadingBar.start();

// Parse SDKによる非同期処理
// この例ではfind()
query.find()
.then((results: Parse.Object[]) => {
// find成功時の処理(省略)

// ローディングバー完了(バーが右端まで一気に進みます)
cfpLoadingBar.complete();
},
(error: Parse.Error) => {
// find失敗時の処理(省略)

// 失敗時もローディングバー完了(バーが右端まで一気に進みます)
cfpLoadingBar.complete();
});


save()など他の処理でも使い方は同じ。

進捗度(パーセンテージ)などの指定をしたいときは公式を参考に。


[おまけ] BootStrapのNavBarの下に表示する

.bar {

/* navbarの高さ分下へ */
margin-top: 50px;
}