AngularJS $http

The $http is an important AngularJS service used to access a remote HTTP server and get response form the server.
The $http Service uses browser’s XMLHttpRequest object or JSONP for remote HTTP server communication.
The $http service passed as an argument to the Application controller, our application handle the response from the server.

Properties:

The $http response object has these properties

Properties	Description
config	The configuration object used to generate the request.
data	To get response data from the HTTP server it may be string or object.
headers	To get the header information from the HTTP Server.
status	Status code 200 to 299 will be considered as success status code other than that will be considered as Error status code.
statusText	HTTP response status in text.

Shortcut Methods:

These are the several shortcut methods used in $http service

$http.delete
$http.get
$http.head
$http.jsonp
$http.patch
$http.post
$http.put

Sample code for $http Service in AngularJS:

 Tryit<!DOCTYPE html>
<html>
    <head>
        <title>Wikitechy AngularJS Tutorials</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/
        angular.min.js"> </script>
    </head>
    <body>
        <div ng-app="myApp" ng-controller="httpCtrl">
            <h3>Content : {{content}} </h3>
            <h3>Status Code : {{statuscode}} </h3>
            <h3>Status Text : {{statustext}} </h3>
        </div>
        <script>
            var app = angular.module( 'myApp', [] );
            app.controller("httpCtrl", function($scope, $http) {
                $http.get("wikitechy.html")
                .then(function mySuccess(response) {
                    $scope.content = response.data;
                    $scope.statuscode = response.status;
                    $scope.statustext = response.statusText;
               },   function mySuccess (response) {
                    $scope.content = "Error while loading wikitechy.html";
                });
            });
        </script>
    </body>
</html>

Data:

Set of data has been retrieved from $http service for our AngularJS Application.

content = response.data;
statuscode = response.status;
statustext = response.statusText;

HTML:

Viewable HTML contents in AngularJS Application.

<div ng-app="myApp" ng-controller=" httpCtrl" >
     <h3>Content : {{content}} </h3> 
     <h3>Status Code : {{statuscode}} </h3> 
     <h3>Status Text : {{statustext}} </h3> 
</div>

Logic:

Controller logic for the AngularJS application.

var app = angular.module("myApp", []);
app.controller("httpCtrl", function($scope, $http) {
    $http.get("wikitechy.html")
    .then(function mySuccess(response) {
        $scope.content = response.data;
        $scope.statuscode = response.status;
        $scope.statustext = response.statusText;
   },   function mySuccess (response) {
        $scope.content = "Error while loading wikitechy.html";
    });
});

Code Explanation for $http Service in AngularJS:

The ng-controller is a directive to control the AngularJS Application.
The {{ content }} bind the content variable.
The {{ statuscode }} bind the statuscode variable.
The {{ statustext }} bind the statustext variable.
The “httpCtrl” used to create the controller for the Application with arguments $scope object and $http service.
The $http is a service and it is used to call the get method, this http get request will get the content from the “wikitechy.html” as response.
The .then condition used to check the response if the file has been retrieved successfully then call the mySuccess function otherwise that will be call the myError function.
The data is used to get the response data.
The status is used to get the response status code.
The statusText is used to get the response status as text.
The myError function is executed on error Callback which is used to execute the block of statements on error while the load the file.

Sample Output for $http Service in AngularJS:

The output displays content of “wikitechy.html”.
Status code : 200 this is a success status code for $http service request.
Status Text : OK is specify the success status of $http service request.

Sample Output for $http Service Error in AngularJS:

The output displays the error message. This error message shows if any error occurs during the file loading process.

PDF

AngularJS $http

Properties:

Shortcut Methods:

Sample code for $http Service in AngularJS:

Data:

HTML:

Logic:

Code Explanation for $http Service in AngularJS:

Sample Output for $http Service in AngularJS:

Sample Output for $http Service Error in AngularJS:

Related Searches to angularjs $http filter

Wikitechy

Join our Community

Other Languages