Step by Step Ruby on Rails

Ruby on Railsで実際にWebサイトを構築する手順をまとめています。

Ruby on Rails環境にCSSフレームワークとしてブートストラップ3、JavaScriptフレームワークとしてAngularJSを導入する手順です。
 
ブートストラップ3でもJavaScriptを使用していてAngularJSの機能との干渉が気になるところですが、対応しているコンポーネントhttp://angular-ui.github.io/bootstrap/がありました。
ブートストラップ3のJavaScript機能は使用せず、こちらのツールを使用しています。
 
1)Gemをインストール
 
①GemfileにBootstrap、AngularJS、angular-ui-bootstrapを追加
 
gem 'bootstrap-sass'
gem 'angularjs-rails'
gem 'angular-ui-bootstrap-rails'
 
②インストール
 
$ bundle install
 
2)application.jsのインクルードの設定変更
 
$ cd app/assets/javascripts/
$ vi application.js
 
下記記述を追加
//= require angular
//= require angular-ui-bootstrap-tpls
 
3)"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
 
上記設定でアコーディオンが動作する事を確認出来ました。