$http Service In AngularJS

Overview

In this article, we will see what $http service is in AngularJS and how to use $http service along with a brief about other built-in services in AngularJS .

For more articles on AngularJS, kindly refer to,

• Overview Of AngularJS
• Modules And Controller In AngularJS
• Controllers in AngularJS
• AngularJS ng src Directive
• AngularJS ng-Repeat Directive
• Handling Events In AngularJS
• How To Use Two-Way Data Binding In AngularJS
• Filters In AngularJS

Introduction

There are several built-in services in AngularJS. $http is one of them. $log is also one of the built-in services available in AngularJS. 

• $http service is used to make HTTP requests to the remote server . 
• $http service is a function that has a single input parameter object i.e the configuration objects. 

For more, kindly refer this URL. 

At the moment we will be using method and URL .

In our previous article, consuming web service in ASP.NET in AngularJS in our model, we had used a get() method.



Instead of that, we can use configuration parameters or we use a method get() and URl of our web service as,

var mypartone = angular.module("mymodule", []).controller("myController", function($scope, $http) {
    $http({
        method: 'GET',
        url: 'EmployeeCheck.asmx/GetAllEmployees'
    }).then(function(response) {
        $scope.employees = response.data;
    });
});

Let's save the changes and it should work as before.



Shortcut methods like get, post, and delete etc., are also available with $http request

$http returns a promise object that means the functions are requested asynchronously. The data may be returned as not available immediately. We used then method in our previous article.

Now, similarly, I am going to pass $log and pass a response to that. 

var mypartone = angular.module("mymodule", []).controller("myController", function($scope, $http, $log) {
    $http({
        method: 'GET',
        url: 'EmployeeCheck.asmx/GetAllEmployees'
    }).then(function(response) {
        $scope.employees = response.data;
        $log.info(response);
    });
});

Let's save our changes and reload the page.



Now, press F12 for developer tools. In that, you will notice an object.



Click on the config object.



Now, you will see a method i.e GET and we have used URL service.

Similarly, we have got the data object. It will contain array. We are displaying 2 rows. So, the array will be 0 and 1.



Similalry, it has status and status Text,



These $log is useful when you are debugging your Angular application.

If there is an error in processing the request, the errorcallback function is called. Notice, we have used an then function in our model,

url: 'EmployeeCheck.asmx/GetAllEmployees'})
.then(function (response) {
$scope.employees = response.data;

We can also call another function called as errorcallback function when any error occurs .

So, let's create a errorcallback function, as:

function(reason) {
    $scope.error = reason.data;
}

Similarly, we can use $log also.

$log.info(reason);

Now, we will bind that wit our View error message, as :

<div ng-controller="myController">

{{error}}

And now, I renamed our function from GetAllEmployees to xyz.

var mypartone = angular.module("mymodule", []).controller("myController", function($scope, $http, $log) {
    $http({
        method: 'GET',
        url: 'EmployeeCheck.asmx/xyz'
    }).then(function(response) {
        $scope.employees = response.data;
        $log.info(response);
    }, function(reason) {
        $scope.error = reason.data;
        $log.info(reason);
    });
});

Now, let's reload the page.


As you can see, we didn’t get any output and error message printed which we had bound in our View.

Press F12 to see the details.



Invalid Operation.

Now, similarly, we can use successcallback function also.

So, let's take a variable and call it as successCallback.

var SuccessCallback = function (response) {

$scope.employees=response.data;
};

Similarly, we can create that for error callback.

var ErrorCallback = function(response)
{
    $scope.error = response.data;
};

Now, in our then, we will see all successcallback and error callback respectively. So, our final code is:

var mypartone = angular.module("mymodule", []).controller("myController", function($scope, $http, $log) {
    var SuccessCallback = function(response) {
        $scope.employees = response.data;
    };
    var ErrorCallback = function(response) {
        $scope.error = response.data;
    };
    $http({
        method: 'GET',
        url: 'EmployeeCheck.asmx/GetAllEmployees'
    }).then(SuccessCallback, ErrorCallback);
});

Now let's reload the page we should get the data :



Default transformation provided by Angular http service. If the data property of the request configuration object contains a JavaScript object, it will automatically convert to JSON object. As you can see in our model, it's a JavaScript object that we are passing to our webserver.


Similarly, if JSON response is detected, it automatically converts to JavaScript object. 

Conclusion: So, this was all about $http service in AngularJS.