IMG-LOGO
Home Tutorial $http In AngularJS

$http In AngularJS

by MH RISHAD - 07 Mar 2020
IMG

$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>
Share:

Leave a Comment

Required fields are marked *