{"id":1072,"date":"2015-07-31T10:25:11","date_gmt":"2015-07-31T10:25:11","guid":{"rendered":"http:\/\/www.honobono-life.info\/wpeng\/?p=1072"},"modified":"2015-08-01T00:16:25","modified_gmt":"2015-08-01T00:16:25","slug":"angularjs-resource-server-side-data","status":"publish","type":"post","link":"http:\/\/www.honobono-life.info\/wpeng\/angularjs-resource-server-side-data\/","title":{"rendered":"Ruby on Rails Tutorial AngularJS $resource, server-side data"},"content":{"rendered":"

1)Rails model, migration, test data<\/strong><\/p>\r\n\r\n

1.Rails model<\/strong><\/p>\r\n\r\n

$ rails generate model User name:string email:string<\/p>\r\n\r\n

2.migration<\/strong><\/p>\r\n\r\n

$ rake db:migrate<\/p>\r\n\r\n

3.test data<\/strong><\/p>\r\n\r\n

$ rails c<\/p>\r\n\r\n

User.create(name: "testuser1", email: "test1@example.com")
\r\nUser.create(name: "testuser2", email: "test2@example.com")
\r\nUser.create(name: "testuser3", email: "test3@example.com")<\/p>\r\n\r\n

2)Rails controller<\/strong><\/p>\r\n\r\n

1.generate controller<\/strong><\/p>\r\n\r\n

$ rails generate controller Users<\/p>\r\n\r\n

2.index action<\/strong><\/p>\r\n\r\n

$ vi app\/controllers\/users_controller.rb<\/p>\r\n\r\n

\r\n  def index\r\n    @users = User.all\r\n    render json: @users\r\n  end<\/pre>\r\n\r\n
3)Rails resource route<\/strong><\/p>\r\n\r\n
$ vi config\/routes.rb<\/p>\r\n\r\n
\r\n  scope '\/app' do\r\n    resources :users\r\n  end\r\n<\/pre>\r\n\r\n
4)AngularJS $resource<\/strong><\/p>\r\n\r\n
1.angular-resource include<\/strong><\/p>\r\n\r\n
$ vi app\/assets\/javascripts\/application.js<\/p>\r\n\r\n
\/\/= require angular-resource<\/p>\r\n\r\n
2.ngResource DI<\/strong><\/p>\r\n\r\n
$ vi app\/assets\/javascripts\/mymodule.js.erb<\/p>\r\n\r\n
myModule = angular.module('myModule', ['ui.bootstrap','ngRoute','ngResource']);<\/p>\r\n\r\n
5)AngularJS route<\/strong><\/p>\r\n\r\n
1.confirm Rails route<\/strong><\/p>\r\n\r\n
$ rake routes
\r\nusers GET    \/app\/users(.:format)           users#index<\/p>\r\n\r\n
2.AngularJS route<\/strong><\/p>\r\n\r\n
$ vi app\/assets\/javascripts\/mymodule.js.erb<\/p>\r\n\r\n
\r\n .when("\/users", {\r\n  templateUrl: "<%= asset_path('users\/index.html.erb') %>"\r\n  })<\/pre>\r\n\r\n
6)AngularJS user index controller<\/strong><\/p>\r\n\r\n
$ vi app\/assets\/javascripts\/mymodule.js.erb<\/p>\r\n\r\n
\r\nmyModule.controller("UsersIndexCtrl", function($scope,$resource) {\r\n  var rtn = $resource('\/app\/users');\r\n  $scope.users = rtn.query();\r\n});<\/pre>\r\n\r\n
7)AngularJS index template view<\/strong><\/p>\r\n\r\n
$ vi app\/assets\/templates\/users\/index.html.erb<\/p>\r\n\r\n
\r\n<div ng-controller="UsersIndexCtrl">\r\n<h1>index<\/h1>\r\n<table class="table table-bordered">\r\n  <thead>\r\n    <td>name<\/td>\r\n    <td>email<\/td>\r\n  <\/thead>\r\n  <tbody>\r\n    <tr ng-repeat="user in users">\r\n      <td>\r\n        {{user.name}}\r\n      <\/td>\r\n      <td>\r\n        {{user.email}}\r\n      <\/td>\r\n    <\/tr>\r\n  <\/tbody>\r\n<\/table>\r\n<\/div><\/pre><\/div>\r\n\r\n
8)add link to user index<\/strong><\/p>\r\n\r\n
$ vi app\/views\/layouts\/_header.html.erb<\/p>\r\n\r\n
<li><%= link_to "Index", "\/users" %><\/li><\/p>\r\n\r\n
9)Rails route<\/strong><\/p>\r\n\r\n
*Problem<\/p>\r\n\r\n
1."http:\/\/localhost:3000\/users"
\r\n2.browser reload
\r\n3."No route" error<\/p>\r\n\r\n
*Avoidance<\/p>\r\n\r\n
$ vi config\/routes.rb<\/p>\r\n\r\n
get 'users', to: 'layouts#index'<\/p>\r\n","protected":false},"excerpt":{"rendered":"
1)Rails model, migration, test data 1.Rails model $ rails generate model User name:string email:string 2.migration $ rake db:migrate 3.test data $ 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 controller 1.generate controller $ rails generate controller Users 2.index action $ vi app\/controllers\/users_controller.rb def index @users = User.all render […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[137],"tags":[146,35,145],"amp_enabled":true,"_links":{"self":[{"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/posts\/1072"}],"collection":[{"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/comments?post=1072"}],"version-history":[{"count":2,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/posts\/1072\/revisions"}],"predecessor-version":[{"id":1082,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/posts\/1072\/revisions\/1082"}],"wp:attachment":[{"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/media?parent=1072"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/categories?post=1072"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/tags?post=1072"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}