Good example of a put operation using AngularJS $resource

Question

I have been struggling to find a consistent and good example of a put operation using AngularJS $resource. An example of when I want to update, but can't seem to is located here: AngularJS PUT on voting application to REST Service

At the core, I need to understand the best practice/normal way to conduct a put operation both for form submissions or in the voting application mentioned in my post above. Does anyone have a good example that demonstrates a put?

Arjan

Not clear what you are looking for. If object is new (has no id) the save will be POST, if it's not new it will be PUT. What part are you looking for clarification on? – Adversative

That is the type of information I am looking for. The Angular docs for $resource are somewhat unclear on how to update an item with new data. I am looking for examples of how to structure the service and controller supporting a put operation. My understanding thus far is that I need to be explicit when putting using $update in the controller and patching the service (ex. 'update': { method: 'PATCH' }). Are you saying that I don't need the $update and should just use a $save akin to how I post initial data? – Arjan

Answer 1

If you're creating a new entity in your data store you want to use POST/save. If you're updating the data associated with an already existing entity in your data store you want to use PUT/update. Patch is usually reserved for when you just want to update a subset of the entity data.

Look at the RFC

Several applications extending the Hypertext Transfer Protocol (HTTP) require a feature to do partial resource modification. The existing HTTP PUT method only allows a complete replacement of a document. This proposal adds a new HTTP method, PATCH, to modify an existing HTTP resource.

You would supply an id with both PUT and PATCH operations. You would not supply one with a POST operation.

When we load our angular forms it is done one of two ways usually. If the form is loaded when we are creating a new entity then we won't have an id. We will know this in the controller and will call resource.save. If we supply the controller loading the form with an id that's used to pull data from an endpoint to populate the form, we now have the id we can use to do a resource.update or resource.patch operations depending on how much of the entity we are updating.

Here's an example save function that handles both update and save operations. Here we check to see if an id was supplied via the route before we make our resource call.

angular.module('appModule').controller('ExampleCtrl',
['$scope', '$routeParams', 
function($scope, $routeParams) {

    $scope.saveForm = function () {

        //Do input validation before you make a resource call

        if ($routeParams.id) {
            //call resource update since we have an id
        }
        else {
            //call resource save since we don't have an id
        }
    };
}]);

Here's the example from the angularjs documentation:

How to create a custom PUT request:

var app = angular.module('app', ['ngResource', 'ngRoute']);

// Some APIs expect a PUT request in the format URL/object/ID
// Here we are creating an 'update' method
app.factory('Notes', ['$resource', function($resource) {
return $resource('/notes/:id', null,
{
    'update': { method:'PUT' }
});
}]);

// In our controller we get the ID from the URL using ngRoute and $routeParams
// We pass in $routeParams and our Notes factory along with $scope
app.controller('NotesCtrl', ['$scope', '$routeParams', 'Notes',
                               function($scope, $routeParams, Notes) {
// First get a note object from the factory
var note = Notes.get({ id:$routeParams.id });
$id = note.id;

// Now call update passing in the ID first then the object you are updating
Notes.update({ id:$id }, note);

// This will PUT /notes/ID with the note object in the request payload
}]);

Barcot

So sad that you can't just set the default $update() function to use PUT, because then you could just run object.$save() and Angular automatically decides if it should run $update or $create` based on whether it has an ID, but then it goes and uses POST – Kelby