ngResource/$resource .query() 不加载数据答案

【问题标题】：ngResource/$resource .query() not loading datangResource/$resource .query() 不加载数据
【发布时间】：2014-01-25 20:54:44
【问题描述】：

我已经构建了一个与 AngularJS 教程中的测试应用程序非常相似的测试应用程序，但有一个主要区别：它是使用 Yeoman 初始化的。

我的工厂代码如下所示：

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

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

是的，angular-resource.js 已添加到 index.html。以及我的 Controller 和 Service js 文件。是的，deClashServices 已被列为对 ng-app 的依赖项，如我的 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: '/'
      });
  }]);

这是我的控制器：

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

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

在MainCtrl 下的main.html 中，{{awesomeThings}} 按预期生成3 个字符串的数组。但是{{sessions}} 会产生一个空数组。

为了确定是 .query() 没有加载它，我尝试使用带有简单 JSON 文件的工厂：{"sessions":"number1"}

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

而我的控制器是这样的：

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

此代码有效。但是，切换回 JSON 数组并尝试使用 .query.$promise.then(callback-function) 进行回调不起作用。

我现在非常迷茫和困惑，因为来自 AngularJS 的教程代码具有几乎完全相同的结构。

我怀疑我使用 .query() 的方式有问题，但同时 Angular 教程使用了相同的方式并且那里没有问题。

以防它可能超出我展示的几个代码 sn-ps，这里是整个项目的代码： github

【问题讨论】：

标签： javascript angularjs angular-resource angularjs-resource

【解决方案1】：

Angular 的资源服务不返回承诺。它返回一个空对象，以便当请求从服务器返回时，资源服务可以使用获取的数据填充该对象，因为它具有对该对象的引用。

所以如果你想对返回的数据做出反应，你必须使用回调函数或者更好使用 $http-service，因为它返回承诺。

看看这个plkr

我也建议你看看Restangular

【讨论】：