$http service in AngularJS

$http service example
angular http service example

In this video we will discuss $http service in AngularJS.

Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.
   / @aarvikitchen5572  

In Angular there are several built in services. $http service is one of them. In this video, we will discuss another built in service, $log. It is also possible to create our own custom services in Angular.

At this point several questions come to our mind
What are services in Angular
When should we be creating services in Angular
How to create our own custom Angular services
Where do they fit, in an angular application architecture
What are the benefits of using services

I will answer all these questions in a later video. The reason for postponing this discussion, is that, it is easier to understand the concept of Angular services and the benefits they provide, once we understand how to use use 1 or 2 built in angular services.

So, let's start our discussion with $http service.

$http service in Angular is used to make HTTP requests to remote server

$http service is a function that has a single input parameter i.e a configuration object.

Example : The following example issues a GET request to the specified URL

$http({
method: 'GET',
url: 'EmployeeService.asmx/GetAllEmployees'
});

In the example above we are only using 2 properties of the configuration object. Check the link below for the complete list of properties supported by the configuration object
https://docs.angularjs.org/api/ng/ser...

Shortcut methods like get, post, put, delete etc are also available to be used with $http service

Example : Using the shortcut method get()
$http.get('EmployeeService.asmx/GetAllEmployees')

$http service returns a promise object. This means the functions are executed asynchronously and the data that these functions return may not be available immediately. Because of this reason you cannot use the return value of the $http service as shown below.

$scope.employees = $http.get('EmployeeService.asmx/GetAllEmployees');

Instead you will use the then() method. The successCallback function that is passed as the parameter to the then function is called when the request completes. The successCallback function receives a single object that contains several properties. Use the data property of the object to retrieve the data received from the server.

$scope.employees = $http.get('EmployeeService.asmx/GetAllEmployees')
.then(function (response) {
$scope.employees = response.data;
});

You can use the $log service to log the response object to the console to inspect all of it's properties

$scope.employees = $http.get('EmployeeService.asmx/GetAllEmployees')
.then(function (response) {
$scope.employees = response.data;
$log.info(response);
});

If there is an error processing the request, the errorCallback function is called. The errorCallback function is passed as the second parameter to the then() function. The errorCallback function receives a single object that contains several properties. Use the data or statusText properties of the returned object to find the reasons for the failure.

$scope.employees = $http.get('EmployeeService.asmx/GetAllEmployee')
.then(function (response) {
$scope.employees = response.data;
}, function (reason) {
$scope.error = reason.data;
});

You can use the $log service to log the response object to the console to inspect all of it's properties

$scope.employees = $http.get('EmployeeService.asmx/GetAllEmployee')
.then(function (response) {
$scope.employees = response.data;
}, function (reason) {
$scope.error = reason.data;
$log.info(reason);
});

You can also create separate functions and associate them as successCallback and errorCallback functions

Default Transformations provided by Angular's http service
If the data property of the request configuration object contains a JavaScript object, it is automatically converted into JSON object
If JSON response is detected, it is automatically converted into a JavaScript object

Link for all dot net and sql server video tutorial playlists
https://www.youtube.com/user/kudvenka...

Link for slides, code samples and text version of the video
http://csharp-video-tutorials.blogspo...