$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'); });