Rails環境にBowerを使って Mobile Angular UI を導入してみる。
※BowerはTwitter社が開発したフロントエンド周りのパッケージマネージャ(Node.jsでいうnpmやJavaでいうGradleみたいな位置付け)

Bowerのインストール

npmを使ってbowerをインストール。(事前にnpmをインストールしておく必要あり)

$ npm install bower

bower-railsのインストール

bower-railsを利用するとRakeタスクでbowerの実行ができるようになる。RailsプロジェクトのGemfileにbower-railsを追加し、bundle install。

gem "bower-rails", "~> 0.9.2"

Bowerで依存ライブラリをインストール

依存ライブラリの定義はJSON形式とBundlerライクなRubyのDSLで定義する方法があり、今回は後者を採用。

rails g bower_rails:initialize

を実行するとプロジェクトルートにBowerfileが、設定ファイルがconfig/initializers/bower_rails.rbに生成される。
生成されたBowerfileに使用するライブラリを定義する。

asset 'angular'
asset 'bootstrap-sass-official'
asset 'mobile-angular-ui'

Bowerで利用可能なライブラリはこのサイトで確認可能。

Bowerで依存ライブラリをインストールする↓

rake bower:install
...
bower angular#*             not-cached git://github.com/angular/bower-angular.git#*
bower angular#*                resolve git://github.com/angular/bower-angular.git#*
bower mobile-angular-ui#*   not-cached git://github.com/mcasimir/mobile-angular-ui.git#*
bower mobile-angular-ui#*      resolve git://github.com/mcasimir/mobile-angular-ui.git#*
bower bootstrap-sass-official#*       not-cached git://github.com/twbs/bootstrap-sass.git#*
bower bootstrap-sass-official#*          resolve git://github.com/twbs/bootstrap-sass.git#*
bower mobile-angular-ui#*               download https://github.com/mcasimir/mobile-angular-ui/archive/1.2.0-beta.11.tar.gz
bower bootstrap-sass-official#*         download https://github.com/twbs/bootstrap-sass/archive/v3.3.4.tar.gz
bower angular#*                         download https://github.com/angular/bower-angular/archive/v1.3.15.tar.gz
bower bootstrap-sass-official#*          extract archive.tar.gz
bower mobile-angular-ui#*                extract archive.tar.gz
bower bootstrap-sass-official#*         mismatch Version declared in the json (3.3.3) is different than the resolved one (3.3.4)
bower angular#*                          extract archive.tar.gz
bower bootstrap-sass-official#*         resolved git://github.com/twbs/bootstrap-sass.git#3.3.4
bower mobile-angular-ui#*               resolved git://github.com/mcasimir/mobile-angular-ui.git#1.2.0-beta.11
bower angular#*                         resolved git://github.com/angular/bower-angular.git#1.3.15
bower jquery#>= 1.9.0                 not-cached git://github.com/jquery/jquery.git#>= 1.9.0
bower jquery#>= 1.9.0                    resolve git://github.com/jquery/jquery.git#>= 1.9.0
bower jquery#>= 1.9.0                   download https://github.com/jquery/jquery/archive/2.1.4.tar.gz
bower jquery#>= 1.9.0                    extract archive.tar.gz
bower jquery#>= 1.9.0                   resolved git://github.com/jquery/jquery.git#2.1.4
bower bootstrap-sass-official#*          install bootstrap-sass-official#3.3.4
bower mobile-angular-ui#*                install mobile-angular-ui#1.2.0-beta.11
bower angular#*                          install angular#1.3.15
bower jquery#>= 1.9.0                    install jquery#2.1.4

bootstrap-sass-official#3.3.4 bower_components/bootstrap-sass-official
└── jquery#2.1.4

mobile-angular-ui#1.2.0-beta.11 bower_components/mobile-angular-ui

angular#1.3.15 bower_components/angular

jquery#2.1.4 bower_components/jquery

これでvendor/assets/bower_components以下にBowerfileで定義したライブラリがインストールされる。

Railsの設定

application.jsやapplication.cssに

//= require mobile-angular-ui
//= require mobile-angular-ui/dist/js/mobile-angular-ui.gestures
 *= require mobile-angular-ui
 *= require mobile-angular-ui/dist/css/mobile-angular-ui-base.min
 *= require mobile-angular-ui/dist/css/mobile-angular-ui-desktop.min

と記載すればJSやCSSがロードされるようになる。
(mobile-angular-ui.gesturesやbase,desktopのcssはdistのパスを定義しないとロードされない?)