当前位置: 首页 > 面试题库 >

AngularJS $ resource RESTful示例

东门越
2023-03-14
问题内容

我想使用$ resource调用我的RESTful Web服务(我仍在使用它),但是我想知道我是否首先正确地使用了AngularJS脚本。

待办事项DTO具有: {id, order, content, done}

:cmd因此,我可以调用api/1/todo/reset以清除数据库中的todo表。

这是带有我的理解注释的代码:

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方法,我不想更新所有内容,可以仅更新一个字段吗?我是否正确构建了这段代码?


问题答案:

$ resource旨在从端点检索数据,对其进行处理并将其发送回。您已经有了 其中的一些功能 ,但是您并没有真正利用它来完成它。

在您的资源上有自html" target="_blank">定义方法是很好的,但是您不想错过OOTB附带的很酷的功能。

编辑 :我认为我本来解释得不够好,但是$resource做了一些带有回报的时髦东西。Todo.get()Todo.query()两个
返回 的资源对象, 把它传递到 回调
的GET完成时。它在幕后做了一些花哨的承诺,这意味着您可以$save()get()回调实际触发之前调用,并且它将等待。最好只在promise
then()或callback方法中处理资源。


标准使用

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开始,资源支持承诺。但是他们没有改变其余的行为。

$resource通过使用诺言,您需要$promise在返回值上使用属性。

使用承诺的示例

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


 类似资料:
  • 本文向大家介绍angularJS 中input示例分享,包括了angularJS 中input示例分享的使用技巧和注意事项,需要的朋友参考一下 这里给大家分享一则input指令的使用示例 代码很简单,小伙伴们自由扩展下,希望大家能够喜欢

  • 本文向大家介绍AngularJS的Filter的示例详解,包括了AngularJS的Filter的示例详解的使用技巧和注意事项,需要的朋友参考一下 贴上几个有关Filter使用的几个示例。 1. 首先创建一个表格 加上样式,显示如图 2. 看到价格个时间显示怪怪的,好,修改一下表格。 重新运行 3. 这样一下,确实不碍眼了。但是描述太长了吧,能不能超过一定字数,就不显示了,以...结尾? 好,在表

  • 本文向大家介绍AngularJS 简单过滤器示例,包括了AngularJS 简单过滤器示例的使用技巧和注意事项,需要的朋友参考一下 示例 过滤器格式化表达式的值以显示给用户。它们可以在视图模板,控制器或服务中使用。本示例创建一个过滤器(addZ),然后在视图中使用它。此过滤器所做的全部工作是在字符串的末尾添加大写字母“ Z”。 example.js example.html 在视图内部,过滤器采用

  • 问题内容: 在我的应用程序中,我尝试显示base64图像… 例如我有: 在网址上: 在ng-repeat循环中,我有: 但结果我看到了: 但为什么?如何显示我的图像数据? 问题答案: 如果映像来自远程服务器,则可以像下面这样在控制器中获取base64内容: 然后在视图上显示 当图像位于本地磁盘/电话上时,首先您可以从 然后将绑定为

  • 本文向大家介绍AngularJS Ajax详解及示例代码,包括了AngularJS Ajax详解及示例代码的使用技巧和注意事项,需要的朋友参考一下 AngularJS提供$http控制,可以作为一项服务从服务器读取数据。服务器可以使一个数据库调用来获取记录。 AngularJS需要JSON格式的数据。一旦数据准备好,$http可以用以下面的方式从服务器得到数据。 在这里,data.txt中包含的学

  • 本文向大家介绍AngularJs Scope详解及示例代码,包括了AngularJs Scope详解及示例代码的使用技巧和注意事项,需要的朋友参考一下 一、什么是Scope?   scope(http://code.angularjs.org/1.0.2/docs/api/ng.$rootScope.Scope)是一个指向应用model的object。它也是expression(http://ww