从服务器获取数据的推荐方法


145

在不使用AngularJS的情况下,建议使用哪种方法连接到服务器数据源$resource

$resource有很大的局限性,如:

  1. 没有使用适当的期货
  2. 不够灵活

6
鉴于此问题(https://github.com/angular/angular.js/issues/415)已关闭,$ resource是否仍具有不使用适当期货的限制,这是否仍然正确?(我是Angular的新手,如果问题令人困惑,我深表歉意。)编辑-此提交(github.com/angular/angular.js/commit/…)似乎也暗示$ resource可能不再具有该限制了?
詹森·赛德斯

1
那么在这里回答您自己的问题是合法的..好吗?按下“问问题”,即“分享您的知识”
霍姆斯2013年

Answers:


229

在某些情况下,与后端通话时$ resource可能不合适。这显示了如何在不使用资源的情况下设置类似$ resource的行为。

angular.module('myApp').factory('Book', function($http) {
  // Book is a class which we can use for retrieving and 
  // updating data on the server
  var Book = function(data) {
    angular.extend(this, data);
  }

  // a static method to retrieve Book by ID
  Book.get = function(id) {
    return $http.get('/Book/' + id).then(function(response) {
      return new Book(response.data);
    });
  };

  // an instance method to create a new Book
  Book.prototype.create = function() {
    var book = this;
    return $http.post('/Book/', book).then(function(response) {
      book.id = response.data.id;
      return book;
    });
  }

  return Book;
});

然后,在您的控制器内部,您可以:

var AppController = function(Book) {
  // to create a Book
  var book = new Book();
  book.name = 'AngularJS in nutshell';
  book.create();

  // to retrieve a book
  var bookPromise = Book.get(123);
  bookPromise.then(function(b) {
    book = b;
  });
};

1
也许是一个菜鸟问题,但是如何将其扩展到允许get()返回多个响应而不仅仅是单个响应的问题?
内特·邦尼

2
@NathanBunney,您可以让您的静态get方法循环遍历结果并构建一个Books数组。
Ben Lesh 2012年

4
@NathanBunney'Book.getAll = function(){return $ http.get('/ Book')。then(function(response){var books = []; for(var i = 0; i <response.data.length ; i ++){books.push(new Book(response.data [i]));}还书本;}); };'
Yair Nevet

2
您将如何在控制器之间共享book或的集合book
卢卡斯

1
这很棒(显然是因为Misko创建了框架),但是我一直在努力弄清楚如何使其可重用。如果我只想实现一次CRUD函数,然后在仅需要urlBase参数(最好存储在原型中,以便每个实例不需要urlBase的新副本)的子工厂/服务中继承其功能,那怎么办?我这样做吗?
迪恩·斯塔姆勒2014年

26

我建议您使用$ resource

它可能在下一版本的Angularjs中支持(URL覆盖)。然后,您将可以像这样进行编码:

// need to register as a serviceName
$resource('/user/:userId', {userId:'@id'}, {
    'customActionName':    {
        url:'/user/someURI'
        method:'GET',
        params: {
            param1: '....',
            param2: '....',
        }
    },
     ....
});

可以在ctrl范围内像这样处理返回回调。

// ctrl scope
serviceName.customActionName ({
    paramName:'param',
    ...
}, 
function (resp) {
    //handle return callback
}, 
function (error) {
    //handler error callback
});

可能您可以在更高的抽象级别上处理代码。


2
当前版本的angular.js在$ resource模块中支持url覆盖。
谢谢

16
哈哈,您建议该框架的实际创建者:P
HeberLZ 2014年

11
我的天啊!我感到很ham愧。
谢谢您,2014年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.