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