AngularJS - o controlador não obtém dados do serviço ao usar $ http
Eu tenho um aplicativo web simples, onde eu gosto de carregar alguns dados do json. No momento, os dados são codificados no meu serviço e tudo está funcionando.
Quando altero meu serviço para carregar os mesmos dados de um arquivo json externo, o controlador processa a exibição antes de obter alguns dados.
É assim que parece agora:
function() {
var tripsService = function() {
var trips = [{ .... SOME DATA }];
this.getTrips = function() {
return trips;
};
};
angular.module('customersApp').service('tripsService', tripsService);
}());
Usando $ http.get:
function() {
var tripsService = function() {
var trips = [];
this.getTrips = function() {
$http.get('trips.json').success(function (data) {
var trips = data;
return trips;
});
};
};
angular.module('customersApp').service('tripsService', tripsService);
}());
Aqui está o meu Plunker:
O que posso fazer para mudar isso? Li algo sobre a adição de propriedade de resolução ao meu routeProvider, mas não consegui resolver o problema!
Atualização: Talvez minha descrição não tenha sido suficientemente precisa e eu precise aprender um pouco mais sobre como lidar com dados! Os dados do json devem ser carregados apenas uma vez, para que qualquer alteração na exibição não recarregue o arquivo json original.
obrigado