HTTP requests in Angularjs the right way

Leave a Comment

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!

Latest posts by Brandon (see all)