• Home
  • About
  • Contact
Brandon Tillman

Easy $http requests in AngularJS

June 29, 2015 by Brandon Leave a Comment

Making a web request is an essential part of most JavaScript applications. AngularJS makes it very easy for us to make these requests, using the $http service, provided out of the box. Lets set up our base AngularJS application:

(function(){
    var app = angular.module('ExampleHttpRequest', []);
})();

Now lets add an Angular factory, to provide the rest of our application access to the web service (http endpoint):

(function(){
    var app = angular.module('ExampleHttpRequest', []);

    // webService factory to make $http calls
    app.factory('webService', ['$http', function($http){
        var url = 'http://example.webservice.com/api';
        return {
            get: function(){
                return $http.get(url);
            },
            update: function(data_object){
                return $http.post(url, data_object)
            }
        }
    }]);
})();

Now that we have our factory, we can create a controller to access the factory return functions. From there we will be able to use the returned data in our view:

(function(){
    var app = angular.module('ExampleHttpRequest', []);

    // webService factory to make $http calls
    app.factory('webService', ['$http', function($http){
        var url = 'http://example.webservice.com/api';
        return {
            get: function(){
                return $http.get(url);
            },
            update: function(){
                return $http.post(url)
            }
        }
    }]);

    // Controller to call webService data to view
    app.controller('ExampleController', ['webService', '$scope', function(webService, $scope){
        // Notice the 'webService' injection,
        // this is how we use the factory within this controller.

        $scope.returnedData; // Binds data to scope

        // Get request function bound to view
        $scope.getData = function(){
            webService.get()
                .success(function(response){
                    $scope.returnedData = response;
                })
                .error(function(error){
                    // Handle error here
                })
        };

        // POST request function bound to view
        $scope.updateData = function(name, email){
        // Data object to POST
        var payload = {
            name: name,
            email, email
        };

        // Calling the update method, and passing the payload
        webService.update(payload)
            .success(function(response){
                console.log(response);
            })
            .error(function(error){
                // Handle error here
            })
        };

    }]);

})();

Thanks for reading!

  • 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 this to a friend (Opens in new window)
  • Click to print (Opens in new window)

Like this:

Like Loading...

Related

Posted in: Featured, Javascript Tagged: AngularJS, http, web development
Minimal CentOS 6.4 install, configuring DHCP for IPV4 →

  • Popular
  • Latest
  • Today Week Month All
  • Xamarin Forms How-to: Navigation with slide out menu Xamarin Forms How-to: Navigation with slide out menu (12,945 views)
  • Clean Architecture | Creating Maintainable Software using .NET Core Clean Architecture | Creating Maintainable Software using .NET Core (3,825 views)
  • How to: Create custom code snippets in Visual Studio Code How to: Create custom code snippets in Visual Studio Code (1,864 view)
  • AngularJs Tutorial: WoW Realm Status AngularJs Tutorial: WoW Realm Status (1,321 view)
  • Entity Framework Code-First tutorial | C# .NET MVC 5 Entity Framework Code-First tutorial | C# .NET MVC 5 (951 views)
  • 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 © 2021 Brandon Tillman.

Omega WordPress Theme by ThemeHall

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: