Step by Step Ruby on Rails

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

Ruby on Rails Tutorial AngularJSの$resourceサービスを使ってサーバーデータ取得

「Ruby on Rails Tutorial」のサンプルアプリをAngularJSとBootstrap3を使う形にして作成します。今回は、サーバーで定義したユーザー情報をAngularJSの$resourceサービスを使って取得して、表示できるようにしました。

1)Railsモデル作成、マイグレーション、テストデータ作成

①モデル作成

$ rails generate model User name:string email:string

②マイグレーション実行

$ rake db:migrate

③rails コンソールでテストデータ登録

$ rails c

User.create(name: "testuser1", email: "test1@example.com")
User.create(name: "testuser2", email: "test2@example.com")
User.create(name: "testuser3", email: "test3@example.com")

2)RailsでUsersコントローラを設定

①コントローラ作成

$ rails generate controller Users

②usrsコントローラのindexアクションを定義

AngularJSの$resourceサービスを使ってアクセスするのでjson形式で返します。
$ vi app/controllers/users_controller.rb

  def index
    @users = User.all
    render json: @users
  end

3)Railsのリソースルートを設定

AngularJSのルーティング設定と重複を避けるため、Railsのコントローラにアクセスする場合は"app"のプレフィックスをつけるようにします。

"localhost:3000/user"の場合は、AngularJSのルーティング
"localhost:3000/app/user"の場合は、Railsのルーティング

$ vi config/routes.rb

  scope '/app' do
    resources :users
  end


4)AngularJSでResourceサービスを導入

①angular-resourceをインクルード

$ vi app/assets/javascripts/application.js

下記追加
//= require angular-resource

②モジュールの依存性にngResource追加

$ vi app/assets/javascripts/mymodule.js.erb

myModule = angular.module('myModule', ['ui.bootstrap','ngRoute','ngResource']);

5)AngularJSのルート設定を追加

①Railsのルート設定確認

indexページのルートを確認します。AngularJSのルート設定と重複しないように事前に確認します。

$ rake routes
users GET    /app/users(.:format)           users#index

②AngularJSのルート設定追加

$ vi app/assets/javascripts/mymodule.js.erb

 .when("/users", {
  templateUrl: "<%= asset_path('users/index.html.erb') %>"
  })

6)AngularJSでユーザーインデックス用コントローラを定義

AngularJSのIndex用のコントローラから$resourceサービスを使ってRailsのコントローラにアクセスし、データベースからデータをJSON形式で取得します。

$ vi app/assets/javascripts/mymodule.js.erb

myModule.controller("UsersIndexCtrl", function($scope,$resource) {
  var rtn = $resource('/app/users');
  $scope.users = rtn.query();
});

7)AngularJSのパーシャルビューを定義

$ vi app/assets/templates/users/index.html.erb

<div ng-controller="UsersIndexCtrl">
<h1>ユーザー一覧</h1>
<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>


8)ユーザー一覧へのリンクを追加

動作確認のため、ナビゲーションメニュー内にユーザー一覧へのリンクを仮作成します。

$ vi app/views/layouts/_header.html.erb

<li><%= link_to "Index", "/users" %></li>

9)ブラウザリロード対策

トップページからユーザー一覧への遷移では問題なく表示出来ましたが、ブラウザリロードなどで"http://localhost:3000/users"に直接アクセスすると"No route"のエラーとなってしまうため、とりあえず下記ルート設定を追加しました。

$ vi config/routes.rb

get 'users', to: 'layouts#index'