In this article I will explain with an example, how to use the $http service to make AJAX calls using AngularJS.
This article will illustrate how to make AJAX calls using $http service in AngularJS by making call to an ASP.Net WebMethod.
 
 
The WebMethod
The following WebMethod will be called using AngularJS, AJAX and JSON. Inside the WebMethod, the value of the Name parameter received from the AngularJS method is returned along with the Current Server Time.
C#
[System.Web.Services.WebMethod]
public static string GetCurrentTime(string name)
{
    string message = "Hello ";
    message += name;
    message += "\nCurrent Time: ";
    message += DateTime.Now.ToString();
    return message;
}
 
VB.Net
<System.Web.Services.WebMethod()> _
Public Shared Function GetCurrentTime(name As String) As String
    Dim message As String = "Hello "
    message &= name
    message &= vbCrLf & "Current Time: "
    message &= DateTime.Now.ToString()
    Return message
End Function
 
 
Make AJAX call using $http Service in AngularJS
The below HTML Markup consists of an HTML DIV to which ng-app and ng-controller AngularJS directives have been assigned.
Note: If you want to learn more about these directives, please refer my article Introduction to AngularJS.
 
The HTML DIV consists of an HTML TextBox and a Button. The Button has been assigned AngularJS ng-click directive. When the Button is clicked, the ButtonClick function is executed.
Note: If you want to learn more about ng-click directive, please refer my article AngularJS: Implement Button click event using ng-click directive example.
 
Inside the ButtonClick function, the $http service is used to make an AJAX call to the ASP.Net WebMethod. The $http service has following properties and methods.
Properties
1. method – The method type of HTTP Request i.e. GET or POST.
2. url – URL of the WebMethod (PageMethod).
3. dataType - The format of the data i.e. XML or JSON.
4. data – The parameters to be sent to the WebMethod.
5. headers - List of headers to be specified for the HTTP Request.
 
Event Handler
1. success – This event handler is triggered once the AJAX call is successfully executed.
2. error – This event handler is triggered when the AJAX call encounters an error.
The response from the AJAX call is received in JSON format inside the Success event handler of the $http service and the result is displayed using JavaScript Alert Message Box.
Note: If you want to learn more on displaying JavaScript alert with AngularJS, please refer my article AngularJS: Display (Show) JavaScript Alert box.
 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script type="text/javascript">
    var app = angular.module('MyApp', [])
    app.controller('MyController', function ($scope, $http, $window) {
        $scope.ButtonClick = function () {
            var post = $http({
                method: "POST",
                url: "Default.aspx/GetCurrentTime",
                dataType: 'json',
                data: { name: $scope.Name },
                headers: { "Content-Type": "application/json" }
            });
 
            post.success(function (data, status) {
                $window.alert(data.d);
            });
 
            post.error(function (data, status) {
                $window.alert(data.Message);
            });
        }
    });
</script>
<div ng-app="MyApp" ng-controller="MyController">
    Name:
    <input type="text" ng-model="Name" />
    <br />
    <br />
    <input type="button" value="Submit" ng-click="ButtonClick()" />
</div>
 
 
Screenshot
AngularJS $http Service example: Make AJAX calls in AngularJS with example
 
 
Demo
View Demo
 
 
Downloads
Download Code