Often, I find people asking the question about how to properly use promises and http factories, to retrieve data from a web service in AngularJs. I want to share the way I’ve adapted to using factories, which has streamlined the way I use them throughout my applications.
As you know, $http supports promise chaining, which allows me to write my factory like so:
(function(){ 'use strict'; angular .module("DemoApp") .factory("DemoFactory", DemoFactory); // Dependency Injection DemoFactory.$inject = ['$http']; function DemoFactory($http) { return { getData: getData }; // Endpoint var uri = "http://somedomain.com/api"; // Function to get data function getData() { $http.get(uri + "/GetData") .then(getDataComplete) .catch(getDataFailed); // Webcall was successful function getDataComplete(response) { // Return the response data return response.data; }; // Webcall failed function getDataFailed(error) { // Log the error (for lack of better error handling) console.log("Error retrieving data: " + error.message); }; }; }; })();
As you can see, I’m now able to easily handle the response, and catch error messages from the web service.
In my controller, it’s now dead simple to request data from the service:
(function(){ 'use strict'; angular .module("DemoApp") .controller("DemoCtrl", DemoCtrl); // Injecting our factory here DemoCtrl.$inject = ['DemoFactory']; function DemoCtrl(DemoFactory) { var vm = this; vm.data = {}; // Function that runs when the ctrl is called function activate() { getSomeData().then(function(data){ // Binds data to view model vm.data = data; }); }; // Function to get the data function getSomeData() { return DemoFactory.getData() .then(function(data){ // Returns the data from the factory return data; }); }; }; })();
Hopefully these code snippets will help you with your service calls, please let me know in the comments below, if you have any questions. I would be happy to answer them the best that I can!