使用 AngularJS 的 $resource 查询数据库答案

【问题标题】：Using AngularJS's $resource to query a database使用 AngularJS 的 $resource 查询数据库
【发布时间】：2013-07-09 16:04:23
【问题描述】：

我创建了一个通过 url 工作的 API，基于 node.js、express.js、mongoDB 和 angular.js。

我的 API 是这样调用的：

app.get('/api/posts/:query', api.postsQuery);

因此，如果我输入 localhost:3000/api/posts/<whateverquery>，mongoDB 会将所有相关的 JSON 吐出到我的浏览器，所以它工作得很好。

但是，我正在尝试将其链接到我的 Angular 前端，这会导致问题。我希望用户能够搜索表单并让我的数据库返回正确的记录。这是我的控制器：

function indexCtrl($scope, $http, $resource) {
  $scope.itemSearch = $resource('http://localhost\\:3000/api/posts/:query', 
    {query:''}, {get:{method:'JSONP'}});

  $scope.doSearch = function(){
    $scope.posts = $scope.itemSearch.get({query:$scope.searchTerm});
    console.log($scope.posts[1]) // returns undefined
  }
}

我的问题是，当我运行 $scope.doSearch 时，我在 Chrome 的资源面板中看到这样的查询：所以确实正在加载正确的数据，但它没有附加到 $scope.posts。

我感觉这可能是因为我需要一个回调函数；我尝试使用callback: JSON_CALLBACK，但这会弄乱我的查询/API（因为它会在$resource 调用的末尾添加一个?callback=...，这会破坏查询）。

关于我可以在这里做什么以使其正常工作的任何想法？问题是缺少回调吗？也许我可以在app.get 调用之后添加一些正则表达式，在:query 之后允许任何通配符>

【问题讨论】：

标签： javascript node.js angularjs

【解决方案1】：

将回调添加到您的 $resource 调用中：

$scope.doSearch = function(){
    $scope.itemSearch.get({query:$scope.searchTerm}, function(data){
        $scope.posts = data.posts;
        console.log($scope.posts[1]);
    });
};

在docs 中注意他们使用回调：

var User = $resource('/user/:userId', {userId:'@id'});
User.get({userId:123}, function(u, getResponseHeaders){
    u.abc = true;
    u.$save(function(u, putResponseHeaders) {
    //u => saved user object
    //putResponseHeaders => $http header getter
    });
});

【讨论】：

虽然其他答案有回调，但您的想法是等到回调使 $scope.posts=data 使其正常工作。不过，稍微更正一下，如果您查看我最初问题中的屏幕截图，帖子数据将在 data.posts 返回，因此我需要使 $scope.posts = data.posts 使其正常工作。谢谢！

【解决方案2】：

根据文档的外观（并且知道 AngularJS 正常异步执行所有操作），看起来下面的代码应该可以工作

$scope.doSearch = function(){
    $scope.posts = $scope.itemSearch.get({query:$scope.searchTerm}, function(){
        console.log($scope.posts[1]) // hopefully is something
    });
  }

http://docs.angularjs.org/api/ngResource.$resource

由于事情是异步完成的（以避免阻塞/等待/暂停），因此对于任何可能需要时间的事情（网络调用），通常都会有回调或承诺。

【讨论】：

【解决方案3】：

解决此问题的“Angular”方法是使用 $q library 作为 Promise。

function indexCtrl($scope, $resource, $q) {
  var defer = $q.defer();

  var resource = $resource('http://localhost\\:3000/api/posts/:query', {query:''}, {get:{method:'JSONP'}});

  resource.get({query:'mySearchQuery'}, defer.resolve);

  defer.promise.then(function(data) {
    $scope.posts = data;
  });
}

【讨论】：