将 angular.js $resource 与 express 框架一起使用答案

【问题标题】：Using angular.js $resource with express framework将 angular.js $resource 与 express 框架一起使用
【发布时间】：2013-10-17 17:19:28
【问题描述】：

我是 Angular JS 和 node.js/express 框架的新手。我正在开发一个使用 angular 和 express 框架的小型应用程序。我有几个端点运行的快速应用程序。一个用于 POST 操作，一个用于 GET 操作。我正在使用 node-mysql 模块来存储和从 mysql 数据库中获取。

此应用程序正在我的笔记本电脑上运行。

angular.js 客户端：

控制器

function ItemController($scope, storageService) {
   $scope.savedItems = storageService.savedItems();
   alert($scope.savedItems);
}

服务

myApp.service('storageService', function($resource) {

    var Item = $resource('http://localhost\\:3000/item/:id',
      {
         id:'@id',
      },

      {
         query: {
            method: 'GET',
            isArray: true
      }
    );

    this.savedItems = function() {
      Item.query(function(data){
      //alert(data);
          return data;
       });
    }

带有mysql数据库的Express服务器：

...
app.get('/item', item.list);
...

items.js
---------
exports.list = function(req, res) {

   var sql = 'select * from item';

   connect: function() {
      var mysql = require('mysql');
      var connection = mysql.createConnection({
        host     : 'localhost',
        user     : 'admin',
        database : 'test'
      });
      return connection;
   },

   query: function(sql) {
      var connection = this.connect();
      return connection.query(sql, function(err, results) {
         if (err) throw err;
         return results;
      });
   },
   res.send(results);
};

当我从服务器发送静态项目数组 (json) 时，$scope.savedItems() 正在被填充。

但是当我访问数据库中的项目时，即使服务器正在返回项目，客户端中的 $scope.savedItems 也是空的。直接使用 $http 也无济于事。

我从 angular.js 文档中阅读了 $resource 和 $http 的异步性质，但我仍然遗漏了什么或做错了什么。

在此先感谢您的帮助。

【问题讨论】：

标签： node.js express angularjs

【解决方案1】：

这与角度 $resource 的异步特性有关。

$scope.savedItems = storageService.savedItems();

立即返回一个空数组，在数据返回后填充。因此，您的 alert($scope.savedItems); 将只显示一个空数组。如果稍后再查看$scope.savedItems，您会发现它已被填充。如果您想在数据返回后立即使用数据，您可以使用回调：

$scope.savedItems = storageService.savedItems(function(result) {alert(result); });

【讨论】：

谢谢亚历山大。视图呈现时，我没有看到回调获取值（并与范围绑定）。我一直看到呈现空视图。

【解决方案2】：

就像一个简短的说明。您还可以观看已保存的项目。

function ItemController($scope, storageService) {
   $scope.savedItems = storageService.savedItems();
   $scope.$watch(function() {
      return $scope.savedItems;
   }, function(newValue, oldValue) {
      if (typeof newValue !== 'undefined') {
         // Do something cool
      }
   },
   true);
}

【讨论】：

谢谢弗莱克。我尝试使用 watch 而没有填充值。当 UI 呈现时，没有要绑定的值。不知道如何控制渲染和绑定值的时间。
这个答案有几个问题。正如所写，storageService.savedItems() 不返回任何内容，因为它依赖回调来实际检索数据（如下面的 Aleksander Blomskøld 所捕获）。第二，你可能想要$watchCollection 而不是$watch。
@KevinStone $watchCollection 在 AngularJS 的稳定版本中不可用，据我所知（此时为 1.0.8），除此之外，您可以使用 $watch 做任何事情。请善待并解释为什么你认为它更优秀以及 $watch 的问题。
$watch 仅按身份比较对象，因此 [1] != [1] 即使它们在列表中具有相同的成员。您可以将第三个参数（在getter 和回调之后）传递给true，而$watch 则通过对象相等性进行比较。见docs.angularjs.org/api/ng.$rootScope.Scope#$watch
@KevinStone 我知道，但稳定版本中仍然没有 $watchCollection，所以告诉人们 $watch 是一个问题在我看来是个问题。除此之外，如果自从我发布它以来情况发生了变化，你为什么不直接编辑我的答案，而不是简单的否决...

【解决方案3】：

我怀疑，节点没有返回 mysql 结果。它适用于静态文件而不适用于 mysql 的事实排除了角度问题。您可以为 http 调用或 chrome 开发人员日志添加 firebug 日志吗？这可以更清楚地说明问题

【讨论】：