JSON初始化服务中的数据

Question

我正在开发一个小的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; 
}]); 

我不知道为什么第二代码片段的作品，而不是第一个。有人能帮我理解吗？

Answer 1

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

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

return instance; 

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

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

只要记住，无论你在哪里访问你的服务，你必须与它互动作为承诺使用then。

Answer 2

您可能会更好使用ngResource关闭，在这种情况下，你的代码应该是这个样子：

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

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

Answer 3

访问数据只是举一个完整的示例，这里是擒纵器http://plnkr.co/edit/VsuAKNavPbHL7RWbrvKD?p=preview。接下来的想法与乔希大卫米勒提出的一样。