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 json: @users end
3)Rails resource route
$ vi config/routes.rb
scope '/app' do resources :users end
4)AngularJS $resource
1.angular-resource include
$ vi app/assets/javascripts/application.js
//= require angular-resource
2.ngResource DI
$ vi app/assets/javascripts/mymodule.js.erb
myModule = angular.module('myModule', ['ui.bootstrap','ngRoute','ngResource']);
5)AngularJS route
1.confirm Rails route
$ rake routes
users GET /app/users(.:format) users#index
2.AngularJS route
$ vi app/assets/javascripts/mymodule.js.erb
.when("/users", { templateUrl: "<%= asset_path('users/index.html.erb') %>" })
6)AngularJS user index controller
$ vi app/assets/javascripts/mymodule.js.erb
myModule.controller("UsersIndexCtrl", function($scope,$resource) { var rtn = $resource('/app/users'); $scope.users = rtn.query(); });
7)AngularJS index template view
$ vi app/assets/templates/users/index.html.erb
<div ng-controller="UsersIndexCtrl"> <h1>index</h1> <table class="table table-bordered"> <thead> <td>name</td> <td>email</td> </thead> <tbody> <tr ng-repeat="user in users"> <td> {{user.name}} </td> <td> {{user.email}} </td> </tr> </tbody> </table> </div>
8)add link to user index
$ vi app/views/layouts/_header.html.erb
<li><%= link_to "Index", "/users" %></li>
9)Rails route
*Problem
1."http://localhost:3000/users"
2.browser reload
3."No route" error
*Avoidance
$ vi config/routes.rb
get 'users', to: 'layouts#index'