ngResource/$resource .query() not loading data

Question

I have built an test app very similar to the one from AngularJS' tutorial, with 1 major difference: It is initialized with Yeoman.

My factory code looks like this:

var deClashServices = angular.module('deClashServices', ['ngResource']);

deClashServices.factory('Session', 
  ['$resource',
  function ($resource) {
    return $resource('views/sessions.json');
  }]
);

Yes, angular-resource.js has been added to index.html. As well as my Controller, and Service js files. Yes, deClashServices has been listed as a dependency on the ng-app, as seen here in my app.js:

var declashAngularApp = angular.module('declashAngularApp', [
  'ngRoute',

  'deClashServices',
  'deClashControllers'
]);

declashAngularApp.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      })
      .when('/sessions', {
        templateUrl: 'views/sessions.html',
        controller: 'SessionListCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  }]);

and here is my Controller:

var deClashControllers = angular.module('deClashControllers', []);

deClashControllers.controller('MainCtrl', 
    ['$scope', 'Session', 
    function ($scope, Session) {
        $scope.sessions = Session.query();
        $scope.awesomeThings = [
          'HTML5 Boilerplate',
          'AngularJS',
          'Karma'
        ];
    }]
);

in main.html, which is under MainCtrl, {{awesomeThings}} produces the array of 3 strings, as expected. But {{sessions}} produces an empty array.

To pinpoint that it is .query() that's not loading it, I tried using a factory with a simple JSON file: {"sessions":"number1"}

deClashServices.factory('Session', 
  ['$resource',
  function ($resource) {
    return $resource('views/simple.json');
  }]
);

And my controller is like this:

deClashControllers.controller('MainCtrl', 
    ['$scope', 'Session', 
    function ($scope, Session) {
        $scope.sessions = {};
        Session.get(function(response) {
            $scope.sessions = response.sessions;
        });
        $scope.awesomeThings = [
          'HTML5 Boilerplate',
          'AngularJS',
          'Karma'
        ];
    }]
);

This code works. Switching back to the JSON array and trying a callback with .query.$promise.then(callback-function) however, does not work.

I'm pretty lost and confused now, as the tutorial code from AngularJS with almost the exact same structure works.

I suspect that there's something wrong in the way I'm using .query(), but at the same time the same way is used by the Angular Tutorial and there isn't a problem there.

Just in case that it might be outside the few code snippets I've shown, here in the code for the entire project: github

score 0 · Answer 1 · answered Jan 25 '14 at 12:54

Angular's resource-service doesnt return promise. It returns an empty object so that when the request returns from server resource-service can populate that object with fetched data because it has a reference to that object.

So if you want to react to returning data you have to use a callback function or better yet use $http-service, because it return promise.

Look at this plkr

I also recommend you take a look at Restangular

ngResource/$resource .query() not loading data

1 Answers1