AngularJSとRailsの丁度良い関係を探る

Pocket

AngularJSとRailsのインテグレーションと言うと、やれ「RailsはAPIに専念してビューは全部AngularJSだ!」という極端な話になりがちな気がするのですが、それだとRailsの良いところが活かせませんよね。AngularJSの持ち味はDOM操作三昧で複雑になりがちな画面を良い感じにコーディングできるところにあると思うので、そういう画面でだけAngularJSを使ってはどうか?というのが今回のアイデアです。

丁度良い感じに使う

そういう訳で今回作ったサンプルのアプリとソースコードがこちらになります。

ユーザー認証はふっつーにdeviseを使って、Todoを編集する画面だけAngularJSを利用している、という感じのサンプルコードになります。

  • AngularJSを利用しているページはAngularJSでゴリゴリRIAな感じの処理を書ける
  • AngularJSを利用していないページはRailsの機能でサクサク書ける

というのを目指したい、というのがコンセプトのコードになっています。

20141117_ang

Rails側の切り口としては、

  • HTMLをユーザーに返すことだけ専念するController
  • AngularJSとの通信に専念するController

という形で切り分けるのが良いのではないかと思います。HTMLを返すコントローラで同時にJSONを返すこともできますが、AngularJS側の都合で違う返し方をして欲しいときに、コードの見通しが悪くなるのではないかと思って切り分けています。

todo-rails_app_assets_at_master_·_mahm_todo-rails

また、AngularJS側はページ毎にAngularJSのアプリを定義するのが良いのではないかと思っています。上記で言うと、app/assets/javascripts/app/tasks以下にTodoページを構成する全てのAngularJSのコードが配置されている、という状況です。

余談ですが、ファイルの拡張子が.js.erbになっている理由は、AngularJSから呼び出すHTMLテンプレートのパスを指定する際にsprocketsのasset_pathメソッドを利用する必要があるためです。asset_pathを利用しないと、assets:precompile時にパスが変わってしまいますからね。

今回のエントリはコンセプトの部分にとどめておいて、次回からサンプルアプリのコードの解説を少しずつ連載していこうと思います。

追記:コード解説編を書きました