Step by Step Ruby on Rails

Ruby on Railsで実際にWebサイトを構築する手順をまとめています。

AngularJSとRails4でRestアプリ作成(7)AngularJSのresourceを使って編集機能を追加

前回作成した登録機能に編集機能を追加しました。
 
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>