AngularJS $资源RESTful示例

Question

我想使用$ resource来调用我的RESTful Web服务(我还在继续),但是我想先了解一下我的AngularJS脚本是否正确.

todo DTO有: {id, order, content, done}

:cmd是这样我可以打电话api/1/todo/reset来清除数据库中的待办事项表.

以下是我的理解评论的代码:

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

我不确定的一个特别的事情是PATCH方法,我不想更新所有内容,我可以只更新一个字段吗？我正确构造这段代码吗？

Answer 1

$ resource意在从端点检索数据,操纵它并将其发回.你在那里有一些,但你并没有真正利用它来做它的目的.

在您的资源上使用自定义方法很好,但您不想错过OOTB附带的酷炫功能.

编辑:我不认为我最初解释得这么好,但$resource做了一些带回报的时髦的东西.Todo.get()并且Todo.query()都返回资源对象,并在get完成时将其传递给回调.它做了一些奇特的事情,幕后的承诺意味着你可以$save()在get()回调实际触发之前调用它,它会等待.最好只处理promise then()或回调方法中的资源.

标准使用

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

同样,对于您在OP中发布的内容,您可以获取资源对象,然后在其上调用任何自定义函数(理论上):

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

在我去发明自己之前,我会尝试OOTB实现.如果你发现你没有使用任何默认功能$resource,你应该只是自己使用$http它.

更新:Angular 1.2和Promises

从Angular 1.2开始,资源支持承诺.但他们没有改变其余的行为.

要利用promises $resource,您需要$promise在返回值上使用该属性.

使用promises的示例

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

请记住,该$promise属性是与上面返回的值相同的属性.所以你可以变得奇怪:

这些是等价的

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