AngularJSとRails4でRestアプリ作成（６）AngularJSのresourceを使って登録機能を追加

$resourceサービスのRESTアクション（create、index、show、update、destroy）をサービスとして定義してあるので、このサービスを使って登録機能を追加しました。

１）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",	{
　　　　：

　
２）登録ページのテンプレートを追加
　
$ 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>

　
３）登録用の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);
  };
});

　
４）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

　
５）インデックスページに新規登録へのリンク追加
　
$ vi app/assets/templates/users/index.html
　
<a class=”btn btn-success” href=”/users/new”>ユーザー登録</a>
　
６）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');
});