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

環境等

• 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;
}