AngularJS AJAX - $http


$http is an AngularJS service for reading data from remote servers.

* AngularJS $http

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

Example:

Make a simple request to the server, and display the result in a header:

<div ng-app="myapp" ng-controller="myctrl"> 

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

</div>

<script>
var app = angular.module('myapp', []);
app.controller('myctrl', function($scope, $http) {
    $http.get("welcome.htm")
    .then(function(response) {
        $scope.myWelcome = response.data;
    });
});
</script>

* Methods
The example above uses the .get method of the $http service.

The .get method is a shortcut method of the $http service. There are several shortcut methods:

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

The methods above are all shortcuts of calling the $http service:

Example:

var app = angular.module('myapp', []);
app.controller('myctrl', function($scope, $http) {
    $http({
        method : "GET",
        url : "welcome.htm"
    }).then(function mySuccess(response) {
        $scope.myWelcome = response.data;
    }, function myError(response) {
        $scope.myWelcome = response.statusText;
    });
});

The example above executes the $http service with an object as an argument. The object is specifying the HTTP method, the URL, what to do on success, and what to do on failure.

* Properties

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.

Example:

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; 
    });
});

To handle errors, add one more functions to the .then method:

Example:

var app = angular.module('myapp', []);
app.controller('myctrl', function($scope, $http) {
    $http.get("wrongfilename.htm")
    .then(function(response) {
        //First function handles success
        $scope.content = response.data;
    }, function(response) {
        //Second function handles error
        $scope.content = "Something went wrong";
    });
});


* JSON

The data you get from the response is expected to be in JSON format.

JSON is a great way of transporting data, and it is easy to use within AngularJS, or any other JavaScript.

Example: On the server, we have a file that returns a JSON object containing 15 customers, all wrapped in an array called records.

Click here to take a look at the JSON object.

Example:

The ng-repeat directive is perfect for looping 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 app = 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 defines the customersCtrl controller, with a $scope and $http object.

$http is an XMLHttpRequest object for requesting external data.

On success, the controller creates a property, myData, in the scope, with JSON data from the server.