一からRuby on Rails備忘録

AngularJSとRails4でRestアプリ作成(3)AngularJSの$resourceサービスを使ってサーバーデータを取得

前回までは、AngularJSのスクリプト内に定義したデータを表示していました。
今回は、AngularJSのresourceサービスを使ってサーバーのデータベースからデータを取得して表示します。

1)Railsモデル作成、マイグレーション、テストデータ作成
 
①モデル作成
 
$ rails generate model User name:string email:string
 
②マイグレーション実行
 
$ rake db:migrate
 
③rails コンソールでテストデータ登録
 
$ rails c
 
User.create(name:”相川 一郎”,email:”aikawa@example.com”)
User.create(name:”石井 二郎”,email:”ishii@example.com”)
 
2)Resourceサービスを導入
 
①Resourceをインクルード
 
$ vi app/assets/javascripts/application.js
 
下記追加
//= require angular-resource
 
②モジュールの依存性にngResource追加
 
$ vi app/assets/javascripts/mymodule.js.erb
 
var mymodule = angular.module(“myModule”, [‘ngRoute’,’ngResource’]);
 
3)Railsコントローラを設定
 
$ vi app/controllers/users_controller.rb

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

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

scope '/api' do
  resources :users
end

 
5)AngularJSのインデックスコントローラを修整
 
$ vi app/assets/javascripts/mymodule.js.erb

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

 
6)ルート設定の変更
 
●変更前
 
・Railsルート設定
root to: ‘users#index’
 
・Railsビュー
<div ng-view></div>
 
この設定だとAngularJSが開始される前にRailsのコントローラにアクセスしてしまうようで、サーバーからのJSONデータがそのまま表示されてしまいました。
下記のように変更しました。
 
●変更後
 
①Railsルート設定
 
$ vi config/routes.rb
root ‘layouts#index’
 
②layoutsコントローラ作成、indexアクション定義
 
$ vi app/controllers/layouts_controller.rb

class LayoutsController < ApplicationController
  def index
    render "layouts/application"
  end
end

 
③レイアウトファイル
 
<%= yield %>の部分を<div ng-view></div>に変更
 
$ 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>
  <div ng-view></div>
</body>
</html>

これでルートページは、サーバーのデータベースからデータを取得し、ユーザー情報一覧を表示できるようになりました。

モバイルバージョンを終了