JSON 用于初始化服务中的数据答案

【问题标题】：JSON to Initialize Data in ServiceJSON 用于初始化服务中的数据
【发布时间】：2013-02-16 07:47:54
【问题描述】：

我正在开发一个小型 AngularJS 应用程序，目前正在努力创建服务。

我有一个服务作为提供联系人（姓名、地址...）的后端。到目前为止，它们被硬编码为服务中的数组 (instance.contacts=[...])，但现在我正试图从 json 文件中读取它们：

myModule.factory('contactService', ['$http',function ($http) {
    var instance = {};

    $http.get('contacts.json').success(function (data) {
        instance.contacts = data;
    });

    return instance;
}]);

我在浏览器控制台中看到文件已成功读取，但我在屏幕上看不到任何更改。

所以我尝试了以下方法，并且成功了：

myModule.factory('contactService', ['$http',function ($http) {
    var instance = {
        contacts:[]
    };

    $http.get('contacts.json').success(function (data) {
        angular.forEach(data, function(item) {
            instance.contacts.push(item);
        });
    });

    return instance;
}]);

我不知道为什么第二个代码 sn-p 有效，而不是第一个。有人可以帮我理解吗？

【问题讨论】：

你能告诉我们剩下的代码吗？你在哪里访问它？ $http 返回一个承诺，但我没有看到您的服务返回 anything。
对不起，这只是一个sn-p，我无意中删除了“返回实例”部分。我会把它放回去。
return instance 实际上是损坏的。看我的回答。

标签： javascript angularjs

【解决方案1】：

$http 是异步的，所以你不能返回一个数组，因为当你返回它时，它可能还没有任何数据。您实际上必须返回承诺：

var instance = $http('contacts.json');

return instance;

然后在您的控制器（或其他服务）中：

contactService.then(function(response) {
  $scope.contacts = response.data;
});

请记住，无论您在哪里访问您的服务，您都必须使用then 与它进行交互作为一个承诺。

【讨论】：

好的，我想我将在通用服务和$http 访问之间分开......

【解决方案2】：

使用ngResource 可能会更好，在这种情况下，您的代码应该如下所示：

myModule.factory('contactService', function ($resource) {
    return $resource('contacts.json', {}, {
        get: {method: 'GET', isArray: true}
    });
})

确保 myModule 在其依赖项列表中有 ngResource。然后在您的控制器中，您可以使用 contactService.get()

访问数据

【讨论】：

我建议不要使用ngResource，如果服务器端 API 不安全 - 它会引起很多麻烦。但如果是的话，那就太好了！
没错，我只是假设现在一切都是 RESTful 的！
我无法直接返回 $resource，因为我的服务还有其他方法（saveContact()、getContactById() 等）。我的目标是在数组中预加载一个数据集，仅此而已 - 我还没有一个安静的服务器。

【解决方案3】：

举一个完整的例子，这里是 plunker http://plnkr.co/edit/VsuAKNavPbHL7RWbrvKD?p=preview。随后的想法与 Josh David Miller 提到的相同。

【讨论】：