AngularJS Http

AngularJS XMLHttpRequest

$http It is a core service in AngularJS, used to read data from remote servers.

Format of use:

//　A simple GET request can be changed to POST
$http({
　　　　method: 'GET',
　　　　url:/someUrl'
}).then(function successCallback(response) {
　　　　　　　　//　Code to be executed upon request success
　　　　}, function errorCallback(response) {
　　　　　　　　//　Execute code on request failure
});

Abbreviated method

Abbreviated format for POST and GET methods:

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

In addition, the following abbreviations are also available:

• $http.get

• $http.head

• $http.post

• $http.put

• $http.delete

• $http.jsonp

• $http.patch

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

Read JSON file

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

{
　　　　"sites": [
　　　　　　　　{
　　　　　　　　　　　　"Name": "Basic Tutorial Website",
　　　　　　　　　　　　"Url": "www.w"3"Url": "www.codebox.com",
　　　　　　　　　　　　"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 used to read data from a web server.

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

Deprication notice (v1.5)

v1.5 in$http of success and error method is deprecated. Use then method instead.

General method example

AngularJS1.5 The above version - Example

var app = angular.module('myApp', []);
　　　　
app.controller('siteCtrl', function($scope, $http) {
　　　　$http({
　　　　　　　　method: 'GET',
　　　　　　　　url: 'https://www.oldtoolbag.com/try/angularjs/data/sites.php
　　　　}).then(function successCallback(response) {
　　　　　　　　　　　　$scope.names = response.data.sites;
　　　　　　　　}, function errorCallback(response) {
　　　　　　　　　　　　//　Execute code on request failure
　　　　});
　　
});

Short method example

AngularJS1.5 The above version - 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.oldtoolbag.com/run/angularjs/data/("sites.php")
　　.then(function(response) {$scope.names = response.data.sites;});
});<//script>

AngularJS1.5 Following version - 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.oldtoolbag.com/try/angularjs/data/("sites.php")
　　.success(function(response) {$scope.names = response.sites;});
});
</script>

Application Parsing:

Note: The GET request in the above code is from this site's server, you cannot directly copy it to run locally, there will be cross-domain issues. The solution is to copy the data from Customers_JSON.php to your own server.

AngularJS applications are created through ng-app Definition. The application is executed in <div>.

ng-controller The directive sets controller Object Name.

Function customersController is a standard JavaScript Object Constructor.

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

$http.get() to read static data from the web server 　JSON Data.

The server data file is:　https://www.oldtoolbag.com/run/angularjs/data/sites.php.

When loading JSON data from the server side,$scope.names to become an array.