この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
はじめに
前回構築した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の呼び出しで処理を行うことができました。