AngularJS+spin.jsでOverlay(前編)

ajaxのように非同期な処理を実行中は、こんな画像(アニメーション)をオーバーレイ表示させて操作を受け付けなくするということをやりたい。

jQueryだと割と簡単にできた気もしますが、今回はAngularJSでやりたい。
さらに、ぐるぐる回るアニメーションを表示させるspin.jsを使いたい。

spin.jsを入れる

まずはspin.jsを導入。
リンク先の公式サイトからspin.min.jsを落として来て、配置と読込を済ませる。
spin.jsは依存ライブラリがないので、jQueryを使ったりしていなくても大丈夫。

angular-spinnerを入れる

次に、AngularJSでspin.jsを使うためにanguler-spinnerを導入します。
これも、リンク先のGitHubからangular-spinner.min.jsを持ってきて、配置と読込を行えばOK。

とりあえず試す

spin.jsとangular-spinnerが入れば、とりあえずぐるぐる回るアニメーションは表示できるようになります。
依存モジュールとして、angularSpinner、サービス名としてusSpinnerServiceを渡すことで、angular-spinnerを使用することができます。

angular.module("App",["angularSpinner"])
    .controller("appController",
            ["usSpinnerService",
                function(usSpinnerService){
                    usSpinnerService.spin('spinner');
                    //usSpinnerService.stop('spinner'); //停止するとき
                }
            ]
    );

<span us-spinner="{radius:30, width:8, length: 16}" spinner-key="spinner"></span>

usSpinnerServiceサービスのspinメソッドにspinner-keyを渡すことで、アニメーションが表示されます。
消すときはstopメソッドにspinner-keyを渡します。

これによって、画面にアニメーション表示はできますが、特に操作が制限されるわけではなく、背景もそのままです。
背景を薄暗くして操作をできないようにするやり方についてはまた次回。