Introduction
AngularJS $http service is the one of the service among the 30 services of AngularJS, in this blog we will demonstrate how to use $http service in AngularJS.
Getting Started
AngularJS $http service is used to call remote http services like ASP.NET Web Service or ASP.NET Web APIs. it takes single argument that is configuration object and this configuration object is used to generate request and response. The config can be global config or can be overridden at run time for particular call.
Syntax
- $http({
- method: 'menthod_name',
- url: 'service_url',
- data:'{}'
- }).then(function successCallback(response) {
- }, function errorCallback(response) {
- });
You can see above syntax contains three sections that is request, response and error part. request section generates request object and Request object contains Method Name, URL, Data,Content Type,Content Length etc.
The response section is callback and will be called asynchronously when the response is available. The response object contains five properties that is listed bellow.
- data - Is a string data type and the response body transformed with the transform functions.
- status - Is a int data type and is HTTP status code of the response. Status code between 200 and 299 is considered a success status and will result in the success callback being called. Any response status code outside of that range is considered an error status and will result in the error callback being called. Also, status codes less than -1 are normalized to zero. -1 usually means the request was aborted, e.g. using a config.timeout.
- headers-Is a function which takes header name as parameter.
- config-The configuration object that was used to generate the request.
- statusText-HTTP status text of the response.
The last section is handling error, it is called asynchronously if an error occurs or server returns response with an error status.
Using shortcut method of $http service remote services can be call as well, $http service supports seven shortcut method that is listed below. All shortcut methods require passing in the URL, and request data must be passed in for POST/PUT requests. An optional config can be passed as the last argument.
- $http.get
- $http.head
- $http.post
- $http.put
- $http.delete
- $http.jsonp
- $http.patch
Syntax
- $http.get('/ServiceUrl', config).then(successCallback, errorCallback);
- $http.post('/ServiceUrl', data, config).then(successCallback, errorCallback);
Example
This example demonstrates use of get method by using both normal method and shortcut method. It requests google page and getting error code in response. For more details go through the code example.
- <HTML ng-app="myapp">
- <TITLE> AngularJS learning(http Service)</TITLE>
- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
- <script>
- var myapp = angular.module('myapp', []);
- myapp.controller('myappcont', function($scope, $http) {
- $scope.pg="";
- $scope.btnclick=function(){
- $http({
- method: 'GET',
- url: "https://www.google.co.in/"
- }).then(function successCallback(response) {
- $scope.pg=response.data;
- alert(response.data);
- }, function errorCallback(response) {
- alert('Error Code:'+response.status+',Message:'+response.statusText);
- });
- }
- $scope.btnsclick=function(){
- $http.get("https://www.google.co.in/")
- .then(function(response) {
- alert(response.status);
- $scope.pg = response.data;
- }
- ,function errorCallback(response){
- alert('Error Code:'+response.status+',Message:'+response.statusText);
- });
- }
- });
- </script>
- <BODY ng-controller="myappcont">
- <p>Click to load(Full method):<button ng-click="btnclick()">Click</button>
- <p>Click to load(Shortcut method):<button ng-click="btnclick()">Click</button>
- <div ng-include="pg"></div>
- </p>
- </BODY>
- </HTML>