一からRuby on Rails備忘録

Ruby on Rails Tutorial マイクロポストを登録

「Ruby on Rails Tutorial」のサンプルアプリをAngularJSとBootstrap3を使う形にして作成します。前回、ホームページにログイン済みユーザーのユーザー情報、マイクロポストの情報を表示するようにしました。今回はその下の部分にマイクロポスト投稿フォームを作成し、マイクロポストを投稿できるようにします。

1)Railsルート設定
 
micropostsという名前でコントローラを作成し、createとdestroyアクションを作成するのでそれに対応するルートを定義します。
 
$ vi config/routes.rb
 
match ‘/app/microposts’, to: ‘microposts#create’, via: ‘post’
match ‘/app/microposts’, to: ‘microposts#destroy’, via: ‘delete’
 
2)Railsコントローラ設定
 
$ vi app/controllers/microposts_controller.rb

class MicropostsController 

 
3)AngularJSの$resourceのRESTアクションをサービスとして定義
 
AngularJSの$resourceサービスを使って、Railsのサーバー側にアクセスするアクションをサービスとして定義します。
 
$ vi app/assets/javascripts/mymodule.js.erb

myModule.factory("micropostsResource", function($resource) {
  return $resource("/app/microposts",{},
    {
      'create':  { method: 'POST' },
      'destroy': { method: 'DELETE' }
    }
  );
});

 
4)AngularJSのコントローラを設定
 
①フラッシュメッセージ登録
登録成功時のフラッシュメッセージは設定します。フラッシュメッセージは、"flashService"サービスでルート変更をトリガーとして設定していますが、今回のマイクロポスト投稿ではルートを変更しないので、$emitメソッドを使って明示的にイベントを送信しています。
 
②フラッシュメッセージ取得
$scope.getMessage関数でフラッシュメッセージを取得します。
 
③最新のログイン済みユーザー情報取得
マイクロポスト投稿後、ビュー内のマイクロポストの数を更新する必要があります。
"sessionResource"サービスのcurrent_userアクションでログインユーザーの最新の情報をサーバーから取得し、"flashService"サービスに最新のログイン済みユーザー情報をセットし、ページを更新します。
 
$ vi app/assets/javascripts/mymodule.js.erb

myModule.controller("HomeCtrl", function($scope, flashService, micropostsResource, sessionResource) {
  $scope.micropost = {};
  $scope.micropost.content = "Compose new micropost...";
  var msg = "Micropost created!";
  $scope.submit = function() {
    function success(response) {
      sessionResource.current_user({}, function(response1) {
        var current_user = response1;
        flashService.setUser(current_user);
      });
      flashService.push(msg);
      $scope.$emit("$routeChangeSuccess");
    }
    function failure(response) {
    }
    micropostsResource.create($scope.micropost, success, failure);
  };
  $scope.getMessage = function() {
    return flashService.get();
  };
});

myModule.factory("flashService", function ($rootScope, $timeout) {
  var queue = [];
  var currentMessage = "";
   :
  $rootScope.$on("$routeChangeSuccess", function() {
    currentMessage = queue.shift() || "";
  });

  return {
    push: function (msg) {
      queue.push(msg);
    },
   :

 
5)マイクロポスト投稿フォーム作成、フラッシュメッセージ表示
 
$ vi app/assets/templates/static_pages/home.html.erb

<div ng-controller="HomeCtrl">
  <div ng-show="chkSignin().user.id > 0" class="row">
    <div class="bg-warning" ng-show="getMessage()">
      <p>{\{getMessage()}}</p>
    </div>
    <div class="col-sm-4">
   :
      <form name="micropostForm" ng-submit="submit()" novalidate>
        <textarea name="content" class="form-control"
                  ng-model="micropost.content" rows="3" required>
        </textarea>
        <button type="submit" ng-disabled="micropostForm.$invalid"
                class="btn btn-large btn-primary">Post
        </button>
      </form>
モバイルバージョンを終了