Step by Step Ruby on Rails

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

AngularJSとRails4でRestアプリ作成(1)AngularJSインストール、動作確認

1)アプリ作成
 
$ rails new rest --skip-test-unit
 
2)Gemfile設定、インストール
 
①Gemfile
 
・多くの機能がAngularJSと重複するようなので、ここではTurbolinksを無効にしています。
 
$ vi Gemfile

#無効にする
#gem 'turbolinks'
#コメントを削除
gem 'therubyracer',  platforms: :ruby
#追加
gem 'bootstrap-sass'
gem 'angularjs-rails'

 
②インストール
 
$ bundle install
 
3)AngularJSをインクルード
 
$ vi app/assets/javascripts/application.js

//= require jquery
//= require jquery_ujs
//= require angular

 
4)Bootstrap3をスタイルシートファイルでインポート
 
$ vi app/assets/stylesheets/main.css.scss
 
@import "bootstrap";
 
5)Railsコントローラ作成
 
Usersコントローラとindexアクションを作成します。
 
$ rails generate controller Users index
 
6)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
 
7)アプリケーションレイアウトファイル作成
 
ターボリンクを無効にしているのでインクルード部分の'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>

 
8)ビューを作成
 
$ 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>

 
9)Railsのルート設定
 
$ vi config/routes.rb
 
root to: 'users#index'
 
10)動作確認
 
http://localhost:3000/