「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); }); };