J'aimerais utiliser $ resource pour appeler mon service Web RESTful (sur lequel je travaille toujours), mais j'aimerais savoir si mon script AngularJS est correct en premier.
Le todo DTO a: {id, order, content, done}
:cmd
signifie que je peux appeler api/1/todo/reset
pour effacer la table à faire de la base de données.
Voici le code avec le commentaire de ma compréhension:
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();
}
Une chose en particulier que je ne suis pas sûre, c'est la méthode PATCH. Je ne veux pas tout mettre à jour. Puis-je mettre à jour un seul champ? Est-ce que je construis correctement ce morceau de code?
$ resource était censé extraire des données d’un noeud final, les manipuler et les renvoyer. Vous en avez une partie , mais vous ne la exploitez pas vraiment pour ce que cela a été fait.
Il est bien d’avoir des méthodes personnalisées sur votre ressource, mais vous ne voulez pas manquer les fonctionnalités intéressantes fournies avec OOTB.
EDIT: Je ne pense pas avoir suffisamment expliqué cela à l'origine, mais $resource
fait des trucs géniaux avec des retours. Todo.get()
et Todo.query()
les deux renvoient l'objet ressource, et transmettez-le au rappel pour obtenir la fin de l’obtention. Il fait des choses fantaisistes avec des promesses en coulisse qui vous permettent d’appeler $save()
avant que le callback get()
ne se déclenche, et il attendra. Il est probablement préférable de traiter votre ressource dans une promesse then()
ou la méthode de rappel.
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});
De même, dans le cas de ce que vous avez publié dans le PO, vous pouvez obtenir un objet ressource, puis appeler l'une de vos fonctions personnalisées (théoriquement):
var something = src.GetTodo({id: 123});
something.foo = 'hi there';
something.UpdateTodo();
J'essayais avec la mise en œuvre OOTB avant d'y aller et d'inventer la mienne. Et si vous constatez que vous n'utilisez aucune des fonctionnalités par défaut de $resource
, vous devriez probablement simplement utiliser $http
par lui-même.
À partir de Angular1.2, les ressources sont compatibles avec les promesses. Mais ils n'ont pas changé le reste du comportement.
Pour exploiter les promesses avec $resource
, vous devez utiliser la propriété $promise
sur la valeur renvoyée.
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
});
N'oubliez pas que la propriété $promise
est une propriété des mêmes valeurs que celles renvoyées ci-dessus. Donc, vous pouvez devenir bizarre:
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;
});
vous pouvez simplement faire $scope.todo = Todo.get({ id: 123 })
. .get()
et .query()
d'une ressource renvoient immédiatement un objet et le remplissent avec le résultat de la promesse ultérieurement (pour mettre à jour votre modèle). C'est pas une promesse typique, raison pour laquelle vous devez utiliser un callback ou la propriété $ promise si vous souhaitez exécuter un code spécial après l'appel. Mais il n'est pas nécessaire de l'affecter à votre étendue dans un rappel si vous ne l'utilisez que dans le modèle.