AngularJS $ risorse e ipermediali

Question

ho un $ risorsa AngularJS definita in questo modo:

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

e un'API RESTful. Così, quando faccio un GET su Menus ottengo questo ritorno:

<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> 

domanda è, come faccio menu 2 a cancellare? (dato che ha un proprio collegamento ipermediale: http://cafe.com/api/menus/2)

Answer 1

Supponendo che te ne sei andato dal XML per un allineamento angolare gestiti di oggetti JavaScript, è possibile utilizzare questo per rendere gli oggetti:

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

e il controller si può fare questo:

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

Look, nessuna creazione di URL lato client! :)

aggiornamento: fissato un errore nel comando giunzione, sia splice(index, index), ma dovrebbe essere splice(index, 1).

Answer 2

Se il servizio REST restituisce JSON ad angolo e il JSON include l'ID del menu nei dati restituiti.

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