Ruby on Rails環境にCSSフレームワークとしてブートストラップ３、JavaScriptフレームワークとしてAngularJSを導入する手順です。
ブートストラップ３でもJavaScriptを使用していてAngularJSの機能との干渉が気になるところですが、対応しているコンポーネントhttp://angular-ui.github.io/bootstrap/がありました。
ブートストラップ３のJavaScript機能は使用せず、こちらのツールを使用しています。
１）Gemをインストール
①GemfileにBootstrap、AngularJS、angular-ui-bootstrapを追加
gem ‘bootstrap-sass’
gem ‘angularjs-rails’
gem ‘angular-ui-bootstrap-rails’
②インストール
$ bundle install
２）application.jsのインクルードの設定変更
$ cd app/assets/javascripts/
$ vi application.js
下記記述を追加
//= require angular
//= require angular-ui-bootstrap-tpls
３）”UI Boostrap”のサイトにあるアコーディオンのサンプルで動作確認
①”UI Boostrap”のサイトからアコーディオンのHTMLコード取得してビューを作成
②”UI Boostrap”のサイトからアコーディオンのJavaScriptコード取得して任意の名前でJavaScriptファイルを作成
$ cd app/assets/javascripts
$ vi mymodule.js
ファイルの先頭に’myModule’という名前でモジュール作成するため下記記述追加
angular.module(‘myModule’, [‘ui.bootstrap’])
③application.html.erbのhtmlタグに②で記述したモジュール名を記載
$ cd app/views/layouts/
$ vi application.html.erb
<html ng-app=”myModule”>
④application.jsに②で作成したJavaScriptファイルをインクルードする設定追加
//= require mymodule
上記設定でアコーディオンが動作する事を確認出来ました。