using promise with angular.js

Question

i use angular.js in front side.

in my controller.js i defined an init() method that will be called in

init of my controller.

Init method definition:

var init = function () {
$scope.callTeamsService();
if ($scope.teams.length == 0){
....
}else{
...
}
.....

};

in $scope.callTeamsService i filled in $scope.teams variable.

$scope.callTeamsService method definition:

$scope.callTeamsService = function(){
        NavService.getTeams(function (response) {
                $timeout(function () {
                    $scope.teams = response;                        
                    }
                }, 200);
            });
    };

In my service.js i defined a getTeams method as follow:

service.getEquipes = function (callback) {
$http.get(urlBase+'users/' + $rootScope.globals.currentUser.loggedUser.idUser + '/teams')
                    .success(function (response) {
                        callback(response);
                    });
            };

My problem is when $scope.teams.length == 0 condition is reached the

service.getEquipes method in my service.js is not yet called.

How can i modify this code in order to finish the execution of $scope.callTeamsService method before reaching $scope.teams.length == 0 condition.

Answer 1

  service/factory

   service.getEquipes = function () {
        return $http.get(urlBase+'users/' + $rootScope.globals.currentUser.loggedUser.idUser + '/teams');

        };


 // controller 
    var promise = NavService.getTeams.then (
           function(data) {
             //assign to $scope or do logic
           },
           function(err){
               console.log(err)
           } 
      )

Answer 2

How can i modify this code in order to finish the execution of $scope.callTeamsService method before reaching $scope.teams.length == 0 condition.

That's the wrong way round - you need to wait with executing the $scope.teams.length == 0 condition until the $scope.callTeamsService method has finished.

The classical method would be to give the $scope.callTeamsService method a callback parameter and call that in the timeout instead of $scope.teams = response;. Then you can put your condition in the init function in the callback that you pass.

However, you seem to want to use promises. For that, all of your functions (that all are asynchronous) should return a promise:

service.getEquipes = function (callback) {
    return $http.get(urlBase+'users/' + $rootScope.globals.currentUser.loggedUser.idUser + '/teams');
}

(that was easy, $http already returns promises)

$scope.callTeamsService = function() {
    return NavService.getTeams().then(function(teams) {
        return $timeout(function() {
            return teams;
        }, 200);
    });
};

(and $timeout does as well - by invoking then and returning it from the callback you can chain them and get a new promise for both)

function init() {
    return $scope.callTeamsService().then(function(teams) {
        $scope.teams = teams;
        if (teams.length == 0) {
            …
        } else {
            …
        }
    });
}