不肖者の人生実験: AngularUIのdatepickerを使ってみた

AngularUIって?

相変わらずAngularJSと格闘する日々が続いてます。先日AngularJSについてググってたら AngularUIなるものを見つけました。
当方、英語は読めないので推測ですが、どうやらAngularJSを拡張して色々なUIが使えるようになるようです。jQueryとjQueryUIみたいな関係です。
どんなものがあるかはリンク先を見てもらえばサンプルが沢山あるのでなんとなくわかると思います。
ちょっと必要に迫られてAngularUIのDatepicker（AngularUI内での名前はDateです）を使ってみました。その時の内容です。

準備編

まず必要なファイルをダウンロードします。
AngularUIの「Download」をクリックするとgithubのダウンロードページに行きます。
そのページからzipファイルをダウンロードします。今回はv0.4.0のzipを使いました。解凍して展開したディレクトリ「angular-ui-0.4.0」を適当なWebページにコピーします。Cakephpなら「webroot/js」です。
当然この他にAngularJSも必要ですがGoogleライブラリAPIの「ajax.googleapis.com」から読み込むのでダウンロードしません。
後、CSSのTwitterBootstrapもダウンロードしておきます。こちらはCakephpでいう所の「webroot/css」に放り込んでおきます。

設定編1 ファイルの読み込み

AngularUIを使えるようにphpファイルで設定が2つほど必要です。
注意:今回はDatepickerを使うための設定ですが、これで他のUI(例えばSelect2)はjavascriptでエラーが出て使えなかったので他にも設定やファイル必要かもしれません。注意終わり

htmlのheadタグ内でファイルの読み込み設定をします。
読み込むjsファイルは

jQuery
jQueryUI
AngularJS
AngularUI

です。読み込む順も上の通りでないとエラーが出るようです。
cakephpのコードで書くと

echo $this->Html->script('https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js') . "\n";
echo $this->Html->script('https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js') . "\n";
echo $this->Html->script('https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js') . "\n";
echo $this->Html->script('angular-ui-0.4.0/build/angular-ui') . "\n";

といった感じです。
またこの他にCSSファイルも読み込みます。

Twitter bootstrap
jQueryUI
AngularUI

こちらは順番関係無いはずです。試してませんが。
同じくCakephpのコードで書くと

echo $this->Html->css(array('bootstrap.min','bootstrap-responsive','cake_bootstrap','pazudoraken')) . "\n";
echo $this->Html->css(array('/js/angular-ui-0.4.0/build/angular-ui')) . "\n";
echo $this->Html->css(array('https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css')) . "\n";

設定編2 AngularJSのモジュール設定

続いてAngularJSにAngularUIを使うよ〜、って教えて上げます。（多分）
htmlの要素の中に「ng-app」をモジュール名付きで設定します。例えば以下の様にします。

<body ng-app="HogeModuleName">

このモジュール設定の辺りはよくわかって無いのですが、おそらく「ng-app」で設定した文字列がモジュール名になるようです。詳しいことはわからないので偉い方教えて下さい。m(_ _)m
続いてjs側でも設定します。

<script type="text/javascript">
//AngularUIを読み込む？
var HogeModuleName = angular.module('HogeModuleName', ['ui']);
//読み込んだAngularUIの初期設定？
HogeModuleName.value('ui.config', {
   select2: {    //AngularUIのUIの1つ「select2」の設定の模様。今回使用してないので要らない
      allowClear: true
   }
});

....
//何かAngularJSの処理
....

</script>

これで設定はOKです。

いざ！使ってみる。

Datepickerを表示したい箇所に以下を記述します。

<input ng-model="date"
ui-date="{ dateFormat: 'yy-mm-dd' }"
ng-change="hogeChange()">

すると、インプット要素が表示されてカーソルが移るとカレンダーが表示されるはずです。

見た感じ、カレンダー自体はjQueryUIのものを使用してるみたいですね。以上早く英語を勉強しなきゃと焦っているbusyoumono99がお送りしました。何かのお役に立てたらうれしいです。

参考にしたサイト

AngulaUI←のGetting StartedとDateの部分
StackOverflow - Getting Angular UI to work

環境とか

項目	内容
PHPフレームワーク	Cakephp 2.2.5
CSSフレームワーク	Twitter bootstrap 2.2.2
JSフレームワーク	AngularJS 1.0.4
IDE	SublimeText 2
開発環境?	MAMP
PC	iMac
OS	Mac OS Lion

不肖者の人生実験

2013年4月2日火曜日

AngularUIのdatepickerを使ってみた