- Rails単体でAngularJSとTwitterBootStrapを共存させる方法について、自分のやりたい手法がまとまった記事がなかったので構築手順をまとめました。
- AngularJSとTwitterBootStrapの詳しい使い方については書いていません…
- 深く使い込んだ訳ではないので問題があれば随時追記予定。
概要
- UI Bootstrapを用いて2つを共存させる。
- Rails Assetsを用いてAngularJSのパッケージ管理をする。
- 簡素な自分用アプリを作る予定だったのでフロントとバックは分けずにRails単体。
- Yeomanも使わない。
詳細
TwitterBootstrap導入
- gemのtwitter-bootstrap-railsを使って導入する。
手順
- 既にいいページがたくさんあるので手順は割愛。
その他
-
app/assets/javascripts/application.jsに追加されるbootstrapのrequireは後に追加するUI Bootstrapと競合しそうなので後で手で外す必要がありそう。
AngularJS導入
-
Rails Assetsを使って導入する。
- Bowerのパッケージをgemにコンバートしたものをホストしているサービス。
- BowerとBundlerをうまい具合につないでくれる。
- というわけでこれに乗っかるのが楽そう。
手順
- Gemfileにsourceを追加する。
source 'https://rails-assets.org'
これでgem 'rails-assets-<Bower パッケージ名>'の記法でBowerのパッケージが入る。
- Gemfileに適宜必要なパッケージを追加する。
gem 'rails-assets-angular'
gem 'rails-assets-angular-resource'
これでbundle installすると依存パッケージと共にinstallされる。
- AngularJSを読み込むようにする。
app/assets/javascripts/application.js
//= require angular
//= require angular-resource
//= require myapp_angular
- アプリを作成して導入完了。
app/assets/javascripts/myapp_angular.js.coffee
window.App = angular.module('myApp', ['ngResource'])
その他
- ここまでの手順でも両方それっぽく動くのだが、jQueryでDOM直接操作する等はAngularJSのポリシーに反しているとのことなのでTwitterBootstrapとの相性が悪い。
UI Bootstrap導入
-
UI Bootstrap
- 「BootstrapのコンポーネントをDirective化し、AngularJSのバインディングで扱えるようにしたもの」とのこと。
- こちらもRails Assetsで導入する。
手順
- angular-ui-bootstrap-bowerをGemfileに追加する。
gem 'rails-assets-angular-ui-bootstrap-bower'
-
angular-ui-bootstrapもあるが、こっちはソースコード本体なのでGemfileにはbower用の名前を指定する。本体の説明についてはこっちのリポジトリを見るのが良さそう。
- こちらもjsで読み込めるようにする
app/assets/javascripts/application.js
//= require angular
//= require angular-resource
//= require angular-ui-bootstrap-bower
//= require myapp_angular
- 利用するモジュールにui.bootstrapを追加して導入完了
app/assets/javascripts/myapp_angular.js.coffee
window.App = angular.module('myApp', ['ngResource', 'ui.bootstrap'])
動作確認
- 公式サイトにあるDirectiveを適当に使って動作を確認する。
app/views/hoges/show.html.haml
%div{'ng-controller' => 'HogesController'}
%alert{type: 'info'} {{hoge.name}}
%alert{type: 'danger'} {{hoge.name}}
参考文献
この辺の情報を組み合わせてまとめた。
* http://qiita.com/zoetro/items/eb3a44e4baa8c367b4aa
* http://tnakamura.hatenablog.com/entry/2014/06/19/113000
* http://www.ohmyenter.com/?p=1071