$http In AngularJS
$http is an AngularJS service for reading data from remote servers.
The AngularJS $http service makes a request to the server, and returns a response.
Example
Create a simple request to the server, and display the result in a header:
<div ng-app="FirstApp" ng-controller="FirstCtrl">
<p>Today's welcome message is:</p>
<h1>{{WelcomeGrettings}}</h1>
</div>
<script>
var app = angular.module('FirstApp', []);
app.controller('FirstCtrl', function($scope, $http) {
$http.get("welcome.htm")
.then(function(response) {
$scope.WelcomeGrettings = response.data;
});
});
</script>
Methods
The example uses the .get method of the $http service.
The .get method is a shortcut method. Many of shortcut methods below:
.delete()
.get()
.head()
.jsonp()
.patch()
.post()
.put()
These are all shortcuts of calling the $http service:
Example 2
var app = angular.module('FirstApp', []);
app.controller('FirstCtrl', function($scope, $http) {
$http({
method : "GET",
url : "welcome.htm"
}).then(function mySuccess(response) {
$scope.WelcomeGrettings = response.data;
}, function myError(response) {
$scope.WelcomeGrettings = response.statusText;
});
});
This example executes the $http service with an object as an argument. The object is specifying the HTTP method, url, what to do on success, and what to do on failure.
Properties
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('FirstApp', []);
app.controller('FirstCtrl', 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('FirstApp', []);
app.controller('FirstCtrl', 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";
});
});
Example
The ng-repeat directive for looping through an array:
<div ng-app="FirstApp" ng-controller="customersCtrl">
<ul>
<li ng-repeat="x in myData">
{{ x.Name + ', ' + x.Country }}
</li>
</ul>
</div>
<script>
var app = angular.module('FirstApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("customers.php").then(function(response) {
$scope.myData = response.data.records;
});
});
</script>
