×

Html & Html5

The World's best Software Development Study Portal

AngularJS AJAX - $http


  • The AngularJS $http service makes a request to the server, and returns a response.

  • Here we are using the .get() method of the $http service.

  • This is a shortcut method of the $http service.

  • There are several shortcut methods like .delete() .head() .jsonp() .patch() .post() .put()

  • This example uses the .get method of the $http service.



    $http service makes a request to the server

    <div ng-app="myApp" ng-controller="myCtrl"> <h1>{{myWelcome}}</h1> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope, $http) { $http.get("welcome.html") .then(function(response) { $scope.myWelcome = response.data; }); }); </script>
    Output
    Hello IT training institute



    The response from the server is an object with these properties:

  • .config the object used to generate the request.

  • .data a string, or an object, carrying the response from the server.

  • .headers a function to use to get header information.

  • .status a number defining the HTTP status.

  • .statusText a string defining the HTTP status.




  • $http service makes a request to the server

    <div ng-app="myApp" ng-controller="myCtrl"> <p>Data : {{content}}</p> <p>Status : {{statuscode}}</p> <p>StatusText : {{statustext}}</p> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope, $http) { $http.get("welcome.htm") .then(function(response) { $scope.content = response.data; $scope.statuscode = response.status; $scope.statustext = response.statusText; }); }); </script>
    Output

    Data : Hello AngularJS Students

    Status : 200

    StatusText : IT training institute