Explanation of XMLHttpRequest example of AngularJS introductory tutorial

2021-07-06 09:52:05
OfStack

AngularJS XMLHttpRequest

$http is a core service in AngularJS that reads data from remote servers.

Read the JSON file

Here are the JSON files stored on the web server:

http://www.runoob.com/try/angularjs/data/Customers_JSON.php


{
"records":
[
{
"Name" : "Alfreds Futterkiste",
"City" : "Berlin",
"Country" : "Germany"
},
{
"Name" : "Berglunds snabbköp",
"City" : "Luleå",
"Country" : "Sweden"
},
{
"Name" : "Centro comercial Moctezuma",
"City" : "M é xico D.F.",
"Country" : "Mexico"
},
{
"Name" : "Ernst Handel",
"City" : "Graz",
"Country" : "Austria"
},
{
"Name" : "FISSA Fabrica Inter. Salchichas S.A.",
"City" : "Madrid",
"Country" : "Spain"
},
{
"Name" : "Galer í a del gastr ó nomo",
"City" : "Barcelona",
"Country" : "Spain"
},
{
"Name" : "Island Trading",
"City" : "Cowes",
"Country" : "UK"
},
{
"Name" : "Königlich Essen",
"City" : "Brandenburg",
"Country" : "Germany"
},
{
"Name" : "Laughing Bacchus Wine Cellars",
"City" : "Vancouver",
"Country" : "Canada"
},
{
"Name" : "Magazzini Alimentari Riuniti",
"City" : "Bergamo",
"Country" : "Italy"
},
{
"Name" : "North/South",
"City" : "London",
"Country" : "UK"
},
{
"Name" : "Paris sp é cialit é s",
"City" : "Paris",
"Country" : "France"
},
{
"Name" : "Rattlesnake Canyon Grocery",
"City" : "Albuquerque",
"Country" : "USA"
},
{
"Name" : "Simons bistro",
"City" : "København",
"Country" : "Denmark"
},
{
"Name" : "The Big Cheese",
"City" : "Portland",
"Country" : "USA"
},
{
"Name" : "Vaffeljernet",
"City" : "Århus",
"Country" : "Denmark"
},
{
"Name" : "Wolski Zajazd",
"City" : "Warszawa",
"Country" : "Poland"
}
]
}

AngularJS $http

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

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

AngularJS instance


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

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

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

</div>

<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
 $http.get("http://www.runoob.com/try/angularjs/data/Customers_JSON.php")
 .success(function (response) {$scope.names = response.records;});
});
</script>

</body>
</html>

Run results:

Alfreds Futterkiste, Germany Ana Trujillo Emparedados y helados, Mexico Antonio Moreno Taquer í a, Mexico Around the Horn, UK B's Beverages, UK Berglunds snabbköp, Sweden Blauer See Delikatessen, Germany Blondel p è re et fils, France B ó lido Comidas preparadas, Spain Bon app', France Bottom-Dollar Marketse, Canada Cactus Comidas para llevar, Argentina Centro comercial Moctezuma, Mexico Chop-suey Chinese, Switzerland Com é rcio Mineiro, Brazil

Application parsing:

Note: The get request of the above code is the server of this site, you can't copy it directly to your local operation, and there will be cross-domain problems. The solution is to

Customers_JSON. php data copy to your own server, attached: PHP Ajax cross-domain problem best solution.

AngularJS applications are defined by ng-app. Apply to < div > Execute in.

The ng-controller directive sets the controller object name.

Function customersController is a standard JavaScript object constructor.

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

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

The server data file is: http://www. runoob. com/try/angularjs/data/Customers_JSON. php.

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

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

The above is the collation of AngularJS XMLHttpRequest data, and the follow-up will continue to supplement, hoping to help friends in need.