AngularJS $resource RESTful voorbeeld

Ik wil $resource gebruiken om mijn RESTful-webservice aan te roepen (waar ik nog steeds aan werk), maar ik wil eerst weten of ik mijn AngularJS-script correct heb gekregen.

De todo DTO heeft: {id, order, content, done}

:cmdis zodat ik api/1/todo/resetkan aanroepen om de todo-tabel in de database te wissen.

Hier is de code met commentaar van mijn begrip:

function TodoService($resource) {
    var src = $resource('api/1/todo/:id:cmd',
              {id: "@id", cmd: "@cmd"}, //parameters default
              {
                ListTodos: { method: "GET", params: {} },
                GetTodo: { method: "GET", params: { id: 0 } },                            
                CreateTodo: { method: "POST", params: { content: "", order: 0, done: false } },
                UpdateTodo: { method: "PATCH", params: { /*...*/ } },
                DeleteTodo: { method: "DELETE", params: { id: 0 } },
                ResetTodos: { method: "GET", params: { cmd: "reset" } },
              });
    //Usage:
    //GET without ID
    //it calls -> api/1/todo
    src.ListTodos();
    //GET with ID
    //it calls -> api/1/todo/4
    src.GetTodo({ id: 4 });
    //POST with content, order, done
    //it calls -> api/1/todo
    src.CreateTodo({ content: "learn Javascript", order: 1, done: false });
    //UPDATE content only
    //it calls -> api/1/todo/5
    src.UpdateTodo({ id: 5, content: "learn AngularJS" }); 
    //UPDATE done only
    //it calls -> api/1/todo/5
    src.UpdateTodo({ id: 5, done: true });
    //RESET with cmd
    //it calls -> api/1/todo/reset
    src.ResetTodos();
}

Een bepaald ding dat ik niet zeker weet, is de PATCH-methode. Ik wil niet alles bijwerken, kan ik slechts één veld bijwerken? Bouw ik dit stukje code correct op?

Antwoord 1, autoriteit 100%

$resource was bedoeld om gegevens van een eindpunt op te halen, te manipuleren en terug te sturen. Je hebt er sommigenvan, maar je gebruikt het niet echt waarvoor het gemaakt is.

Het is prima om aangepaste methoden voor uw bron te hebben, maar u wilt de coole functies van OOTB niet missen.

EDIT: ik denk dat ik dit oorspronkelijk niet goed genoeg heb uitgelegd, maar $resourcedoet wat funky dingen met teruggaven. Todo.get()en Todo.query()retourneren allebeihet bronobject, engeven het door aan de callbackvoor wanneer het ophalen is voltooid. Het doet een aantal mooie dingen met beloften achter de schermen, wat betekent dat je $save()kunt aanroepen voordat de get()callback daadwerkelijk wordt geactiveerd, en het zal wachten. Het is waarschijnlijk het beste om uw bron af te handelen binnen een belofte then()of de callback-methode.

Standaard gebruik

var Todo = $resource('/api/1/todo/:id');
//create a todo
var todo1 = new Todo();
todo1.foo = 'bar';
todo1.something = 123;
todo1.$save();
//get and update a todo
var todo2 = Todo.get({id: 123});
todo2.foo += '!';
todo2.$save();
//which is basically the same as...
Todo.get({id: 123}, function(todo) {
   todo.foo += '!';
   todo.$save();
});
//get a list of todos
Todo.query(function(todos) {
  //do something with todos
  angular.forEach(todos, function(todo) {
     todo.foo += ' something';
     todo.$save();
  });
});
//delete a todo
Todo.$delete({id: 123});

Evenzo, in het geval van wat je in de OP hebt gepost, zou je een bronobject kunnen krijgen en vervolgens een van je aangepaste functies erop kunnen aanroepen (theoretisch):

var something = src.GetTodo({id: 123});
something.foo = 'hi there';
something.UpdateTodo();

Ik zou experimenteren met de OOTB-implementatie voordat ik mijn eigen implementatie ging uitvinden. En als u merkt dat u geen van de standaardfuncties van $resourcegebruikt, moet u waarschijnlijk alleen $httpgebruiken.

Update: Angular 1.2 en beloften

Vanaf Angular 1.2 ondersteunen bronnen beloften. Maar ze hebben de rest van het gedrag niet veranderd.

Om beloften te benutten met $resource, moet je de eigenschap $promisegebruiken voor de geretourneerde waarde.

Voorbeeld met beloften

var Todo = $resource('/api/1/todo/:id');
Todo.get({id: 123}).$promise.then(function(todo) {
   // success
   $scope.todos = todos;
}, function(errResponse) {
   // fail
});
Todo.query().$promise.then(function(todos) {
   // success
   $scope.todos = todos;
}, function(errResponse) {
   // fail
});

Houd er rekening mee dat de eigenschap $promiseeen eigenschap is met dezelfde waarden als hierboven. Dus je kunt raar doen:

Deze zijn equivalent

var todo = Todo.get({id: 123}, function() {
   $scope.todo = todo;
});
Todo.get({id: 123}, function(todo) {
   $scope.todo = todo;
});
Todo.get({id: 123}).$promise.then(function(todo) {
   $scope.todo = todo;
});
var todo = Todo.get({id: 123});
todo.$promise.then(function() {
   $scope.todo = todo;
});

Antwoord 2

je kunt gewoon $scope.todo = Todo.get({ id: 123 })doen. .get()en .query()op een resource retourneren onmiddellijk een object en vullen het later met het resultaat van de belofte (om uw sjabloon bij te werken). Het is geeneen typische belofte, daarom moet je ofwel een callback of de eigenschap $promise gebruiken als je een speciale code hebt die je na de oproep wilt laten uitvoeren. Maar het is niet nodig om het toe te wijzen aan uw bereik in een callback als u het alleen in de sjabloon gebruikt.