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

wp-admin

3年前

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

１）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”)
　
２）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’]);
　
３）Railsコントローラを設定
　
$ vi app/controllers/users_controller.rb

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

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

scope '/api' do
  resources :users
end

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

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

　
６）ルート設定の変更
　
●変更前
　
・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>

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