• Home
  • About
  • Contact
Brandon Tillman

HTTP requests in Angularjs the right way

November 8, 2015 by Brandon 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!

  • About
  • Latest Posts

Brandon

Sr. Software Engineer at Undisclosed Investment firm/Brokerage

Latest posts by Brandon (see all)

  • Xamarin Forms How-to: Navigation with slide out menu - August 15, 2017
  • How to: Create custom code snippets in Visual Studio Code - June 16, 2016
  • ASP.NET Core | Change default password restrictions - June 13, 2016

Share this:

  • Click to share on Twitter (Opens in new window)
  • Click to share on Facebook (Opens in new window)
  • Click to share on Google+ (Opens in new window)
  • Click to share on LinkedIn (Opens in new window)
  • Click to share on Reddit (Opens in new window)
  • Click to share on Pinterest (Opens in new window)
  • Click to email this to a friend (Opens in new window)
  • Click to print (Opens in new window)

Like this:

Like Loading...

Related

Posted in: AngularJs, Featured, Javascript Tagged: AngularJS, API, http, JavaScript, Webservice
← WordPress Linux | 5 Minute Install command line
Entity Framework Code-First tutorial | C# .NET MVC 5 →

  • Popular
  • Latest
  • Today Week Month All
  • Xamarin Forms How-to: Navigation with slide out menu Xamarin Forms How-to: Navigation with slide out menu (8,017 views)
  • How to: Create custom code snippets in Visual Studio Code How to: Create custom code snippets in Visual Studio Code (1,473 view)
  • AngularJs Tutorial: WoW Realm Status AngularJs Tutorial: WoW Realm Status (1,186 view)
  • Entity Framework Code-First tutorial | C# .NET MVC 5 Entity Framework Code-First tutorial | C# .NET MVC 5 (897 views)
  • password ASP.NET Core | Change default password restrictions (333 views)
  • Xamarin Forms How-to: Navigation with slide out menu Xamarin Forms How-to: Navigation with slide out menu
  • How to: Create custom code snippets in Visual Studio Code How to: Create custom code snippets in Visual Studio Code
  • password ASP.NET Core | Change default password restrictions
  • Callbacks | Understanding JavaScript flow Callbacks | Understanding JavaScript flow
  • AngularJs Tutorial: WoW Realm Status AngularJs Tutorial: WoW Realm Status
Ajax spinner

Get Notified!

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Beer me!

Did one of my posts help you out? I'm glad! If you'd like to help supply my fuel for more posts - donate!

10-Day Free Trial

Tags

.net AngularJS API Authentication Blizzard API Callbacks CentOS code first commanline entity framework HTML5 http JavaScript linux minecraft Networking restful srv Template Tutorial vm VSCode web api web development Webservice wordpress

Recent Comments

  • Tillman32 on Xamarin Forms How-to: Navigation with slide out menu
  • hartman on Xamarin Forms How-to: Navigation with slide out menu
  • Tillman32 on Xamarin Forms How-to: Navigation with slide out menu
  • hartman on Xamarin Forms How-to: Navigation with slide out menu

Categories

  • .Net
  • AngularJs
  • Entity Framework
  • Featured
  • Javascript
  • Linux
  • Minecraft
  • Projects
  • Tutorial
  • Videos
  • Wordpress
  • Xamarin

Follow me on Twitter

My Tweets

Copyright © 2019 Brandon Tillman.

Omega WordPress Theme by ThemeHall

sponsored
loading Cancel
Post was not sent - check your email addresses!
Email check failed, please try again
Sorry, your blog cannot share posts by email.
%d bloggers like this: