Using angular.js $resource with express framework

Question

Using angular.js $resource with express framework

I am new to Angular JS and node.js/express framework. I am working on a small application which uses angular and express frameworks. I have express app running with couple of end points. One for POST action and one for GET action. I am using node-mysql module to store and fetch from mysql database.

This application is running on my laptop.

angular.js client:

controller

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

service

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

Express server with mysql database:

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

When I send static array of items (json) from server, $scope.savedItems() is getting populated.

but when I access items in database, even though server is returning items, $scope.savedItems in client is empty. Using $http directly did not help either.

I read async nature of $resource and $http from angular.js documentation and I am still missing something or doing something wrong.

Thanks in advance and appreciate your help.

node.js
express
angularjs

Answer 1

This has to do with the async nature of angular $resource.

$scope.savedItems = storageService.savedItems();

Returns immediately an empty array, which is populated after the data returns. Your alert($scope.savedItems); will therefore show only an empty array. If you look at your $scope.savedItems a little bit later you would see that it has been populated. If you would like to use the data just after it has been returned you can use a callback:

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

Answer 2

Just as a quick note. You could also watch the 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);
}

Answer 3

i suspect, node is not returning mysql results. The fact that it works for static files and not for mysql rules out issues with angular. Can you add firebug logs for the http call or chrome developer logs. This can shed more light on the matter