angular.jsで「読み込み中」を表示する方法 - AngularOverlayで

angularjs

やりたいこと

サーバに通信してデータを取得する処理などに、完了するまで「読み込み中」とか「now loading」とか表示するアプリがあると思いますがあれを実装する方法をメモしておきます。
AngularOverlayというモジュールが公開されているのでこれを使ってみます。githubはこちらで公開されています。

1. ページにリンクを設置します
f:id:yoppy0066:20150219084945p:plain

2. リンクをクリックすると読み込み中画像がグルグル表示します
f:id:yoppy0066:20150219085153p:plain

取得中は画面操作できなくなります。で、完了すると画像も消えてページに戻ります

モジュール取得

githubで公開されているのでダウンロードします。または僕は面倒なのでgit cloneで落としてきます

cd /path/to/project
git clone https://github.com/DanWahlin/AngularOverlay.git

githubのreadmeにも書いてあるのですが、「読み込み中」のときのcssのサンプルがあるのでそのままコピーできます。
僕はちょっとだけいじりました。見た目の問題なので気にしないでください。

css

<style>
.overlayContainer { display: none;}
.overlayBackground { top:0px; left:0px; padding-left:100px;position:absolute;z-index:1000;height:100%;width:100%;background-color:#808080;opacity:0.3;}
.overlayContent { position:absolute; font-weight: bold;height: 100px;width: 300px;z-index:1000;text-align:center;}
</style>

html

<head>
<!-- angular本体と今回のモジュールを読み込みます -->
<script src="../bower_components/angular/angular.js"></script>
<script src="./AngularOverlay/app/directives/wcAngularOverlay.js"></script>
</head>
<body ng-app="App">
  <div ng-controller="ControllerIndex">

    <!-- ここをクリックするとサーバに問い合わせてデータを取得します。取得中は読み込み中となります -->
    <a href="#" ng-click="doGet()">get</a>

    <!-- 読込み中のときにここが表示されます -->
    <div wc-overlay wc-overlay-delay="300">
      <img src="./AngularOverlay/content/images/spinner.gif" /><br/>読み込み中
    </div>
  </div>
</body>

js

<script>
var App = angular.module("App", ["wc.Directives"]);
App.controller("ControllerIndex", function($scope, $http) {
  $scope.doGet = function() {
    $http({
      url: "http://movie-cube.net/angulartest/api.php",
      method: "post",
      headers: {'Content-Type': 'application/x-www-form-urlencoded'}
    }).success(function(response) {
      alert("読み込み完了!"!");
    });
  };
});
</script>

とくに読み込み中に関する処理は実装しなくても勝手にやってくれるみたいです。便利ですね

以上です