Step by Step Ruby on Rails

Ruby on Railsで実際にWebサイトを構築する手順をまとめています。

Ruby on Rails Tutorial マイクロポストの削除

「Ruby on Rails Tutorial」のサンプルアプリをAngularJSとBootstrap3を使う形にして作成します。今回はマイクロポストの削除機能を作成します。

(1)Railsコントローラにdestroyアクション追加

$ vi app/controllers/microposts_controller.rb

  before_action :signed_in_user, only: [:create, :destroy]
  before_action :correct_user,   only: :destroy

  def destroy
    Micropost.find(params[:id]).destroy
    head :no_content
  end

(2)AngularJSのビューに削除リンク追加

ログイン済みユーザーのマイクロポストのみに削除リンクを表示します。

ホームページ、ユーザープロファイルページに対し、下記削除リンクを追加します。

$ vi app/assets/templates/static_pages/home.html.erb
$ vi app/assets/templates/users/show.html.erb

  :
<small class="text-muted">Posted {\{mp.created_at | date:'medium'}}</small>
<span ng-show="chkSignin().user.id == mp.user_id"><a href="" ng-click="delete(mp.id)">delete</a></span>

(3)AngularJSのコントローラ設定

$ vi app/assets/javascripts/mymodule.js.erb

1)"UsersShowCtrl"コントローラ

①ログイン済みユーザー情報を取得する関数$scope.chkSignin定義

②削除関数$scope.delete関数を定義

・マイクロポスト削除。
・マイクロポスト削除後の最新のユーザー情報取得。
・最新ユーザー情報でマイクロポストのページ情報を更新。
・最新のユーザーをログイン済み情報を保持する"flashService"にセット。

myModule.controller("UsersShowCtrl", function($scope, $routeParams, userResource,flashService,micropostsResource) {

  $scope.chkSignin = function() {
    return flashService.getUser();
  };

  $scope.delete = function(id) {
    micropostsResource.destroy({ id: id });
    userResource.show({ id: $routeParams.id }, function(response) {
      $scope.user_info = response;
      $scope.totalitems = $scope.user_info.microposts.length;
      microposts = $filter('orderBy')($scope.user_info.microposts,'created_at',true);
      $scope.currentitems = microposts.slice(start,end);
      flashService.setUser(response);
    });
  };
});

2)"HomeCtrl"コントローラ

上記1)と同様の処理を追加。

①$scope.chkSigninは前回までに定義済み。

②削除関数$scope.delete関数を定義。

  $scope.delete = function(id) {
    micropostsResource.destroy({ id: id });
    sessionResource.current_user({}, function(response) {
      tmp_feed = response.feed;
      $scope.totalitems = tmp_feed.length;
      feed_items = $filter('orderBy')(tmp_feed,'created_at',true);
      $scope.currentitems = feed_items.slice(start,end);
      flashService.setUser(response);
    });
  };