How to implement ajax call using promise with angular?

Question

I'm trying to use angular promise using $q that is wrapped in 'service' and call it from my controller. Here is the code:

var myController = function ($scope, myService) {
    $scope.doSomething = function (c, $event) {
        $event.preventDefault();
        myService.method1(c).then(function (rslt) {
            alert(rslt);
        }, function (err) {
            alert(err);
        }).then(function () {
            //clean up
        });        
    };
};
var myApp = angular.module('myApp', [])
    .factory('myService', function($q) {
        function _method1(c) {
            var dfr = $q.defer();

            var dt = { sc: c };
            $.ajax({
                type: "POST",
                url: "mypage.aspx/mymethod",
                data: JSON.stringify(dt),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function () {
                    dfr.resolve('actions sucess');
                },
                error: function (msg) {
                    dfr.reject(msg);
                }
            });
            return dfr.promise;
        }
        return { method1: _method1 };
    }).controller('myController', myController);

The problem is that ' alert(rslt);' piece of code is never executed. Service is called and data is updated but first 'then' function is not reached on first click.

What am I doing wrong? Any help appreciated.

Satpal · Accepted Answer · 2014-01-15 22:02:36Z

3

I would recoomend you to use $http and $resource instead of $.ajax

Heres an example of $http

myApp.factory('MyService',
[
    '$http',
    '$q',
    '$resource',
function (
    $http,
    $q,
    $resource
) {
    return {
        doSomething : function (somedata) {
            var deferred = $q.defer();

            $http({ method: 'POST', url: '"mypage.aspx/mymethod"', data: somedata }).
                success(function (data, status, headers, config) {
                    deferred.resolve(true);
                }).
                error(function (data, status, headers, config) {
                    deferred.resolve(false);
                });
            return deferred.promise;
        }
    };
}]);

answered Jan 15, 2014 at 22:02

Satpal

134k13 gold badges168 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

krul Over a year ago

can you expand on $resource ?

Nikos Paraskevopoulos · Accepted Answer · 2014-01-15 22:02:43Z

2

Just add the dependency to $rootScope and call $rootScope.$apply() in both callbacks from $.ajax():

success: function () {
    dfr.resolve('actions sucess');
    $rootScope.$apply();
}, ...

But better yet, use Angular's $http service.

answered Jan 15, 2014 at 22:02

Nikos Paraskevopoulos

40.4k13 gold badges91 silver badges99 bronze badges

5 Comments

angabriel Over a year ago

I don't understand why triggering the digest cycle solves this example. When you resolve() the promise (return of method1(c), same reference), the then() function should trigger even without an $apply. Only thing I found in the docs is: "$q is integrated with the ng.$rootScope.Scope model observation mechanism ... which means faster propagation ...".

Nikos Paraskevopoulos Over a year ago

The integration of Angular's $q with Angular means it requires a digest cycle to trigger changes.

angabriel Over a year ago

Interesting, this is new to me. Do you have a link to this piece of doc?

Nikos Paraskevopoulos Over a year ago

I haven't found it in the docs, but (surprize!) the code. See e.g. line 213 in the resolve() function, it calls nextTick() to run the callbacks. Angular's nextTick() is bound to the digest cycle (and the reason for this behaviour).

angabriel Over a year ago

Lol just found the same! Cool stuff. This explains it but sadly the docs are incomplete - worse - In my opinion misleading. Thank you for explaining m8. Valuable background info. Every angular freak should look at their framework code in detail.

Collectives™ on Stack Overflow

How to implement ajax call using promise with angular?

2 Answers 2

1 Comment

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related