WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

AngularJS AJAX - $http


$http is an AngularJS administration for perusing information from remote servers.


AngularJS $http

The AngularJS $http administration makes a demand to the server, and restores a response.

Example

Make a straightforward demand to the server, and show the outcome in a header:

<div ng-app="myApp" ng-controller="myCtrl">

<p>Today's welcome message is:</p>
<h1>{{myWelcome}}</h1>

</div>

<script>
var application = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
    $http.get("welcome.htm")
    .then(function(response) {
        $scope.myWelcome = response.data;
    });
});
</script>
Attempt it Yourself »

Methods

The model above utilizations the .get strategy for the $http service.

The .get technique is an alternate route strategy for the $http administration. There are a few easy route methods:

  • .delete()
  • .get()
  • .head()
  • .jsonp()
  • .patch()
  • .post()
  • .put()

The techniques above are altogether alternate ways of calling the $http service:

Example

var application = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
    $http({
        technique : "GET",
        url : "welcome.htm"
    }).then(function mySucces(response) {
        $scope.myWelcome = response.data;
    }, work myError(response) {
        $scope.myWelcome = response.statusText;
    });
});

The precedent above executes the $http administration with an item as a contention. The article is indicating the HTTP technique, the url, what to do on progress, and what to do on failure.


Properties

The reaction from the server is an article with these properties:

  • .config the item used to produce the request.
  • .data a string, or an article, conveying the reaction from the server.
  • .headers a capacity to use to get header information.
  • .status a number characterizing the HTTP status.
  • .statusText a string characterizing the HTTP status.

Example

var application = 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;
    });
});

To handle mistakes, add one additional capacities to the .then method:

Example

var application = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
    $http.get("wrongfilename.htm")
    .then(function(response) {
        /First capacity handles success
        $scope.content = response.data;
    }, function(response) {
        /Second capacity handles error
        $scope.content = "Something went wrong";
    });
});
Attempt it Yourself »

JSON

Example

The ng-repeat mandate is ideal for circling through an array:

<div ng-app="myApp" ng-controller="customersCtrl">

<ul>
  <li ng-repeat="x in myData">
    {{ x.Name + ', ' + x.Country }}
  </li>
</ul>

</div>

<script>
var application = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
    $http.get("customers.php").then(function(response) {
        $scope.myData = response.data.records;
    });
});
</script>

Application explained:

The application characterizes the customersCtrl controller, with a $scope and $http object.

$http is a XMLHttpRequest object for asking outside data.

$http.get() peruses JSON data from http://www.welookups.com/rakish/customers.php.

On achievement, the controller makes a property, myData, in the extension, with JSON information from the server.