目的:
Revel内でAngularJSを使うのに少しコツがいるので環境絡みをまとめておく
環境:
go version 1.3.1
revel
angularJSは最新のもの
概要:
このような環境でAngularJSを使うにはいくつか問題があります。参考文献にもありますがdelimiterが被りっているてんです。どちらかを{{ }}以外にしないとrevelの方が優先されてしまいます。そこで参考文献を参照して自由度が高いrevelのdelimiterを変更しました。その後AngularJSを被せるという方針にしました。
ソースコードと詳細説明:
revel側のdelimiter変更方法です。こちらは参考文献そのままです。私は"[[ ]]"に変更しました。
template.delimiters="[[ ]]"
を追加しています。重要なのは"[[ ]]"の部分です。必ず"[["の次にスペースを入れてください。入れないとErrorになります。変更後は自動生成されるhtmlないの"{{ }}"は無効になるので"[[ ]]"に一括変換しています。
次にAngularJSのsetupですが、とりあえず動かしたかったので以下のようにしました。単純にlink貼っただけです。以下の1行をheader.htmlに追加しました。
<script src="http://code.angularjs.org/1.2.9/angular.min.js"></script>
これで終了です。実際の動作を確認するためにサンプルを動かしてみます。
[[set . "title" "Home"]]
[[template "header.html" .]]
<header class="hero-unit" style="background-color:#A9F16C">
<div class="container">
<div class="row">
<div class="hero-text">
<h1>It works!</h1>
<p></p>
</div>
</div>
</div>
</header>
<div class="container">
<div class="row">
<div class="span6">
[[template "flash.html" .]]
<div ng-init="qty=1;cost=2">
<b>Invoice:</b>
<div>
Quantity: <input type="number" ng-model="qty" required>
</div>
<div>
Costs: <input type="number" ng-model="cost" required>
</div>
<div>
<b>Total:</b> {{qty * cost | currency}}
</div>
</div>
</div>
</div>
</div>
[[template "footer.html" .]]
無事に動きました。
参考文献
設定完了:http://qiita.com/koizuka/items/972b35a5024d1d63d127
サンプル:http://dev.classmethod.jp/client-side/javascript/angularjs-2/