$resourceサービスのRESTアクション(create、index、show、update、destroy)をサービスとして定義してあるので、このサービスを使って登録機能を追加しました。
1)AngularJSのルート設定にnewを追加
登録と編集は既存のユーザーがいるかいないかだけの差なので、ビューとテンプレートは編集と共有するため、ビューとコントローラの名前をeditにしています。
$ vi app/assets/javascripts/mymodule.js.erb
mymodule.config(function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when("/users/new", {
templateUrl: "<%= asset_path('users/edit.html') %> ",
controller: "UsersEditCtrl"
})
.when("/users/:id", {
:
2)登録ページのテンプレートを追加
$ vi app/assets/templates/users/edit.html
<h3>ユーザー登録・編集</h3>
<form name="form" ng-submit="submit()" class="form-horizontal" novalidate>
<div class="form-group">
<label class="col-sm-2 control-label" for="firstname">名前</label>
<div class="col-sm-10">
<input class="form-control" ng-model="user.name" type="text" name="firstname"placeholder="名前" required autofocus>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="email">メールアドレス</label>
<div class="col-sm-10">
<input class="form-control" ng-model="user.email" type="email" name="email" placeholder="メールアドレス" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
<a class="btn" ng-click="cancel()">キャンセル</a>
<button type="submit" class="btn btn-success">登録</button>
</div>
</div>
</form>
<a href="/users/{_{user.id}}">戻る</a>
3)登録用のAngularJSコントローラを定義
$ vi app/assets/javascripts/mymodule.js.erb
mymodule.controller("UsersEditCtrl", function($scope, $routeParams, userResource,$location) {
$scope.user = new userResource();
$scope.submit = function() {
function success(response) {
$location.path("/users");
}
function failure(response) {
console.log("failure", response)
}
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
render json: @user, status: :created, location: @user
else
render json: @user.errors, status: :unprocessable_entity
end
end
private
def user_params
params.permit(:name,:email)
end
5)インデックスページに新規登録へのリンク追加
$ vi app/assets/templates/users/index.html
<a class=”btn btn-success” href=”/users/new”>ユーザー登録</a>
6)CSRF対策
この状態でHTTP POSTリクエストを送信すると下記エラーが発生します。
Can’t verify CSRF token authenticity
Completed 422 Unprocessable Entity in 1ms
上記を回避するためHTTPヘッダーにデフォルトでCSRFトークンを付与するように設定します。
$ vi app/assets/javascripts/mymodule.js.erb
mymodule.config(function($httpProvider) {
$httpProvider.defaults.headers.common['X-CSRF-Token'] = $('meta[name=csrf-token]').attr('content');
});