AngularJS で ngTouchとngAnimate を導入したメモ

AngularJS 1.2 で対応されたらしい ngTouche と ngAnimate を導入したメモです。
特にモバイルの場合、タッチイベントの最適化やスワイプの対応は必須かなと。
（何もしないと、タッチイベントはダブルタップ判定待ちで 300ms の遅延があるらしい。）

スワイプのデモはこちら ⇒ http://hkusu.github.io/AngularJS_ngTouch_demo/

導入手順

※前提として AngularJS本体が 1.2 以降である必要があります。

• こちらと同じ手順で、Yeoman で AngularJS の雛形を生成。必須ではないが ui bootstrap も導入しておく。
• 追加で ngTouche と ngAnimate をインストール

$ bower install angular-touch --save
$ bower install angular-animate --save

• index.html からインクルード

index.html

<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>

• AnguraJSに組み込み。下記のように2行を追記

app.js

'use strict';

angular.module('ngTouchTestApp', [
  'ngCookies',
  'ngResource',
  'ngSanitize',
  'ngRoute',
  'ui.bootstrap',
  'ngTouch',       ←追記
  'ngAnimate'      ←追記
  ])
  .config(['$routeProvider', function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  }]);

以上で終わりです。

使ってみる

ngTouch

• 参考URL：http://docs.angularjs.org/api/ngTouch
• ngTouchは上記のようにいれるだけで ng-click が高速化（ダブルタップ判定の300msを無視）されるらしい
• ngSwipeLeft と ngSwipeRight は、その名の通り 左スワイプと右スワイプ
• 導入は次のような感じ。

main.html

<div class="container">
    <hr>
    <div ng-show="!showActions" ng-swipe-left="showActions = true">
        この文字列を左にスワイプしてください！
    </div>
    <div ng-show="showActions" ng-swipe-right="showActions = false">
        ボタンが出てきました。隠すには右にスワイプしてください！
        <button class="btn btn-danger" ng-click="">ボタン</button>
    </div>
    <hr>
</div>

デモ ⇒ http://hkusu.github.io/AngularJS_ngTouch_demo/

ngAnimate

• 参考URL
  • http://docs.angularjs.org/api/ngAnimate
  • http://www.nganimate.org
• CSSでアニメーションをつけれるらしいです。今回はあれなので略します(震え声)

おわりに

上記のデモのように、モバイルではタッチイベントやスワイプは必須だと思うので、うまく活用したいところ！

あと上記で書き忘れましたが、モバイル用に viewport はきちんと設定しておきましょう。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

幅を端末幅にあわせ（これに合わせてBootstrapもレスポンシブになり）、ピンチイン/ピンチアウトは禁止にしています。