1. [{
2. "Name":"Alfreds Futterkiste",
3. "City":"Berlin",
4. "Country":"Germany"
5. },{
6. "Name":"Berglunds snabbköp",
7. "City":"Luleå",
8. "Country":"Sweden"
9. },{
10. "Name":"Centro comercial Moctezuma",
11. "City":"México D.F.",
12. "Country":"Mexico"
13. },{
14. "Name":"Ernst Handel",
15. "City":"Graz",
16. "Country":"Austria"
17. },{
18. "Name":"FISSA Fabrica Inter. Salchichas S.A.",
19. "City":"Madrid",
20. "Country":"Spain"
21. },{
22. "Name":"Galería del gastrónomo",
23. "City":"Barcelona",
24. "Country":"Spain"
25. },{
26. "Name":"Island Trading",
27. "City":"Cowes",
28. "Country":"UK"
29. },{
30. "Name":"Königlich Essen",
31. "City":"Brandenburg",
32. "Country":"Germany"
33. },{
34. "Name":"Laughing Bacchus Wine Cellars",
35. "City":"Vancouver",
36. "Country":"Canada"
37. },{
38. "Name":"Magazzini Alimentari Riuniti",
39. "City":"Bergamo",
40. "Country":"Italy"
41. },{
42. "Name":"North/South",
43. "City":"London",
44. "Country":"UK"
45. },{
46. "Name":"Paris spécialités",
47. "City":"Paris",
48. "Country":"France"
49. },{
50. "Name":"Rattlesnake Canyon Grocery",
51. "City":"Albuquerque",
52. "Country":"USA"
53. },{
54. "Name":"Simons bistro",
55. "City":"København",
56. "Country":"Denmark"
57. },{
58. "Name":"The Big Cheese",
59. "City":"Portland",
60. "Country":"USA"
61. },{
62. "Name":"Vaffeljernet",
63. "City":"Århus",
64. "Country":"Denmark"
65. },{
66. "Name":"Wolski Zajazd",
67. "City":"Warszawa",
68. "Country":"Poland"
69. }]

1. AngularJS $http 是一个用于读取web服务器上数据的服务。
2. $http.get(url)是用于读取服务器数据的函数。

1. <div ng-app="myApp" ng-controller="customersCtrl">
3. <ul>
4. <li ng-repeat="x in names">
5. {{ x.Name+‘, ‘+ x.Country}}
6. </li>
7. </ul>
9. </div>
11. <script>
12. var app = angular.module(‘myApp‘,[]);
13. app.controller(‘customersCtrl‘,function($scope,$http){
14. $http.get("Customers_JSON.php")
15. .success(function(response){$scope.names = response.records;});
16. });
17. </script>

应用解析:

注意：以上代码的 get 请求是本站的服务器，你不能直接拷贝到你本地运行，会存在跨域问题，解决办法就是将 Customers_JSON.php 的数据拷贝到你自己的服务器上。

AngularJS 应用通过 ng-app 定义。应用在 <div> 中执行。

ng-controller 指令设置了 controller 对象 名。

函数 customersController 是一个标准的 JavaScript 对象构造器。

控制器对象有一个属性: $scope.names。

$http.get() 从web服务器上读取静态 JSON 数据。

当从服务端载入 JSON 数据时，$scope.names 变为一个数组。