AngularJS XMLHttpRequest
程序员文章站
2022-06-10 17:29:10
...
$http是AngularJS 中的一个核心服务,用于读取远程服务器的数据。
以下是存储在web服务器上的 JSON 文件data.json。
[ { "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是一个用于读取web服务器上数据的服务。$http.get(url) 是用于读取服务器数据的函数。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="utf-8"></meta> <title>AngularJS XMLHttpRequest</title> <script src="angular/angular.js"></script> </head> <body> <div ng-app="" ng-controller="customersController"> <ul> <li ng-repeat="x in names">{{ x.Name + ', ' + x.Country }}</li> </ul> </div> </body> <script> function customersController($scope,$http) { $http.get("data.json").success(function(response) {$scope.names = response;}); //$http.get("http://localhost:8088/angularjs-http/data.json").success(function(response) {$scope.names = response;}); } </script> </html>
应用解析:
1.AngularJS 应用通过 ng-app 定义。应用在 <div> 中执行。
2.ng-controller 指令设置了controller 对象名。
3.函数 customersController 是一个标准的 JavaScript 对象构造器。
4.控制器对象有一个属性: $scope.names。
5.$http.get() 从web服务器上读取静态 JSON 数据。
6.当从服务端载入 JSON 数据时,$scope.names 变为一个数组。
运行结果:
工程结构:
上一篇: 浅谈ajax
下一篇: Python调用C++程序的方法详解
推荐阅读
-
AngularJS仿苹果滑屏删除控件
-
angularjs学习笔记之简单介绍
-
angularjs学习笔记之三大模块(modal,controller,view)
-
angularjs学习笔记之双向数据绑定
-
AngularJS的依赖注入实例分析(使用module和injector)
-
AngularJS的ng-repeat指令与scope继承关系实例详解
-
关于AngularJs数据的本地存储详解
-
AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题
-
浅谈angularjs $http提交数据探索
-
AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法