AngularJSとRailsのインテグレーションと言うと、やれ「RailsはAPIに専念してビューは全部AngularJSだ！」という極端な話になりがちな気がするのですが、それだとRailsの良いところが活かせませんよね。AngularJSの持ち味はDOM操作三昧で複雑になりがちな画面を良い感じにコーディングできるところにあると思うので、そういう画面でだけAngularJSを使ってはどうか？というのが今回のアイデアです。
丁度良い感じに使う
そういう訳で今回作ったサンプルのアプリとソースコードがこちらになります。
ユーザー認証はふっつーにdeviseを使って、Todoを編集する画面だけAngularJSを利用している、という感じのサンプルコードになります。
- AngularJSを利用しているページはAngularJSでゴリゴリRIAな感じの処理を書ける
- AngularJSを利用していないページはRailsの機能でサクサク書ける
というのを目指したい、というのがコンセプトのコードになっています。
Rails側の切り口としては、
- HTMLをユーザーに返すことだけ専念するController
- AngularJSとの通信に専念するController
という形で切り分けるのが良いのではないかと思います。HTMLを返すコントローラで同時にJSONを返すこともできますが、AngularJS側の都合で違う返し方をして欲しいときに、コードの見通しが悪くなるのではないかと思って切り分けています。
また、AngularJS側はページ毎にAngularJSのアプリを定義するのが良いのではないかと思っています。上記で言うと、app/assets/javascripts/app/tasks以下にTodoページを構成する全てのAngularJSのコードが配置されている、という状況です。
余談ですが、ファイルの拡張子が.js.erbになっている理由は、AngularJSから呼び出すHTMLテンプレートのパスを指定する際にsprocketsのasset_pathメソッドを利用する必要があるためです。asset_pathを利用しないと、assets:precompile時にパスが変わってしまいますからね。
今回のエントリはコンセプトの部分にとどめておいて、次回からサンプルアプリのコードの解説を少しずつ連載していこうと思います。
追記：コード解説編を書きました
