ネットでRails x AngularJSで調べると、AssetsにAngularJSを追加してやるのが普通的なことをよく見る。でも、この方法だとYeomanや、Grunt.jsが使えず、Rails x AngularJSでKarmaでテストを書いたりといったことができないし、AngularJSの作法にのっとった開発ができないのがとてもモヤモヤしていた。
てことで、もうこれはAsset Pipelineを使わない方向で行くのがベストなんじゃないのか、という方向で色々探し回っていたら、同じようなことを考えていた方がいたようで,これを参考にしてもっとベーシックな枠組みを作ってみた。
Asset Pipeline の機能が使えなくなる？ご心配なく。Grunt.jsがJSコードの圧縮、SCSS, CoffeeScriptのコンパイル、さらにLiveloadの恩恵, 画像の圧縮、テストの自動実行もできる。
基本的な仕組みとしては、{RAILS_ROOT}/ngapp を作り、そこでyo angular でAngularの枠組みを作る。Grunt.js内で、yeomanConfigのdistを ../public にすることで、ビルドするとRailsの静的ファイルとして表示させるようにする。さらに、開発中はLiveLoadの恩恵を受けたいので、connectの部分にProxyとしてlocalhostをさすようにしてlocalhost:3000/api/にアクセスしに行くようにすれば、AngularのリクエストがRailsのAPIへ飛んで、連携がうまくできる仕組みになる。
つまり、 rails s と、 grunt server の2つを起動して開発していくスタイルになる。
Grunt.jsのおかげで、SCSSやCoffeeScriptも普通のRailsアプリを書くときと同じように書けるし、変更はリアルタイムで更新される。
いやー何より、自分はAngularのテストが書ける！っていうだけでそれだけで嬉しい。
これを発展させて、より開発効率の高いベースを構築していく予定。
P.S. AngularJS使ってるのに、RailsのERB使うなんて、論外なんだからね！
Railsは完全にAPIサーバ専用にする。そうするとスマホアプリ開発でも同じAPIを使ってアクセスできる。
Rails-API っていうGemがあるみたいなので、これでRailsのフルスタック構成から必要最低限のモジュールだけをとってきた軽いRailsアプリになるので、そっちに移す予定。
そうすればRailsの開発効率とAngularJSの効率をダブルでかねそろえた理想的な環境ができあがる！
