using $http in an AngularJS service

Question

I'm trying to move all my AJAX from an Angular controller into a service. My code worked fine in the controller, but I can't get the same $http requests to run in the service. When I run the following code, Data.tracker is set to "function started" and then never changes.

app.service("Data", function($http) {

this.tracker = "not started";

this.loadHumanReadableNames = function() {
        this.tracker = "function started";
        $http.get('http://proteomics.ysu.edu/secretomes/animal/index.php/api/get_human_readable_names/').
        success(function(data, status, headers, config) {
            this.tracker = "ajax successful";
        }).
        error(function(data, status, headers, config) {
            this.tracker = "ajax failed";
        });
    };
});

app.controller('GlobalController', function($scope, Data) {

    $scope.Data = Data;

    $scope.initializeData = function () {
        //load human readable names
        Data.loadHumanReadableNames();
    }
});

Any ideas?

UPDATE

MajoB's answer works great. However, for modularity I generally prefer to handle data processing in my model (service) instead of in my controller. The problem with the above code is that this is not available in the success and error functions. The following will print "ajax successful":

in the service:

app.service("Data", function($http) {

this.tracker = "not started";
var self = this;

this.loadHumanReadableNames = function() {
        this.tracker = "function started";
        $http.get('http://proteomics.ysu.edu/secretomes/animal/index.php/api/get_human_readable_names/').
        success(function(data, status, headers, config) {
            self.tracker = "ajax successful";
        }).
        error(function(data, status, headers, config) {
            self.tracker = "ajax failed";
        });
    };
});

user3275109 · Accepted Answer · 2014-10-15 06:49:59Z

1

this keyword inside success callback function refer the local scope not the parent object. So it won't change . Try to assign with some variable after that you can change that variable inside success callback function

answered Oct 15, 2014 at 6:49

user3275109

3541 gold badge3 silver badges12 bronze badges

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

1 Comment

Marian Ban Over a year ago

services/providers are singletons (one sevice instance per application) they do not share any parent scope, they can only access a $rootScope if it is included

Marian Ban · Accepted Answer · 2014-10-15 06:46:52Z

you can return a promise from your service:

this.loadHumanReadableNames = function() {            
        return $http.get('http://proteomics.ysu.edu/secretomes/animal/index.php/api/get_human_readable_names/');            
    };
});

controller

app.controller('GlobalController', function($scope, Data) {   


    $scope.initializeData = function () {
        //load human readable names
        Data.loadHumanReadableNames().success(function (data, status, headers, config) {

        });;
    }
});

or create a custom promise with $q:

    this.loadHumanReadableNames = function() {     
       var deferred = $q.defer();
       $http.get('http://proteomics.ysu.edu/secretomes/animal/index.php/api/get_human_readable_names/').success(function (data, status, headers, config) {
            deferred.resolve({ data: data, tracker : 'ajax successful' })
       });            


       return deferred.promise;        
    };

controller:

app.controller('GlobalController', function($scope, Data) {   


        $scope.initializeData = function () {
            //load human readable names
            Data.loadHumanReadableNames().then(function (data) {

            });;
        }
    });

Collectives™ on Stack Overflow

using $http in an AngularJS service

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related