AngularJS with Rails

#tqrk07でのLTの一部です。
AngularJSとRailsを組み合わせてWEBアプリケーションを作りたい人のために書きました。

AnuglarJSをどのようにして管理するか

Bundler

Railsの中でAngularJSを扱います。
そのための準備は gem 'angularjs-rails' これだけです。
この時の主従関係は Rails が主であり、AngularJS が従であると言えます。
普段と同じように jsファイルは assets 以下に配置するので、Railsに元々備わっている asset pipeline が有効です。
Googleで"AngularJS Rails"と検索すると、こちらのやり方ばかり引っかかるので恐らくBundlerで管理するのがポピュラーなんだと思います。

ちなみに、 egghead.io では、bower-railsを使ってAngularJSを管理する方法を紹介しています。
package.jsonでAngularJSを管理するということ以外、Bundlerで管理するのと大した違いは無さそうです。

Bower

Railsとは別にAngularJS Appを構築します。
つまり、AngularJS(クライアントサイド)とRails(サーバーサイド)の役割を完全に切り離し、RailsにはAPI ServerとしてJSONをレンダリングする仕事だけを与えます。
クライアントサイドの構築にはBower, Grunt, Yeomanというようなエコシステムを利用します。

ちなみに、僕はこちらの方法を採用しています。
理由としては

• erbの中にAngularJSのDSLが混入するのは見栄えが良くないと感じたから
• AngularJSとRailsの境界線が曖昧だと具合が悪くなりそうだから
• サーバーサイドのフレームワークの変更にも柔軟に対応出来るから

です。
詳細はGithubをご覧下さい。
https://github.com/nekova/animatch

Tips

このTipsは既にAngulaJS Appをbuildする段階まで来ている人向けです。
フロントエンドのエコシステムを利用してAngularJS Appの開発をする場合、Railsのasset pipelineに頼ることは出来ません。
ですから、buildをする際には、 $ grunt build というタスクを実行してjsやcssをminifyします。
しかし、grunt buildでは親ディレクトリをminifyファイルの生成先に指定することは出来ないので、Rails Appのrootディレクトリにあるpublic/に直接渡すことは出来ません。
つまり、minifyしたファイルをpublicディレクトリに自分でcopyする必要があるのです。
この問題を解決するためのRake taskを用意しましょう。

build_ngapp.rake

namespace :ngapp do
  desc "run 'grunt build' and copy the dist to public dir"
  task :build do
    system('grunt build --gruntfile ngapp/Gruntfile.js')
    system('rm -rf public/*')
    system('cp -r ngapp/dist/ public/')
  end
end

まず、通常通りgrunt buildでminifyした後に、publicディレクトリを掃除します。
最後にngapp/distにあるminifyされたファイルをpublicディレクトリにコピーするというタスクです。

AngularJS, Rails and You?

AngularJSの学習コストの高さに面食らって、なかなかスピードに乗った開発が出来ませんでしたが、1ヶ月ほど触っていると徐々に感覚が掴めてきました。
僕はAngularのDSLが嫌いではないので今後も使い続けたいと思っています。
このポストが誰かの助けになれば幸いです。