AngularJS: Understanding this PUT example

Question

This is an example: http://docs.angularjs.org/api/ngResource/service/$resource all the way down.

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

I'm not too sure what this part does, though. I am currently using this:

MyService.get(function(data){//do stuff with data}); and after making the updates, I would like to call MyService.update()

Parts I don't understand about: What is the object that Notes is passing? Why should Notes.update have 2 parameters passed to it? I am currently receiving data in order, but when I try to PUT, I get some errors. All examples use these parameters, so I'm just wondering why these parameters are used.

* In particular, the error is that the PUT method is not allowed using the Access-Control-Allow-Methods methods. "even if it is. Oddly enough, I click on the error on the Chrome Networks tab and say“ 200. ”I assume the OPTION command went through to check if PUT is allowed, but then PUT failed.

  Request Method:OPTIONS Status Code:200 OK Access-Control-Request-Headers:accept Access-Control-Request-Method:PUT Access-Control-Allow-Headers:* Access-Control-Allow-Methods:* Access-Control-Allow-Origin:* Access-Control-Max-Age:3600 Allow:GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS, PATCH Content-Length:0 Date:Mon, 17 Mar 2014 21:39:26 GMT Server:Apache-Coyote/1.1 

Answer 1

You can use your resource in two ways for your example, and that is what you are using ...

 app.factory('Notes', ['$resource', function($resource) { return $resource('/notes/:id', null, { 'update': { method:'PUT' } }); }]); 

So, the first way to update a note:

 Notes.update({ id: 42 }, { Content: "My Note" }); 

As shown on the site, the first object is the parameter object, so you will put it in "/ notes / 42", the second object is the object that you put, that is, it will be the content for the request.

There is also a second option:

 var note = Notes.get({ id: 42 }); note.Content = "Changed the note"; node.$update({ id: 42 }); 

Finally, if you configure your resource to map the properties of the returned object to the parameters, you can avoid providing the identifier in the $ update call like this:

 app.factory('Notes', ['$resource', function($resource) { return $resource('/notes/:id', { id:'@ID'}, { 'update': { method:'PUT' } }); }]); 

And then:

 var note = Notes.get({ id: 42 }); note.Content = "Changed the note"; node.$update(); 

Assuming the server returns { Content: "My Note", ID: 42 } to the get call.

NOTE: Keep in mind that they are all simplified; the last 2 of them do not actually work due to the asynchronous nature of the resource. To fix this directly in the above example, add a Success handler or use the Promise object ... So:

 var note = Notes.get({ id: 42 }, function() { note.Content = "Changed the note"; node.$update({ id: 42 }); }); 

and

 var note = Notes.get({ id: 42 }, function() { note.Content = "Changed the note"; node.$update(); }); 

Accordingly ... It works for them, but get-update-put is thus unlikely, instead you should usually interact with the user.

I honestly have never had a problem. Issuing a PUT request, so why are your mistakes that I cannot handle.

---

To help you debug your situation, I can recommend using, for example, (Or ​​any other tool that allows you to create HTTP requests and change headers, etc.), https://chrome.google.com/webstore/detail/ dev-http-client / aejoelaoggembcahagimdiliamlcdmfm? hl = en

To check if your servlet really doesn’t accept tagging at this URL. If the server really accepts puts (you will be able to execute PUT with this tool), the next thing will be to actually put the correct URL ...

We often use this small interceptor to register all Angular requests (therefore, they are separate from regular browser requests, for example, getting styles, images, etc.).

 myModule.config(['$httpProvider', function ($httpProvider) { $httpProvider.interceptors.push(['$q', function ($q) { return { 'request': function (config) { var paramsStr = [], prefix = ""; angular.forEach(config.params, function (val, key) { paramsStr.push(key + "=" + val); prefix = "?"; }); console.log(config.method + ": " + config.url + prefix + paramsStr.join('&')); return config || $q.when(config); } }; }]); }]); 

Answer 2

If you want to edit any content that I think you want, use put.

$scope.currentLocation - my object or array

 $scope.edit = function () { var editableLocation = $scope.currentLocation.copy($scope.currentLocation); editableLocation.put().then(function() { console.log('Location edited'); }); }; 

And then in your template you can do it like this:

 <form action="edit()"> <input type="text" ng-model="currentLocation.name"> <input type="button" value="Save"> </form>