$http Service:

The $http service is used to send or receive data from the remote server using browser's XMLHttpRequest or JSONP.

$http is a service as an object. It includes following shortcut methods.

Method	Description
$http.get()	Perform Http GET request.
$http.head()	Perform Http HEAD request.
$http.post()	Perform Http POST request.
$http.put()	Perform Http PUT request.
$http.delete()	Perform Http DELETE request.
$http.jsonp()	Perform Http JSONP request.
$http.patch()	Perform Http PATCH request.

Let's look at some of the important methods of $http.

$http.get():

$http.get() method sends http GET request to the remote server and retrieves the data.

Signature: HttpPromise $http.get(url)

$http.get() method returns HttpPromise object, which includes various methods to process the response of http GET request.

The following example demonstrates the use of $http service in a controller to send HTTP GET request.

Example: $http.get()
    
<!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/angular.js"></script>
</head>
<body ng-app ="myApp">
    <div>
        <div ng-controller="myController">
           Response Data: {{data}} <br />
           Error: {{error}}
        </div>
    </div>
    <script>
        var myApp = angular.module('myApp', []);

        myApp.controller("myController", function ($scope, $http) {
       
            var onSuccess = function (data, status, headers, config) {
                $scope.data = data;
            };

            var onError = function (data, status, headers, config) {
                $scope.error = status;
            }
        
            var promise = $http.get("/demo/getdata");
                
            promise.success(onSuccess);
            promise.error(onError);
         
        });
    </script>
</body>
</html>

 
Try it 

In the above example, 'myController' controller includes $http parameter, so that it can be used to send GET request. AngularJS automatically injects $scope parameter at runtime. The $http.get() method returns HttpPromise which includes methods like success() and error(). The success() method registers a callback method which is called when a request completes successfully. The error() method registers a callback method which is called when a request fails and returns an error.

The onSuccess() method above, attaches the response data to the $scope. The onError() method attaches status property to the $scope. These methods can be called in chain, as shown below.

Example: $http.get()

<!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/angular.js"></script>
</head>
<body ng-app ="myApp">
    <div>
        <div ng-controller="myController">
           Response Data: {{data}} <br />
           Error: {{error}}
        </div>
    </div>
    <script>
        var myApp = angular.module('myApp', []);
    
        myApp.controller("myController", function ($scope, $http) {
       
            var onSuccess = function (data, status, headers, config) {
                $scope.data = data;
            };

            var onError = function (data, status, headers, config) {
                $scope.error = status;
            }
        
            var promise = $http.get("/demo/getdata").success(onSuccess).error(onError);
         
        });
    </script>
</body>
</html>

 
Try it 

$http.post:

The $http.post() method sends Http POST request to the remote server to submit and retrieve the data.

Signature: HttpPromise $http.post(url, dataToSubmit);

The following example demonstrates $http.post() method.

Example: $http.post()

<!DOCTYPE html>
<html >
<head>
    <script src="~/Scripts/angular.js"></script>
</head>
<body ng-app="myApp">
    <div ng-controller="myController">
        Response Data: {{data}} <br />
        Error: {{error}}
    </div>
    <script>
        var myApp = angular.module('myApp', []);
    
        myApp.controller("myController", function ($scope, $http) {
       
            var onSuccess = function (data, status, headers, config) {
                $scope.data = data;
            };

            var onError = function (data, status, headers, config) {
                $scope.error = status;
            }
        
            $http.post('/demo/submitData', { myData: 'Hello World!' })
                 .success(onSuccess)
                 .error(onError);
         
        });
    </script>
</body>
</html>

 
Try it 

$http():

You can use construction function of $http service to perform http request, as shown below.

Example: $http()

<!DOCTYPE html>
<html >
<head>
    <script src="~/Scripts/angular.js"></script>
</head>
<body ng-app="myApp">
    <div ng-controller="myController">
            Response Data: {{data}} <br />
        Error: {{error}}
        
    </div>
    <script>
       var myApp = angular.module('myApp', []);
    
        myApp.controller("myController", function ($scope, $http) {
       
            var onSuccess = function (data, status, headers, config) {
                $scope.data = data;
            };

            var onError = function (data, status, headers, config) {
                $scope.error = status;
            }
        
           var getReq = {
                    method: 'GET',
                    url: '/demo/getdata'
                };
            
            $http(getReq).success(onSuccess).error(onError);

            var postReq = {
                    method: 'POST',
                    url: '/demo/submitData',
                    data: { myData: 'test data' }
                };

            $http(postReq).success(onSuccess).error(onError);
         
        });
    </script>

</body>
</html>

 
Try it 

Thus, you can use $http service to send AJAX request to the remote server.