Learn $http Service In AngularJS

Overview

In this article, we will see what the $http service is in AngularJS and how to use the $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 with a single input parameter object i.e. the configuration objects.

For more, kindly refer to 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 used a get() method.

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

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, delete, etc., are also available with a $http request.

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

Now, similarly, I am going to pass the $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 an array. We are displaying 2 rows. So, the array will be 0 and 1.

Similarly, it has status and status Text.

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

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

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

We can also call another function called an error callback function when any error occurs.

So, let's create an error callback function.

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

Similarly, we can use $log also.

$log.info(reason);

Now, we will bind that with our View error message.

<div ng-controller="myController">
    {{error}}
</div>

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 the success callback function also.

So, let's take a variable and call it 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 success callbacks and error callbacks 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 a JSON object. As you can see in our model, it's a JavaScript object that we are passing to our web server.

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

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