Angularjs $http.get, чтобы json не работал на уровне сервиса

Я разрабатываю приложение angularjs как часть моего обучения angularjs. У меня есть контроллеры, и оттуда я вызываю уровни обслуживания.

leagueManager.service("teamsService", function($http){
    var teams = {};
        $http.get('data/teams.json').then(function(data) {
        teams = data;
    });
    this.getTeams = function(){
        return teams;
    };

});

Я заметил, что из-за асинхронного характера файла $http.get.then данные не извлекаются немедленно, и поэтому я не получил бы "команды", когда я бы назвал getTeams() из контроллера (teamsController) Я ничего не получил.

Любая идея, как мне решить эту проблему?

Вторая попытка: После прочтения отложенных и promises на angular, как было предложено в сообщении ниже, я пробовал следовать, но это все еще не имеет никакого эффекта. Моя переменная команды не заполняется, как я хочу, и они заполняются впоследствии, и это не помогает в моем интерфейсе:

Мой контроллер teamsController.js

leagueManager.controller('teamsController', function($scope, $location, teamsService, $routeParams){
//init function to initialize data when controller is called everytime.
var init = function(){
        $scope.teams = [];
        var promise = teamsService.getTeams();
        promise.then(
        function(data){
            console.log("teams after promise:="+data);
            $scope.teams = data;
        }
        ,function(reason)
        {
                alert('Failed: ' + reason);
        }
        );
        console.log("teams in the scope:="+$scope.teams);
};

init();
});

И вот мой ServiceLayer teamsService.js

leagueManager.service("teamsService", function($http, $q){
this.getTeams = function(){
  var deferred = $q.defer();
     var url = 'data/teams.json';
     $http.get(url).success(function(data, status) {
         // Some extra manipulation on data if you want...
         deferred.resolve(data);
     }).error(function(data, status) {
         deferred.reject(data);
     });
     return deferred.promise;
}
});

Можете ли вы или кто-нибудь помочь мне, что я делаю неправильно? Это то, что печатается в консоли браузера после выполнения:

в области: = teamsController.js: 27

после обеда: = [объект Object], [объект Object], [объект Object], [объект Object], [объект Object]

Это просто показывает, что я получаю объект json, но не в то время, когда захочу. По какой-то причине эта депрессия/обещание не повлияла.

ПОЖАЛУЙСТА, ПОМОГИТЕ ЭТО НОВЫЙ angular ENTHUSIAST

Ответ 1

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

Ресурсы обещания:

В сервисе:

leagueManager.service("teamsService", function($http){
    var deferred = $q.defer();
    $http.get('data/teams.json').then(function(data) {
        deferred.resolve(data);
    });
    this.getTeams = function(){
        return deferred.promise;
    };
});

Затем в контроллере:

$scope.team = {};

var promise = teamsService.getTeams();
promise.then(function(data) {
    $scope.teams = data;
});

Ответ 2

Это должно работать нормально:

myApp.factory('mainFactory',['$http',function($http){

var mainFactory = {};

mainFactory.getRandomUser = function(){
    var promise;
    if(!promise){
        promise = $http.get('http://api.randomuser.me/').success(function(d){
            return d;   
        });
        return promise;
    }
};

mainFactory.getRandomImage = function(){
    var promise;
    if(!promise){
        promise = $http.get('http://lorempixel.com/400/200/').success(function(d){
            return d;   
        });
        return promise;
    }
};

return mainFactory;

}]);