145 votes

AngularJS $resource exemple reposant

Je voudrais utiliser $ressource d'appeler mon service web RESTful, (qui je travaille toujours sur) mais je voudrais savoir si j'ai obtenu mon AngularJS script correct d'abord.

La todo DTO a: {id, order, content, done}

:cmd est si je peux appeler api/1/todo/reset pour effacer la tâche à table dans la base de données.

Voici le code avec des commentaires 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, je ne suis pas sûr, c'est le PATCH de la méthode, je ne veux pas tout mettre à jour, puis-je mettre à jour un champ seulement? Je suis la construction de ce morceau de code correctement?

211voto

Ben Lesh Points 39290

$ressource est destinée à récupérer des données à partir d'un point de terminaison, de le manipuler et de le renvoyer. Vous avez certains de que là-dedans, mais vous n'êtes pas vraiment en tirant parti de ce pour quoi il a été fait pour faire.

C'est bien d'avoir des méthodes personnalisées sur vos ressources, mais vous ne voulez pas manquer sur les fonctionnalités, il est livré avec OOTB.

EDIT: je ne pense pas que j'ai expliqué assez bien à l'origine, mais $ressource de certains des trucs funky avec des rendements. Todo.get() et Todo.query() à la fois le retour de l'objet de la ressource, et de la passer dans le rappel lorsque l'obtenir terminée. Il fait un peu de fantaisie avec des promesses derrière les scènes qui signifie que vous pouvez appeler $save() avant le get() rappel fait feux de, et il va attendre. C'est probablement le meilleur pour faire face à vos ressources à l'intérieur d'une promesse, alors() 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 posté dans le po, vous pourriez obtenir un objet de la ressource et ensuite appeler l'un de vos fonctions personnalisées (en théorie):

var something = src.GetTodo({id: 123});
something.foo = 'hi there';
something.UpdateTodo();

J'avais de l'expérience avec l'OOTB mise en œuvre avant que j'ai inventé mon propre cependant. Et si vous trouvez que vous n'êtes pas à l'aide de l'une des fonctions par défaut de $ressource, vous devriez probablement juste être à l'aide de $http.

Mise à jour: Angulaire 1.2 et les Promesses

Comme Angulaire 1.2, les ressources de soutien promesses. Mais ils n'ont pas changé le reste du comportement.

Pour tirer parti des promesses $resource, vous devez utiliser l' $promise de la propriété sur la valeur retourné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
});

Il suffit de garder à l'esprit que le $promesse de la propriété est une propriété sur les mêmes valeurs qu'elle était de retour ci-dessus. De sorte que vous pouvez obtenir bizarre:

Ce sont les équivalents des

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

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X