What Is $HTTP Service In AngularJS

$http({
    method: 'Method_Name',
    url: '/someUrl'
}).then(function successCallback(response) {
    // When the response is available, this callback will be called asynchronously

}, function errorCallback(response) {
    // This method will be called when the server returns a response with an error status
});

<html>
<head>
    <title>Angular JS Includes</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
    <script src="angular.min.js"></script>
</head>
<body>
    <h2>AngularJS Ajax Demo</h2>
    <div ng-app="app" ng-controller="Employee">
        <span>{{Message}}</span><br/>
        <span>{{Status}}</span><br/>
        <span>{{Headers}}</span><br/>
        <span>{{Config}}</span><br/>
        <span>{{StatusText}}</span><br/>
    </div>
    <script>
        var obj = angular.module('app', []);
        obj.controller('Employee', function ($scope, $http) {
            $http({
                method: 'GET',
                url: 'index.html'
            }).then(function successCallback(response) {
                $scope.Message = response.data;
                $scope.Status = response.status;
                $scope.Headers = response.headers;
                $scope.Config = response.config;
                $scope.StatusText = response.statusText;
            }, function errorCallback(response) {
                alert("Unsuccessful call!");
            });
        });
    </script>
</body>
</html>

$http.get(url, config).then(successCallback, errorCallback);
$http.post(url, data, config).then(successCallback, errorCallback);
$http.head(url, config).then(successCallback, errorCallback);
$http.put(url, data, config).then(successCallback, errorCallback);
$http.delete(url, config).then(successCallback, errorCallback);
$http.patch(url, data, config).then(successCallback, errorCallback);
$http.jsonp(url, config).then(successCallback, errorCallback);

Example 2

<html>
<head>
    <title>Angular JS Includes</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
    <script src="angular.min.js"></script>
    <style>
        table, th, td {
            border: 1px solid grey;
            border-collapse: collapse;
            padding: 5px;
        }

        table tr:nth-child(odd) {
            background-color: #0094ff;
        }

        table tr:nth-child(even) {
            background-color: #00ff90;
        }
    </style>
</head>
<body>
    <h2>AngularJS Ajax Demo</h2>
    <div ng-app="app" ng-controller="Employee">
        <table>
            <tr>
                <th>Name</th>
                <th>City</th>
                <th>Employee Id</th>
            </tr>
            <tr ng-repeat="Emp in Employee">
                <td>{{Emp.Name}}</td>
                <td>{{Emp.City}}</td>
                <td>{{Emp.Emp_Id}}</td>
            </tr>
        </table>
    </div>
    <script>
        var appconf = angular.module('app', []);
        appconf.controller('Employee', function ($scope, $http) {
            $http({
                method: "GET",
                url: "EmployeeData.txt"
            }).then(function onSuccess(response) {
                $scope.Employee = response.data;
            }, function onError(response) {
                alert("Error Occurred!");
            });
        });
    </script>
</body>
</html>

EmployeeData.txt

[
    {
        "Name": "Pankaj Choudhary",
        "City": "Alwar",
        "Emp_Id": "1210038"
    },
    {
        "Name": "Neeraj Saini",
        "City": "Delhi",
        "Emp_Id": "1210036"
    },
    {
        "Name": "Rahul Prajapat",
        "City": "Jaipur",
        "Emp_Id": "1210042"
    },
    {
        "Name": "Sandeep Jangid",
        "City": "Alwar",
        "Emp_Id": "1210047"
    },
    {
        "Name": "Sanjeev Baldia",
        "City": "Jaipur",
        "Emp_Id": "1210047"
    },
    {
        "Name": "Narendra Sharma",
        "City": "Alwar",
        "Emp_Id": "1210034"
    }
]

Output

In the above example, we retrieved data from the EmployeeData.txt file. We get the data into JSON format, so we used the “ng-repeat” and viewed the data in table format.

Setting HTTP Header

The $http service automatically sets values for the header property for all requests. We can manually define the values for the property of headers. In the below example, we defined the same property of the header.

Example

<html>
<head>
    <title>Angular JS Includes</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
    <script src="angular.min.js"></script>
</head>
<body>
    <h2>AngularJS Ajax Demo</h2>
    <div ng-app="app" ng-controller="Employee">
        <span>{{Message}}</span><br/>
        <span>{{Status}}</span><br/>
        <span>{{Headers}}</span><br/>
        <span>{{Config}}</span><br/>
        <span>{{StatusText}}</span><br/>
    </div>
    <script>
        var obj = angular.module('app', []);
        obj.controller('Employee', function ($scope, $http) {
            $http({
                method: 'GET',
                url: 'index.html',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json, text/plain, */*'
                },
                data: {
                    test: 'This is test Data'
                }
            }).then(function successCallback(response) {
                $scope.Message = response.data;
                $scope.Status = response.status;
                $scope.Headers = response.headers;
                $scope.Config = response.config;
                $scope.StatusText = response.statusText;
            }, function errorCallback(response) {
                alert("Unsuccessful call!");
            });
        });
    </script>
</body>
</html>

Index.html

This is a $Ajax Example.

Output

Conclusion

The $http service is used for reading data from remote servers. Data from remote servers can be retrieved in simple text or JSON format.

Read more articles on AngularJS.

• Understanding HTTP Interceptors In AngularJS
• Learning AngularJS: $http
• AngularJS $http Service: Part 6