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

时间:2012-08-07 16:14:57

标签: angularjs

在不使用$resource的情况下,在AngularJS中连接服务器数据源的建议方法是什么。

$resource有许多限制,例如:

  1. 没有使用适当的未来
  2. 不够灵活

2 个答案:

答案 0 :(得分: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 :(得分:26)

我建议您使用$resource

它可能支持(url覆盖)下一版本的Angularjs。 然后你就可以像这样编码:

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

可能你可以处理更高抽象级别的代码。