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.

Voorbeeld

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 of the service .get Method.

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

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

The above methods are shortcuts for calling the $http service:

Voorbeeld

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, operation to be executed on success, and operation to be executed on failure.

Property

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

• .config Object used to generate the request
• .data String of object, carrying the response from the server
• .headers Function to get header information
• .status Define the numeric for HTTP status
• .statusText Define the string for HTTP status

Voorbeeld

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, send to .then Add a function to the method:

Voorbeeld

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

De gegevens uit de respons moeten in JSON-formaat zijn.

JSON is een uitstekende manier om gegevens over te dragen en is gemakkelijk te gebruiken in AngularJS of elke andere JavaScript.

Voorbeeld: We hebben op de server een bestand dat een JSON object retourneert met 15 klanten, alles verpakt in een genaamd records in de array.

Klik hier om het JSON object te bekijken.

Voorbeeld

De 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.Naam + ', ' + x.Land }}
  </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 a successful operation, the controller creates a property in the scope myData, which includes JSON data from the server.