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