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

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

１）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”)
　
２）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

　
３）Railsのリソースルートを設定
　
AngularJSのルーティング設定と重複を避けるため、Railsのコントローラにアクセスする場合は”app”のプレフィックスをつけるようにします。
　
“localhost:3000/user”の場合は、AngularJSのルーティング
“localhost:3000/app/user”の場合は、Railsのルーティング
　
$ vi config/routes.rb

  scope '/app' do
    resources :users
  end

　
４）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’]);
　
５）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’) %>”
})
　
６）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();
});

　
７）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>

　
８）ユーザー一覧へのリンクを追加
　
動作確認のため、ナビゲーションメニュー内にユーザー一覧へのリンクを仮作成します。
　
$ vi app/views/layouts/_header.html.erb
　
<li><%= link_to “Index”, “/users” %></li>
　
９）ブラウザリロード対策
　
トップページからユーザー一覧への遷移では問題なく表示出来ましたが、ブラウザリロードなどで”http://localhost:3000/users”に直接アクセスすると”No route”のエラーとなってしまうため、とりあえず下記ルート設定を追加しました。
　
$ vi config/routes.rb
　
get ‘users’, to: ‘layouts#index’