前回作成した登録機能に編集機能を追加しました。
1)AngularJSのルート設定を追加
$ vi app/assets/javascripts/mymodule.js.erb
mymodule.config(function($routeProvider, $locationProvider) { $locationProvider.html5Mode(true); $routeProvider : .when("/users/:id", { templateUrl: "<%= asset_path('users/show.html') %>", controller: "UsersShowCtrl" }) .when("/users/:id/edit", { templateUrl: "<%= asset_path('users/edit.html') %> ", controller: "UsersEditCtrl" })
2)編集ページのテンプレート
登録ページのテンプレートと共用します。
3)編集用のAngularJSコントローラを定義
$ vi app/assets/javascripts/mymodule.js.erb
mymodule.controller("UsersEditCtrl", function($scope, $routeParams, userResource,$location) { if ($routeParams.id) { $scope.user = userResource.show({ id: $routeParams.id }); } else { $scope.user = new userResource(); } $scope.submit = function() { function success(response) { $location.path("/users"); } function failure(response) { console.log("failure", response) } if ($routeParams.id) { userResource.update($scope.user, success, failure); } else { userResource.create($scope.user, success, failure); } }; $scope.cancel = function() { $location.path("/users/"+$scope.user.id); }; });
4)Railsコントローラを設定
$ vi app/controllers/users_controller.rb
def create @user = User.new(user_params) if @user.save head :created // render json: @user, status: :created, location: @user else render json: @user.errors, status: :unprocessable_entity end end def update @user = User.find(params[:id]) if @user.update_attributes(user_params) head :no_content else render json: @user.errors, status: :unprocessable_entity end end
5)インデックスページに編集へのリンク追加
$ vi app/assets/templates/users/index.html
<td> <a href="/users/{_{user.id}}">詳細</a> <a href="/users/{_{user.id}}/edit">編集</a> </td>