web-dev-qa-db-fra.com

AngularJS $ resource RESTful exemple

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?

javascriptrestangularjs
144
Tom

$ 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.

Utilisation standard

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.

Mise à jour: Angular 1.2 et promesses

À 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.

Exemple d'utilisation de promesses

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:

Ce sont équivalent

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;
});
210
Ben Lesh

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.

0
William B