<htmlday> 2013でやったことプラスアルファ。 足りなかった部分はすごい広島 #4内で調査しました。

<htmlday> では AngularJS で遊びました

AngularJS を rails で使うのに使えそうな gemの調査

とりあえず、Ruby Toolboxで angularを検索してみました。

候補としては

と、乱立状態でした。他にもありましたけど、見る元気はありませんでした。

結論をまとめておくと

  • 素の AngularJs でいいのなら angularjs-rails
  • generatorなど、もしかすると便利になるものがあるかもしれないのが angular-gem

という感じでした。

まずは、angular-rails を試しました。generator などついていますが、AngularJSの本体が更新されていない状態でした。 また、添付されている angle.js を読み込みすると動作しなかったりと問題もちらほらありました。

次にみたのは angularjs-rails です。これは Javascriptが添付されているだけのシンプルなものでした。添付されているものも最新で、unstable な最新バージョンも添付されていました。読み込みたいだけならこれで良さそうです。x

unstableなバージョンをよみこむ場合は application.js に

//= require_tree ./angular/unstable

と、かけば良さそうです。

3番目に angular-gem です。前述の angularjs をフォークして複数のversion のAngularJSを取りこんでいたりと、なかなか意欲的です。

4つ目は angular-rails-engin です。angular_include_tag というヘルパーを提供してくれて、必要に応じて読込みして使う感じになるようです。

とりあえず、 angular-gem を試していこうかなと思います。

<html ng-app> を書けないのでその対処方法

AngularJs では

<html ng-app>

のような書き方をして、機能拡張をする場合は、myModule を作成して、

<html ng-app="myModule">

のようにします。

しかし、haml slim を利用していると、自動生成されてしまって書けそうにない。

書けない場合は JavaScriptでなんとかできました。

angular.element(document).ready(function() {
  angular.bootstrap(document, ['myModule']);
});

と書くと、前述のものと等価になります。