Go
golang
AngularJS
Revel

Golang+Revel環境でAngularJSを使うTips

More than 3 years have passed since last update.


目的:

Revel内でAngularJSを使うのに少しコツがいるので環境絡みをまとめておく


環境:

go version 1.3.1

revel

angularJSは最新のもの


概要:

 このような環境でAngularJSを使うにはいくつか問題があります。参考文献にもありますがdelimiterが被りっているてんです。どちらかを{{ }}以外にしないとrevelの方が優先されてしまいます。そこで参考文献を参照して自由度が高いrevelのdelimiterを変更しました。その後AngularJSを被せるという方針にしました。


ソースコードと詳細説明:

 revel側のdelimiter変更方法です。こちらは参考文献そのままです。私は"[[ ]]"に変更しました。


/conf/app.conf

template.delimiters="[[ ]]"


を追加しています。重要なのは"[[ ]]"の部分です。必ず"[["の次にスペースを入れてください。入れないとErrorになります。変更後は自動生成されるhtmlないの"{{ }}"は無効になるので"[[ ]]"に一括変換しています。

 次にAngularJSのsetupですが、とりあえず動かしたかったので以下のようにしました。単純にlink貼っただけです。以下の1行をheader.htmlに追加しました。


/app/views/header.html

<script src="http://code.angularjs.org/1.2.9/angular.min.js"></script>


これで終了です。実際の動作を確認するためにサンプルを動かしてみます。


Index.html

[[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/