Angular JS services $http and $q

Question

I am learning Angular JS $http and $q services from Pluralsight Angular JS tutorial. I mostly created the eventData service that retrieves a JSON from the server using promise q. But when I assigned the promise to the $scope.event, it was just and empty object. Why didn't this method work?

Then I googled to find why it was not working. And got a different code which calls the then() function on the promise and assigns the result to $scope.event

The promise queue is used to avoid passing callbacks. But here we are passing a call back to the then function. And isn't that against the point of having a promise queue in the first place?

// Event Data Function
eventsApp.factory("eventData", function($http, $q){
    return {
        events : function() {
            var deferred = $q.defer();
            $http({
                method: "GET", url:"http://localhost/data/events/events.php"
            })
                .success(function(data,status,headers,config){
                    deferred.resolve(data);
                })
                .error(function(data,status,headers,config){
                    deferred.reject(status);
                });
            return deferred.promise;
        }
    }
});

// Event controller
var eventController = eventsApp.controller('eventController',function($scope,eventData)    
{
    $scope.event = eventData.events()
});



// Event Controller from googled code
var eventController = eventsApp.controller('eventController',function($scope,eventData)    
{
    eventData.events().then(function(result){
        $scope.event = result
    });
});

score 0 · Accepted Answer · answered Apr 19 '14 at 06:26

0

No, the point of the promise is to not have ugly callback-hell when you need to make your asynchronous function return before firing another asynchronous function which depends on the previously returned data.

When the promise is resolved, the function that is passed into .then() is invoked and passed the previously returned data as parameters.

Also, for what it's worth, there is no need to wrap $http in a promise, because it returns a promise by design.

answered Apr 19 '14 at 06:26

adrichman

1,215
10
17

It did work... Console.log the scope.event and u can see that it returns a promise object and one of the methods that gets returned is the then method, which u can invoke and when the promise revolves then is fired and passed in the Paramus of the callback function – Sten Muchow Apr 19 '14 at 06:39
Because what you returned was not the data. You returned a promise object with methods such as `.then()` and `.done()` and if you call those methods, your promise object will pass the data. And very importantly, only at the time that the data has returned and been passed along do you want to make the assignment to your $scope property. – adrichman Apr 19 '14 at 06:39
For the first function not working, it's important to note that earlier angularjs versions supported this, i.e., you could assign a promise to a scope-object and it would be processed automatically by the view. However, this has been dropped in newer versions, so you now have to do it the second way. See also http://stackoverflow.com/questions/17270321/using-promises-in-angularjs-views – Miichi Apr 29 '14 at 09:28

score 0 · Answer 2 · edited Apr 28 '14 at 22:19

The promise queue is an avoidance of callback soup, but maybe you need a more in-depth example of it.

Traditionally in callback hell...

var callback3 = function(param) {
  console.log(param);
}

var callback2 = function(param, callback) {
  setTimeout(function() {
     param = param + "end";
     callback(param);
   }, 100);
}

var callback1 = function(param, callback) {
  setTimeout(function() {
     param = param + "the ";
     callback(param, callback3)
   }, 100);
}

var someFunction = function(param) {
   setTimeout(function() {
     param = param + "am ";
     callback1(param, callback2);
   }, 100)
}

someFunction("I ");

But if we could use promises... our soup becomes clarified.

   var somePromise = $q.defer();

   var callback3 = function(param) {
      console.log(param + "end");
    }

    var callback2 = function(param) {
      setTimeout(function() {
         return param + "the ";
       }, 100);
    }

    var callback1 = function(param) {
      setTimeout(function() {
        return param + "am ";
      }, 100);
    }

    var someFunction = function(letter) {
      //could for example be after an http req or some async call.  
      setTimeout(function() {
        somePromise.resolve(letter);
      }, 100);
    }

    someFunction("I ");

    somePromise.promise
      .then(callback1)
      .then(callback2)
      .then(callback3);

I know what I would prefer to debug...

Angular JS services $http and $q

2 Answers2