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

举一个完整的例子，这里是plunker http://plnkr.co/edit/VsuAKNavPbHL7RWbrvKD?p=preview。接下来的想法和Josh David Miller提到的一样。

JSON初始化服务中的数据

3 个答案: