Angular Http

AngularJS AJAX - $http

---

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

---

AngularJS $http

The AngularJS $http service makes a asking to the server, in addition to returns a response.

Example

Make a uncomplicated asking to the server, in addition to display the lawsuit inward 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 lawsuit to a higher house 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 to a higher house 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 lawsuit to a higher house executes the $http service amongst an object equally an argument. The object is specifying the HTTP method, the url, what to exercise on success, in addition to what to exercise on failure.

---

Properties

The answer from the server is an object amongst these properties:

• .config the object used to generate the request.
• .data a string, or an object, carrying the answer from the server.
• .headers a business office to usage to teach header information.
• .status a break 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 handgrip errors, add together 1 to a greater extent than 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 business office handles success        $scope.content = response.data;
    }, function(response) {
        //Second business office handles error        $scope.content = "Something went wrong";
    });
});

---

JSON

The information you lot teach from the answer is expected to endure inward JSON format.
JSON is a neat agency of transporting data, in addition to it is slow to usage inside AngularJS, or whatever other JavaScript.
Example: On the server nosotros get got a file that returns a JSON object containing fifteen customers, all wrapped inward array called records.
Click hither to get got a human face 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 inward 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, amongst a $scope in addition to $http object.
$http is an XMLHttpRequest object for requesting external data.
$http.get() reads JSON data from https://www.w3schools.com/angular/customers.php.
On success, the controller creates a property, myData, inward the scope, amongst JSON information from the server.

---