AngularJSとRuby on Railsで作るCRUDアプリ – (5)Delete

はじめに

前回構築したAngularJS+Ruby on Railsのアプリに
今回はCRUDの内のDelete機能を実装し、ウィスキーの情報を削除する機能を作成しました。

一覧画面(index.html.erb)のDeleteリンクをクリックすると
AngularJSにより非同期でサーバを呼び出し、削除を行います。

以下に、実装する上でのポイントとなる箇所を記述していきます。
尚、ソースコードは以下のGitHubに置いてあるので、全ソースを見たい方は参考にしてください。
AngularjsWhiskyList

実装について

1.一覧画面

一覧画面は前回と同じです。

index.html.erb

<h1>Whiskies#index</h1>
<%= link_to "new whisky", new_whisky_path, :class => 'btn btn-mini' %>
<table ng-controller="WhiskiesCtrl" class="table">
    <tr ng-repeat="whisky in data">
        <td>{{whisky.name}}</td>
        <td>${{whisky.price}}</td>
        <td><a href="/whiskies/{{whisky.id}}/edit" class="btn btn-mini">Edit</a></td>
        <td><button ng-click="Delete(whisky);" class="btn btn-mini">Delete</button></td>
    </tr>
</table>

Deleteリンクを押下すると、「ng-click="Delete(whisky)」にて
AngularJSのDelete()メソッドが呼び出されます。
引数として、削除対象のwhiskyオブジェクトを渡しています。

2.AngularJS

Deleteリンクを押下時に呼び出される、AngularJSのDelete()です。
上記の一覧画面で参照しているコントローラ「WhiskiesCtrl」ごと載せておきます。

controllers.js

whiskiesListApp.controller('WhiskiesCtrl', function ($scope, $http, $window) {
    $http.get('whiskies/list').success(function(data) {
        $scope.data = data;
    });

    $scope.Delete = function(whisky){
        $http.delete('/whiskies/' + whisky.id
        ).success(function(data, status, headers, config) {
            $window.location.href = '/';
        }).error(function(data, status) {
            console.log('error:' + status);
        });
    }
});

ここでのポイントは
・「$http.delete・・・」にて、HTTPのDELETEメソッドを使用している
・「whisky.id」にて削除対象のデータのidを取得し、URLに組み込んでいる
ところです。

Railsのルーティングを、$ rake routes で確認すると、削除については

whisky (中略)
        DELETE /whiskies/:id(.:format)        whiskies#destroy

となります。

今回の削除についても
・HTTPのDELETEメソッドを使用して呼び出しを行う
・URLにて削除対象データのidを渡す
ことで、Railsのルーティングに則り、サーバに削除要求を投げています。

なお、サーバ側はRailsのdestory()アクションが削除処理を行いますが
これはActiveRecordを使用したdelete処理なので、省略します。
参照したい方は、GitHubのソースを参考にして下さい。

最後に

前回と同様、AngularJSの$httpを使い、deleteなどRailsのルーティングに即した、
言い換えればRESTに則ったURLの呼び出しで処理を行うことができました。