AngularJS $ resource und Hypermedia

Question

Ich habe eine AngularJS resource $ wie folgt definiert:

var Menus = $resource('http://cafe.com/api/menus'); 

und eine RESTful API. Also, wenn ich ein GET auf Menus bekomme ich diese zurück:

<cafe> 
    <collection href="http://cafe.com/api/menus" type="menus"> 
    <template> 
     <data name="Name" prompt="Menu name" /> 
    </template> 
    <items> 
     <item href="http://cafe.com/api/menus/1"> 
     <link href="http://cafe.com/api/menus/1/ingredients" rel="ingredients" /> 
     <data name="Name" prompt="Menu name">Morning</data> 
     </item> 
     <item href="http://cafe.com/api/menus/2"> 
     <link href="http://cafe.com/api/menus/2/ingredients" rel="ingredients" /> 
     <data name="Name" prompt="Menu name">Happy Hour</data> 
     </item> 
    </items> 
    </collection> 
</cafe> 

Frage ist, wie lösche ich Menü 2? (vorausgesetzt, es hat einen eigenen Hypermedia-Link: http://cafe.com/api/menus/2)

Answer 1

Unter der Annahme, dass Sie aus dem XML zu einem Winke verwaltetes Array von JavaScript-Objekten gegangen sind, können Sie diese verwenden, um Ihre Objekte zu machen:

<tr ng-repeat="cafe in cafes"> 
    <td>{{cafe.name}}</td> 
    <td> 
     <button class="btn" ng-click="deleteCafe($index, cafe)">Delete</button> 
    </td> 
</tr> 

und in Ihrem Controller können Sie dies tun:

function ListCtrl($scope, $http, CafeService) { 
    CafeService.list(function (cafes) { 
    $scope.cafes = cafes; 
    }); 

    $scope.deleteCafe = function (index, cafe) { 
    $http.delete(cafe.self).then(function() { 
     $scope.cafes.splice(index, 1); 
    }, function() { 
     // handle error here 
    }); 
    } 
} 

Schauen Sie, keine clientseitige Erstellung von URLs! :)

Update: einen Fehler in dem Spleiß-Befehl festgelegt, war splice(index, index), soll aber splice(index, 1) sein.

Answer 2

Wenn Ihr REST-Dienst JSON an eckig zurückgibt und der JSON die Menü-ID in den zurückgegebenen Daten enthält.

var Menu = $resource('http://cafe.com/api/menus/:id', { id: '@id' }); // replace @id with @<the id field in your json object> 

// Delete menu 2 
Menu.delete({id: 2}, function(){ // Success callback 
    // Get all menus, 
    var menus = Menu.query(function() { // Success callback 
    // alternative delete syntax: 
    var lastMenu = menus.pop(); 
    lastMenu.$delete(); 
    }); 
});