Rails Assets を使って Rails プロジェクトに AngularJS をインストール

JavaScript Rails Angular

Rails で AngularJS を使おうと思っていたけど、

  • ファイルをダウンロードして vendor/assets に直接配置するのは管理が面倒
  • AngularJS をラップした gem は AngularJS 本体がバージョンアップしたとき対応するまでタイムラグがある
    • そもそも angular-gem や angular-rails や angularjs-rails-resource など乱立してるし
  • Bower で AngularJS を管理するのがいいかも
    • Bower を動かすために Node が必須なので、Heroku デプロイ時に AngularJS をインストールできない
    • カスタム Buildpack を作れば可能だけど、アプリの本質ではないので労力をかけたくない。

という紆余曲折を経て、『Rails Assets』を使ってみることにした。

Rails Assets は、Bower のパッケージを gem にコンバートし、ホストしているサービス。 Gemfile に

source "https://rails-assets.org"

を追加し、

gem "rails-assets-<Bower パッケージ名>"

という形式で指定することで、Bundler で JavaScript ライブラリをインストールできる。

Rails で AngularJS を使いたい場合、

source "https://rails-assets.org"
gem "rails-assets-angular"
gem "rails-assets-angular-route"

と書いて bundle install でインストール。 このとき依存するライブラリもインストールしてくれる。

あとは app/assets/javascript/application.js に

//= require angular
//= require angular-route

と書けば、Asset Pipeline に AngularJS が組み込まれる。

Rails Assets は gem のインストールなので Bower 不要。Node も不要。 カスタム Buildpack を使わなくても Heroku で動かせる。