AngularJS와 $ 자원 및 하이퍼 미디어

Question

나는 다음과 같이 정의 된 AngularJS와의 $ 자원을 가지고있다. 나는 메뉴 2를 삭제하는 방법,

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

질문입니다 : 내가 Menus에 GET을 수행 할 때 그래서 나는이 다시 얻을? (자체 하이퍼 미디어 링크가있는 경우 : http://cafe.com/api/menus/2)

Answer 1

자바 스크립트 객체의 각도 관리 배열에 XML에서 사라했다고 가정하면, 당신은 당신의 객체를 렌더링하기 위해 이것을 사용할 수 있습니다 :

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

클라이언트 측 URL 만들기가 필요 없습니다. :)

업데이트 :는, 스플 라이스 명령의 버그를 수정 splice(index, index)했지만, splice(index, 1)을해야합니다.

Answer 2

REST 서비스가 JSON을 각도로 반환하고 JSON이 반환 된 데이터에 메뉴 ID를 포함하는 경우.

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

및 컨트롤러에서이 작업을 수행 할 수 있습니다

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