目的:

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/　