AngularJS XMLHttpRequest

\n

---

\n

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

\n

Usage format:

\n

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

\n

Shorthand Methods

\n

Format for POST and GET shorthand methods:

\n

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

\n

Additionally, the following shorthand methods are available:

\n

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

\n

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

\n

---

\n

Reading JSON Files

\n

The following is a JSON file stored on a web server:

\n

\n

{"sites": [\n    {"Name": "", "Url": "www..com", "Country": "CN"},\n    {"Name": "Google", "Url": "www.google.com", "Country": "USA"},\n    {"Name": "Facebook", "Url": "www.facebook.com", "Country": "USA"},\n    {"Name": "Weibo", "Url": "www.weibo.com", "Country": "CN"}\n]}

\n

---

\n

AngularJS $http is a service used to read data from a web server.

\n

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

\n

\n

Deprecation Notice (v1.5)

\n

In v1.5, the success and error methods of $http have been deprecated. Use the then method instead.

\n

\n

General Method Example

\n

AngularJS 1.5+ Example

\n

var app = angular.module('myApp', []);\napp.controller('siteCtrl', function($scope, $http){\n    $http({method: 'GET', url: ''}).then(function successCallback(response){\n        $scope.names = response.data.sites;\n    }, function errorCallback(response){\n    });\n});

\n

Try it »

\n

Shorthand Method Example

\n

AngularJS 1.5+ Example

\n

<div ng-app="myApp"ng-controller="siteCtrl">\n    <ul>\n        <li ng-repeat="x in names">\n            {{ x.Name + ', ' + x.Country }}\n        </li>\n    </ul>\n</div>\n<script>\nvar app = angular.module('myApp', []);\napp.controller('siteCtrl', function($scope, $http) {\n    $http.get("")\n        .then(function (response) {$scope.names = response.data.sites;});\n});\n</script>

\n

Try it »

\n

AngularJS Below Version 1.5 - Example

\n

<div ng-app="myApp"ng-controller="siteCtrl">\n    <ul>\n        <li ng-repeat="x in names">\n            {{ x.Name + ', ' + x.Country }}\n        </li>\n    </ul>\n</div>\n<script>\nvar app = angular.module('myApp', []);\napp.controller('siteCtrl', function($scope, $http) {\n    $http.get("")\n        .success(function (response) {$scope.names = response.sites;});\n});\n</script>

\n

Try it »

\n

Application Analysis:

\n

Note: The get request in the code above is to the server of this site. You cannot copy it directly to run locally due to cross-origin issues. The solution is to copy the data from Customers_JSON.php to your own server. See also: PHP Ajax Cross-Origin Best Solution.

\n

AngularJS applications are defined using ng-app. The application runs within a <div>.

\n

The ng-controller directive sets the name of the controller object.

\n

The function customersController is a standard JavaScript object constructor.

\n

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

\n

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

\n

The server data file is: .

\n

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

\n\n \n \n \n \n

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