StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>$resource was meant to retrieve data from an endpoint, manipulate it and send it back. You've got <em>some</em> of that in there, but you're not really leveraging it for what it was made to do.</p> <p>It's fine to have custom methods on your resource, but you don't want to miss out on the cool features it comes with OOTB.</p> <p><strong>EDIT</strong>: I don't think I explained this well enough originally, but <code>$resource</code> does some funky stuff with returns. <code>Todo.get()</code> and <code>Todo.query()</code> both <em>return</em> the resource object, <em>and</em> pass it into the <em>callback</em> for when the get completes. It does some fancy stuff with promises behind the scenes that mean you can call <code>$save()</code> before the <code>get()</code> callback actually fires, and it will wait. It's probably best just to deal with your resource inside of a promise <code>then()</code> or the callback method.</p> <h3>Standard use</h3> <pre><code>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}); </code></pre> <p>Likewise, in the case of what you posted in the OP, you could get a resource object and then call any of your custom functions on it (theoretically):</p> <pre><code>var something = src.GetTodo({id: 123}); something.foo = 'hi there'; something.UpdateTodo(); </code></pre> <p>I'd experiment with the OOTB implementation before I went and invented my own however. And if you find you're not using any of the default features of <code>$resource</code>, you should probably just be using <code>$http</code> on it's own.</p> <h2>Update: Angular 1.2 and Promises</h2> <p>As of Angular 1.2, resources support promises. But they didn't change the rest of the behavior.</p> <p>To leverage promises with <code>$resource</code>, you need to use the <code>$promise</code> property on the returned value.</p> <h3>Example using promises</h3> <pre><code>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 }); </code></pre> <p>Just keep in mind that the <code>$promise</code> property is a property on the same values it was returning above. So you can get weird:</p> <h3>These are equivalent</h3> <pre><code>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; }); </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload