JSON для инициализации данных в службе

Я разрабатываю небольшое приложение 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;
}]);

Я не знаю, почему работает второй фрагмент кода, а не первый. Может кто-нибудь, пожалуйста, помогите мне понять?

Ответы

Ответ 1

$http является асинхронным, поэтому вы не можете вернуть массив, потому что, когда вы его возвращаете, у него, вероятно, пока нет данных. Вы действительно должны вернуть обещание:

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

return instance;

И затем в вашем контроллере (или в другой службе):

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

Просто помните, что независимо от того, где вы обращаетесь к своему сервису, вы должны взаимодействовать с ним как обещание, используя then.

Ответ 2

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

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

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