AngularJS - Service - "$http"

The $http service is used to make HTTP requests to the remote server.  $http service is a function that has a single input parametr i.e, a configuration object.

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

Example: Consuming ASP.NET web service.

Create an asp.net service with web method to get the employees. which return a json object having employees. EmployeeService.asmx

               [{"name":"Pratibha Hyanki", "gender": "Female","city":"India"},

                {"name:"Akira","gender":"Female","city":"Mumbai"},

                {"name":"Dan","gender":"Male","city":"Delhi"}]    

The web.config should have this entry in web.config for http get to work.

<system.web>

  <webService>

       <protocols>

           <add name="HttpGet" />

       </protocols>

  </webService>

</system.web>

  

Define the controller: This uses $http object to call the service, which is injected in the controller function. controller.js

   var myApp = angular.module('myApp', [])

                                       .controller('myController', function($scope, $http){

                                              $http({

                                                             method: 'GET'

                                                             url: 'EmployeeService.asmx/GellAllEmployees'

                                              })

                                                     .then(

                                                      function(response) {

                                                          $scope.employees = response.data;

                                                      }, 

                                                      function(reason) {

                                                          $scope.error = reason.data;

                                                      });

                                        });

                                                

Using this controller: emplyee.html

     <div ng-controller='myController'>

              <div>

                       <table>

                             <tr ng-repeat ='employee in employees'>

                                    <td> {{employee.name}}  </td>

                                    <td> {{employee.gender}} </td>

                                    <td>{{employee.city}} </td>

                       </table>

              </div>    

    </div>

$http service returns a promise object which gets generated asynchronously, that's the reason we cant call $http method without the method .then which has a success and error callback methods. You can also create a success and error callback functions and call that in place of calling anonymous functions.

Using success and error callback methods in place of anonymous method calls:
   var successCallback = function(response) {
            $scope.employees = response.data;
   };

   var errorCallback = function(response) {
           $scope.error = response.data.
   };

   var myApp = angular.module('myApp', [])

                                       .controller('myController', function($scope, $http){

                                              $http({

                                                             method: 'GET'

                                                             url: 'EmployeeService.asmx/GellAllEmployees'

                                               })

                                                     .then(successCallback, errorCallback);

                                        });

The two default transformations are provided by AnghulaJS http service:

• If 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.

The shortcut method for using the service $http:

    var myApp = angular.module('myApp', [])

                                      .controller('myController', function($scope, $http){

                                            $http.get('EmployeeService.asmx/GellAllEmployees')

                                                     .then(

                                                      function(response) {

                                                          $scope.employees = response.data;

                                                      }, 

                                                      function(reason) {

                                                          $scope.error = reason.data;

                                                      });

                                          });  

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

The $log service:

$log service is used for logging the information on the console. This is extremely useful for developers while debugging the AngularJS application.

Example: Inject the $log service to the controller created above

var myApp = angular.module('myApp', [])

                                     .controller('myController', function($scope, $http){

                                              $http({

                                                             method: 'GET'

                                                             url: 'EmployeeService.asmx/GellAllEmployees'

                                              })

                                                     .then(

                                                      function(response) {

                                                          $scope.employees = response.data;

                                                          $log.info(response);

                                                      }, 

                                                      function(reason) {

                                                          $scope.error = reason.data;

                                                          $log.info(reason);

                                                      });

                                        });