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

Просто чтобы дать полный пример, вот плункер http://plnkr.co/edit/VsuAKNavPbHL7RWbrvKD?p=preview. Идея, о которой идет речь, точно такая же, как упоминала Джош Дэвид Миллер.

Answer 3

Вы могли бы быть лучше, используя ngResource, в этом случае ваш код должен выглядеть примерно так:

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

Убедитесь, что myModule имеет ngResource в своем списке зависимостей. Затем в вашем контроллере вы можете получить доступ к данным с contactService.get()