Rectangle 27 1

angularjs What is the best practice for making an AJAX call in Angular.js?


module.controller('MyCtrl', function($scope, myService) {
    // now you can just call it and stick it in a $scope property.
    // it will update the view when it resolves.
    $scope.foos = myService.getFoos();
});
module.controller('MyCtrl', function($scope, myService) {
    myService.getFoos().then(function(foos) {
        $scope.foos = foos;
    });
});
module.factory('myService', function($http) {
   return {
        getFoos: function() {
             //return the promise directly.
             return $http.get('/foos')
                       .then(function(result) {
                            //resolve the promise as the data
                            return result.data;
                        });
        }
   }
});

EDIT: This answer was primarily focus on version 1.0.X. To prevent confusion it's being changed to reflect the best answer for ALL current versions of Angular as of today, 2013-12-05.

@KellyMilligan, in this pattern, it's the binding that knows what to do with the promise. If you need to access the object from anywhere else, you're going to have to handle the .then() of the promise and put the value in the $scope... myService.getFoos().then(function(value) { $scope.foos = value; });

Got a couple of downvotes here recently, presumably because it was no longer in-line with the latest version of Angular. I've updated the answer to reflect that.

Handle the promise's then() method and get the data out of it. Set the $scope property, and do whatever else you might need to do.

I am currently using this pattern in a new angular app, however I am wondering in a crud page how to get access to the property that I bound to the scope, in this example if I wanted to take the data from getFoos and post changes to it. if I try and access the $scope.foos in my update, I have the promise object and not the data, I can see how to get the data in the object itself, but it seems really really hacky.ideas?

In Angular 1.0.X, the target of the original answer here, promises will get special treatment by the View. When they resolve, their resolved value will be bound to the view. This has been deprecated in 1.2.X

Just an update on this technique, as of 1.2.0-rc.3, the auto un-wrapping of promises has been deprecated, so this technique will no longer work.

Just to mention, this only works when you use a the $scope.foos property in a template. If you were to use that same property outside of a template (for example in another function), the object stored there is still a promise object.

The idea is to create a service that returns a promise to the returned data, then call that in your controller and handle the promise there to populate your $scope property.

Note
Rectangle 27 1

angularjs What is the best practice for making an AJAX call in Angular.js?


module.controller('MyCtrl', function($scope, myService) {
    // now you can just call it and stick it in a $scope property.
    // it will update the view when it resolves.
    $scope.foos = myService.getFoos();
});
module.controller('MyCtrl', function($scope, myService) {
    myService.getFoos().then(function(foos) {
        $scope.foos = foos;
    });
});
module.factory('myService', function($http) {
   return {
        getFoos: function() {
             //return the promise directly.
             return $http.get('/foos')
                       .then(function(result) {
                            //resolve the promise as the data
                            return result.data;
                        });
        }
   }
});

EDIT: This answer was primarily focus on version 1.0.X. To prevent confusion it's being changed to reflect the best answer for ALL current versions of Angular as of today, 2013-12-05.

@KellyMilligan, in this pattern, it's the binding that knows what to do with the promise. If you need to access the object from anywhere else, you're going to have to handle the .then() of the promise and put the value in the $scope... myService.getFoos().then(function(value) { $scope.foos = value; });

Got a couple of downvotes here recently, presumably because it was no longer in-line with the latest version of Angular. I've updated the answer to reflect that.

Handle the promise's then() method and get the data out of it. Set the $scope property, and do whatever else you might need to do.

I am currently using this pattern in a new angular app, however I am wondering in a crud page how to get access to the property that I bound to the scope, in this example if I wanted to take the data from getFoos and post changes to it. if I try and access the $scope.foos in my update, I have the promise object and not the data, I can see how to get the data in the object itself, but it seems really really hacky.ideas?

In Angular 1.0.X, the target of the original answer here, promises will get special treatment by the View. When they resolve, their resolved value will be bound to the view. This has been deprecated in 1.2.X

Just an update on this technique, as of 1.2.0-rc.3, the auto un-wrapping of promises has been deprecated, so this technique will no longer work.

Just to mention, this only works when you use a the $scope.foos property in a template. If you were to use that same property outside of a template (for example in another function), the object stored there is still a promise object.

The idea is to create a service that returns a promise to the returned data, then call that in your controller and handle the promise there to populate your $scope property.

Note
Rectangle 27 1

angularjs What is the best practice for making an AJAX call in Angular.js?


module.factory('WidgetData', function($http){
    return {
        get : function(params){
            return $http.get('url/to/widget/data', {
                params : params
            });
        }
    }
});

module.controller('WidgetController', function(WidgetData){
    WidgetData.get({
        id : '0'
    }).then(function(response){
        //Do what you will with the data.
    })
});

Abstracting the $http call like this will allow you to reuse this code across multiple controllers. This becomes necessary when the code that interacts with this data becomes more complex, perhaps you wish to process the data before using it in your controller, and cache the result of that process so you won't have to spend time re-processing it.

The best practise would be to abstract the $http call out into a 'service' that provides data to your controller:

You should think of the 'service' as a representation (or Model) of data your application can use.

Note
Rectangle 27 1

angularjs What is the best practice for making an AJAX call in Angular.js?


module.factory('WidgetData', function($http){
    return {
        get : function(params){
            return $http.get('url/to/widget/data', {
                params : params
            });
        }
    }
});

module.controller('WidgetController', function(WidgetData){
    WidgetData.get({
        id : '0'
    }).then(function(response){
        //Do what you will with the data.
    })
});

Abstracting the $http call like this will allow you to reuse this code across multiple controllers. This becomes necessary when the code that interacts with this data becomes more complex, perhaps you wish to process the data before using it in your controller, and cache the result of that process so you won't have to spend time re-processing it.

The best practise would be to abstract the $http call out into a 'service' that provides data to your controller:

You should think of the 'service' as a representation (or Model) of data your application can use.

Note
Rectangle 27 1

angularjs What is the best practice for making an AJAX call in Angular.js?


policyService.service('PolicyService', ['$http', function ($http) {
var policyService = angular.module("PolicyService", []);
policyService.service('PolicyService', ['$http', function ($http) {
    return {
        foo: "bar",
        bar: function (params) {
            return $http.get('../Home/Policy_Read', {
                params: params
            });
        }
    };
}]);

The accepted answer was giving me the $http is not defined error so I had to do this:

The main difference being this line:

Note
Rectangle 27 0

angularjs What is the best practice for making an AJAX call in Angular.js?


module.factory('WidgetData', function($http){
    return {
        get : function(params){
            return $http.get('url/to/widget/data', {
                params : params
            });
        }
    }
});

module.controller('WidgetController', function(WidgetData){
    WidgetData.get({
        id : '0'
    }).then(function(response){
        //Do what you will with the data.
    })
});

Abstracting the $http call like this will allow you to reuse this code across multiple controllers. This becomes necessary when the code that interacts with this data becomes more complex, perhaps you wish to process the data before using it in your controller, and cache the result of that process so you won't have to spend time re-processing it.

The best practise would be to abstract the $http call out into a 'service' that provides data to your controller:

You should think of the 'service' as a representation (or Model) of data your application can use.

Note
Rectangle 27 0

angularjs What is the best practice for making an AJAX call in Angular.js?


policyService.service('PolicyService', ['$http', function ($http) {
var policyService = angular.module("PolicyService", []);
policyService.service('PolicyService', ['$http', function ($http) {
    return {
        foo: "bar",
        bar: function (params) {
            return $http.get('../Home/Policy_Read', {
                params: params
            });
        }
    };
}]);

The accepted answer was giving me the $http is not defined error so I had to do this:

The main difference being this line:

Note
Rectangle 27 0

angularjs What is the best practice for making an AJAX call in Angular.js?


module.controller('MyCtrl', function($scope, myService) {
    // now you can just call it and stick it in a $scope property.
    // it will update the view when it resolves.
    $scope.foos = myService.getFoos();
});
module.controller('MyCtrl', function($scope, myService) {
    myService.getFoos().then(function(foos) {
        $scope.foos = foos;
    });
});
module.factory('myService', function($http) {
   return {
        getFoos: function() {
             //return the promise directly.
             return $http.get('/foos')
                       .then(function(result) {
                            //resolve the promise as the data
                            return result.data;
                        });
        }
   }
});

EDIT: This answer was primarily focus on version 1.0.X. To prevent confusion it's being changed to reflect the best answer for ALL current versions of Angular as of today, 2013-12-05.

@KellyMilligan, in this pattern, it's the binding that knows what to do with the promise. If you need to access the object from anywhere else, you're going to have to handle the .then() of the promise and put the value in the $scope... myService.getFoos().then(function(value) { $scope.foos = value; });

Got a couple of downvotes here recently, presumably because it was no longer in-line with the latest version of Angular. I've updated the answer to reflect that.

Handle the promise's then() method and get the data out of it. Set the $scope property, and do whatever else you might need to do.

I am currently using this pattern in a new angular app, however I am wondering in a crud page how to get access to the property that I bound to the scope, in this example if I wanted to take the data from getFoos and post changes to it. if I try and access the $scope.foos in my update, I have the promise object and not the data, I can see how to get the data in the object itself, but it seems really really hacky.ideas?

In Angular 1.0.X, the target of the original answer here, promises will get special treatment by the View. When they resolve, their resolved value will be bound to the view. This has been deprecated in 1.2.X

Just an update on this technique, as of 1.2.0-rc.3, the auto un-wrapping of promises has been deprecated, so this technique will no longer work.

Just to mention, this only works when you use a the $scope.foos property in a template. If you were to use that same property outside of a template (for example in another function), the object stored there is still a promise object.

The idea is to create a service that returns a promise to the returned data, then call that in your controller and handle the promise there to populate your $scope property.

Note
Rectangle 27 0

angularjs What is the best practice for making an AJAX call in Angular.js?


policyService.service('PolicyService', ['$http', function ($http) {
var policyService = angular.module("PolicyService", []);
policyService.service('PolicyService', ['$http', function ($http) {
    return {
        foo: "bar",
        bar: function (params) {
            return $http.get('../Home/Policy_Read', {
                params: params
            });
        }
    };
}]);

The accepted answer was giving me the $http is not defined error so I had to do this:

The main difference being this line:

Note