AngularJS, using a promise within a service

Question

I have one of those "really fat controller" controllers from an MVP of a project, that I'd like to refactor into more modular and compartmentalised code.

At present I have a function in my controller which:

1. Make an $HTTP call to an API
2. Processes the returned data with a for loop and a switch statement
3. Saves it to scope

I'd like to move this to a service. So far I have this:

angular.module('myApp.services', [])
.service('apiService', ['$http', 'webapiBase', function($http, webapiBase) {
  this.getData = function(){
    $http.get(webapiBase + '/api/getData').then(function(res){
      var obj = res.data;
      // Processing stuff
      return obj;
    }, function(err){
      return false;
    })
  }
}]);

In my controller, I need to run a callback when this service returns its data, like:

// In my Service:
this.getData = function(cb){
    $http.get(webapiBase + '/api/getData').then(function(res){
       var obj = res.data; 
       cb(obj);
    }, function(err){
       cb(false);
    })
  }

// In my controller
apiService.getData(function(data){
    $scope.data = data;
    // Do other stuff here
})   

But this feels a bit weird/non-'Angular'.

Is there a more "Angular" way to achieve this, perhaps while using $q ?

Answer 1

You just need to make a small modification to your service

  this.getData = function(){
    return $http.get(webapiBase + '/api/getData').then(function(res){
      // Processing stuff
      return object;
    }, function(err){
      return false;
    })
  }

Return the promise object of $http.get directly. Then in your controller

apiService.getData().then(function(data){
    $scope.data = data;
    // Do other stuff here
})

Edit

If you really don't want to reuse the promise object created by $http , you can create your own real quick.

this.getData = function() {
    var deferred = $q.defer();

    $http.get(webapiBase + '/api/getData').then(function(res){
      // Processing stuff
      deferred.resolve(object);
    }, function(err){
      deferred.reject('error');
    });

    return deferred.promise;
}

Answer 2

You can use $q to achieve what you're looking for.

// Your service
angular.module('myApp.services', [])
.service('apiService', ['$http', 'webapiBase', function($http, webapiBase) {
  this.getData = function() {
    var deferred = $q.defer();
    $http.get(webapiBase + '/api/getData').then(
        function (res) {
            // Do something with res.data
            deferred.resolve(res.data);
        },
        function(res){
            deferred.reject();
        }
    );
    return deferred.promise;
  }
}]);

Then consume the $q promise in your controller and respond to it:

// Your controller
apiService.getData().then(function(data) {
    $scope.data = data;
    // Do other stuff here
});

That's the Angular-way, using promises with $q .