星空网 > 软件开发 > Java

Part 18 $http service in AngularJS

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/service/$http#usage

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

Example : Using the short cut 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

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


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



原标题:Part 18 $http service in AngularJS

关键词:JS

JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

lazada怎么提款:https://www.goluckyvip.com/tag/85257.html
lazada适合卖什么产品:https://www.goluckyvip.com/tag/85258.html
lazada是正品吗:https://www.goluckyvip.com/tag/85259.html
lazada直播怎么开通:https://www.goluckyvip.com/tag/85260.html
lazada产品关键词怎么找:https://www.goluckyvip.com/tag/85261.html
lazada怎么搜索店铺:https://www.goluckyvip.com/tag/85262.html
​TikTok发生了什么?美区增长首次停滞,准入管理力度加大:https://www.kjdsnews.com/a/1836407.html
2024年如何找到在TikTok上发帖的最佳时间:https://www.kjdsnews.com/a/1836408.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流