AngularJS AJAX - $http

$http is a service of AngularJS, used to read data from a remote server.

AngularJS $http

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

Example

Send a simple request to the server and display the result in the title:

<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>

Try It Yourself

method

The above example uses $http service .get Method.

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

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

The above methods are shortcuts to call 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;
  });
});

Try It Yourself

The above example uses an object as a parameter to execute the $http service. The object specifies the HTTP method, URL, action to be executed on success, and action to be executed on failure.

Property

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

• .config An object used to generate requests
• .data A string or object carrying the response from the server
• .headers The function used to obtain header information
• .status Define the numeric of HTTP status
• .statusText Define the string of 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;
  });
});

Try It Yourself

To handle errors, please pass to .then The method adds a function:

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

Try It Yourself

JSON

The data obtained from the response should be in JSON format.

JSON is an excellent way to transmit data and is easy to use in AngularJS or any other JavaScript.

For example: we have a file on the server that returns a JSON object containing 15 customers, all of which are wrapped in a name called records in the array.

Please click here to view 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>

Try It Yourself

Application Description:

The application defines customersCtrl controller with scope and http object.

$http is a XMLHttpRequest Object, used to request external data.

$http.get() Read from https://www.codew3c.com/angular/customers.php JSON Data.

After successful execution, the controller creates a property in the scope myDatawhich includes JSON data from the server.