１）アプリ作成
$ rails new rest –skip-test-unit
２）Gemfile設定、インストール
①Gemfile
・多くの機能がAngularJSと重複するようなので、ここではTurbolinksを無効にしています。
$ vi Gemfile
#無効にする #gem 'turbolinks' #コメントを削除 gem 'therubyracer', platforms: :ruby #追加 gem 'bootstrap-sass' gem 'angularjs-rails'
②インストール
$ bundle install
３）AngularJSをインクルード
$ vi app/assets/javascripts/application.js
//= require jquery //= require jquery_ujs //= require angular
４）Bootstrap3をスタイルシートファイルでインポート
$ vi app/assets/stylesheets/main.css.scss
@import “bootstrap”;
５）Railsコントローラ作成
Usersコントローラとindexアクションを作成します。
$ rails generate controller Users index
６）AngularJSのモジュール、コントローラ設定
①コントローラファイル作成
モジュールとコントローラを定義します。
$ vi app/assets/javascripts/mymodule.js
var mymodule = angular.module("myModule", []);
mymodule.controller("UsersCtrl", function($scope) {
$scope.users = [
{
name: "相川 一郎",
email: "aikawa@example.com"
},
{
name: "石井 二郎",
email: "ishii@example.com"
},
]
});
②インクルード設定追加
$ vi app/assets/javascripts/application.js
//= require mymodule
７）アプリケーションレイアウトファイル作成
ターボリンクを無効にしているのでインクルード部分の’data-turbolinks-track’ => true を削除します。
ng-appでモジュール名を指定します。
$ vi app/views/layouts/application.html.erb
<!DOCTYPE html> <html ng-app="myModule"> <head> <title>Rest</title> <%= stylesheet_link_tag 'application', media: 'all' %> <%= javascript_include_tag 'application' %> <%= csrf_meta_tags %> </head> <body> <%= yield %> </body> </html>
８）ビューを作成
$ vi app/views/users/index.html.erb
<div ng-controller="UsersCtrl">
<h3>ユーザー一覧</h3>
<table class="table table-bordered">
<thead>
<td>名前</td>
<td>メールアドレス</td>
</thead>
<tbody>
<tr ng-repeat="user in users">
<td>
{_{user.name}}
</td>
<td>
{_{user.email}}
</td>
</tr>
</tbody>
</table>
</div>
９）Railsのルート設定
$ vi config/routes.rb
root to: ‘users#index’
１０）動作確認
http://localhost:3000/