• 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!

  • Author
  • Recent Posts
Brandon
Sr. Software Engineer at Undisclosed Investment firm/Brokerage
Latest posts by Brandon (see all)
  • RadListView | Using the Telerik UI for Xamarin.Forms - August 6, 2019
  • Clean Architecture | Creating Maintainable Software using .NET Core - May 2, 2019
  • Xamarin Forms How-to: Navigation with slide out menu - August 15, 2017

Share this:

  • Click to share on Twitter (Opens in new window)
  • Click to share on Facebook (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 a link 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 (14,759 views)
  • Clean Architecture | Creating Maintainable Software using .NET Core Clean Architecture | Creating Maintainable Software using .NET Core (4,810 views)
  • How to: Create custom code snippets in Visual Studio Code How to: Create custom code snippets in Visual Studio Code (2,123 views)
  • AngularJs Tutorial: WoW Realm Status AngularJs Tutorial: WoW Realm Status (1,374 view)
  • Entity Framework Code-First tutorial | C# .NET MVC 5 Entity Framework Code-First tutorial | C# .NET MVC 5 (1,032 view)
  • RadListView | Using the Telerik UI for Xamarin.Forms RadListView | Using the Telerik UI for Xamarin.Forms
  • Clean Architecture | Creating Maintainable Software using .NET Core Clean Architecture | Creating Maintainable Software using .NET Core
  • 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 Identity | Change default password restrictions
Ajax spinner

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 - please consider donating to the cause!

10-Day Free Trial

Tags

.net .Net Core AngularJS API Architecture Authentication Blizzard API Callbacks CentOS code first commanline entity framework HTML5 http JavaScript linux minecraft Networking restful srv Telerik Template Tutorial UI vm VSCode Web web api web development Webservice wordpress Xamarin XAML

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 © 2023 Brandon Tillman.

Omega WordPress Theme by ThemeHall

%d bloggers like this: