环境等

• AngularJS:1.3.4

• Parse JS SDK:1.4.2

Angular Loading Bar:0.8.0

角度加载条

【官方链接】http://chieffancypants.github.io/angular-loading-bar/
【GitHub链接】https://github.com/chieffancypants/angular-loading-bar

在上面的示例图像中，body的顶部条和左上角的指示器（旋转）使用了Angular加载条进行显示。非常简洁。您也可以轻松地只使用条或指示器之一（本次省略）。[请参考此处]

似乎可以通过拦截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’（如果不使用API，则为’angular-loading-bar’）。

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

显示加载栏（示例代码为TypeScript）。

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