AngularJS XMLHttpRequest
$http is a core service in AngularJS that reads data from remote servers.
Read JSON files
The following is the JSON file 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 DF","Country" : "Mexico"},{"Name" : "Ernst Handel","City" : "Graz","Country" : "Austria"},{"Name" : "FISSA Fabrica Inter. Salchichas SA","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 used to read data on a 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>Running results:
Application analysis:
Note: The get request of the above code is the server of this site. You cannot copy it directly to your local operation. There will be cross-domain problems. The solution is to
Copy the Customers_JSON.php data to your own server, with the best solution to PHP Ajax cross-domain problem.
AngularJS applications are defined by ng-app. The application is executed in <div>.
The ng-controller directive sets the controller object name.
The function customersController 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: 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 a compilation of AngularJS XMLHttpRequest information, and we will continue to add it later, hoping to help friends in need.