$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,

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.

code

Instead of that, we can use configuration parameters or we use a method get() and URl of our web service as,
  1. var mypartone = angular.module("mymodule", []).controller("myController"function($scope, $http) {  
  2.     $http({  
  3.         method: 'GET',  
  4.         url: 'EmployeeCheck.asmx/GetAllEmployees'  
  5.     }).then(function(response) {  
  6.         $scope.employees = response.data;  
  7.     });  
  8. });  
Let's save the changes and it should work as before.

output

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. 
  1. var mypartone = angular.module("mymodule", []).controller("myController"function($scope, $http, $log) {  
  2.     $http({  
  3.         method: 'GET',  
  4.         url: 'EmployeeCheck.asmx/GetAllEmployees'  
  5.     }).then(function(response) {  
  6.         $scope.employees = response.data;  
  7.         $log.info(response);  
  8.     });  
  9. });  
Let's save our changes and reload the page.

output

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

object

Click on the config object.

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.

array

Similalry, it has status and status Text,

status

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,
  1. url: 'EmployeeCheck.asmx/GetAllEmployees'})  
  2. .then(function (response) {  
  3. $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:
  1. function(reason) {  
  2.     $scope.error = reason.data;  
  3. }  
Similarly, we can use $log also.

$log.info(reason);

Now, we will bind that wit our View error message, as :
  1. <div ng-controller="myController">  
  2.   
  3. {{error}}  
And now, I renamed our function from GetAllEmployees to xyz.
  1. var mypartone = angular.module("mymodule", []).controller("myController"function($scope, $http, $log) {  
  2.     $http({  
  3.         method: 'GET',  
  4.         url: 'EmployeeCheck.asmx/xyz'  
  5.     }).then(function(response) {  
  6.         $scope.employees = response.data;  
  7.         $log.info(response);  
  8.     }, function(reason) {  
  9.         $scope.error = reason.data;  
  10.         $log.info(reason);  
  11.     });  
  12. }); 
Now, let's reload the page.

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.

details

Invalid Operation.

Now, similarly, we can use successcallback function also.

So, let's take a variable and call it as successCallback.
  1. var SuccessCallback = function (response) {  
  2.   
  3. $scope.employees=response.data;  
  4. }; 
Similarly, we can create that for error callback.
  1. var ErrorCallback = function(response)  
  2. {  
  3.     $scope.error = response.data;  
  4. };  
Now, in our then, we will see all successcallback and error callback respectively. So, our final code is:
  1. var mypartone = angular.module("mymodule", []).controller("myController"function($scope, $http, $log) {  
  2.     var SuccessCallback = function(response) {  
  3.         $scope.employees = response.data;  
  4.     };  
  5.     var ErrorCallback = function(response) {  
  6.         $scope.error = response.data;  
  7.     };  
  8.     $http({  
  9.         method: 'GET',  
  10.         url: 'EmployeeCheck.asmx/GetAllEmployees'  
  11.     }).then(SuccessCallback, ErrorCallback);  
  12. }); 
Now let's reload the page we should get the data :

page

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.
code

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

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

Up Next
    Ebook Download
    View all
    Learn
    View all