使用带有快速框架的angular.js $资源

时间:2013-02-28 06:27:02

标签: node.js express angularjs

我是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的异步性质,但我仍然遗漏了某些内容或做错了什么。

提前致谢并感谢您的帮助。

3 个答案:

答案 0 :(得分:2)

这与angular $ resource的异步性质有关。

$scope.savedItems = storageService.savedItems();

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

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

答案 1 :(得分:1)

就像快速说明一样。您还可以观看savedItems。

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

答案 2 :(得分:0)

我怀疑,节点没有返回mysql结果。它适用于静态文件而不适用于mysql的事实排除了角度问题。您可以为http调用或chrome开发人员日志添加firebug日志。这可以为此事提供更多启示