AngularJS XMLHttpRequest

$http is a core service in AngularJS for reading data from remote servers.

Usage format:

// Simple GET request, can be changed to POST
$http({
    method: 'GET',
    url: '/someUrl'
}).then(function successCallback(response) {
        // Code to execute on successful request
    }, function errorCallback(response) {
        // Code to execute on failed request
});

Shorthand Methods

Shorthand methods for POST and GET:

$http.get('/someUrl', config).then(successCallback, errorCallback);
$http.post('/someUrl', data, config).then(successCallback, errorCallback);

Other shorthand methods include:

• $http.get
• $http.head
• $http.post
• $http.put
• $http.delete
• $http.jsonp
• $http.patch

For more detailed information, see: https://docs.angularjs.org/api/ng/service/$http

Reading JSON Files

Below is a JSON file stored on a web server:

https://www.tutorialpro.org/try/angularjs/data/sites.php

{
    "sites": [
        {
            "Name": "tutorialpro.org",
            "Url": "www.tutorialpro.org",
            "Country": "CN"
        },
        {
            "Name": "Google",
            "Url": "www.google.com",
            "Country": "USA"
        },
        {
            "Name": "Facebook",
            "Url": "www.facebook.com",
            "Country": "USA"
        },
        {
            "Name": "微博",
            "Url": "www.weibo.com",
            "Country": "CN"
        }
    ]
}

AngularJS $http

AngularJS $http is a service for reading data from web servers.

$http.get(url) is a function used to read server data.

Deprecation Notice (v1.5)

The success and error methods of $http in v1.5 are deprecated. Use the then method instead.

Example of General Method

AngularJS 1.5 and Above - Example

var app = angular.module('myApp', []);

app.controller('siteCtrl', function($scope, $http) {
    $http({
        method: 'GET',
        url: 'https://www.tutorialpro.org/try/angularjs/data/sites.php'
    }).then(function successCallback(response) {
            $scope.names = response.data.sites;
        }, function errorCallback(response) {
            // Code to execute on failed request
    });
});

Example of Shorthand Method

AngularJS 1.5 and Above - Example

<div ng-app="myApp" ng-controller="siteCtrl"> 

<ul>
  <li ng-repeat="x in names">
    {{ x.Name + ', ' + x.Country }}
  </li>
</ul>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('siteCtrl', function($scope, $http) {
  $http.get("https://www.tutorialpro.org/try/angularjs/data/sites.php")
  .then(function (response) {$scope.names = response.data.sites;});
});
</script>

AngularJS Below 1.5 - Example

<div ng-app="myApp" ng-controller="siteCtrl"> 

<ul>
  <li ng-repeat="x in names">
    {{ x.Name + ', ' + x.Country }}
  </li>
</ul>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('siteCtrl', function($scope, $http) {
  $http.get("https://www.tutorialpro.org/try/angularjs/data/sites.php")
  .success(function (response) {$scope.names = response.sites;});
});
</script>

Application Explanation:

Note: The GET request in the above code is to our server, and you cannot directly copy it to your local environment due to cross-origin issues. The solution is to copy the data from Customers_JSON.php to your own server. See: PHP Ajax Cross-Border Best Solution.

The AngularJS application is defined by ng-app. The application runs within the <div>.

The ng-controller directive sets the controller object name.

The customersController function is a standard JavaScript object constructor.

The controller object has a property: $scope.names.

$http.get() reads static JSON data from the web server.

The server data file is: https://www.tutorialpro.org/try/angularjs/data/sites.php.

When loading JSON data from the server, $scope.names becomes an array.

| | The above code can also be used to read database data. | | --- | --- |