AngularJS快速入门指南07:Http对象
$http是AngularJS提供的一个服务,用来从远程服务器读取数据。
提供数据
下面的数据由Web服务器提供:
{
"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是一个从Web服务器读取数据的核心服务。
$http.get(url)是一个用来从服务器读取数据的函数。
<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://example.php")
.success(function(response) {$scope.names = response.records;});
});
</script>
代码解释:
AngularJS application通过ng-app指令定义。application在<div>元素内运行。
ng-controller指令定义了控制器的名称。
customersCtrl函数是一个标准的JavaScript对象构造函数。
AngularJS通过$scope和$http对象调用customersCtrl函数。
$scope是一个appliation object(即application的变量及函数的所有者)。
$http是一个用来请求外部数据的XMLHttpRequest object。
$http.get()函数从服务器读取JSON数据。
如果成功的话,控制器将在$scope对象中创建一个names属性,并将从服务器端返回的JSON数据赋值给这个属性。
AngularJS快速入门指南07:Http对象的更多相关文章
- AngularJS快速入门指南08:表格
ng-repeat指令非常适合用来显示表格. 在表格中显示数据 在AngularJS中显示表格非常容易: <div ng-app="myApp" ng-controller= ...
- AngularJS快速入门指南06:过滤器
thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...
- AngularJS快速入门指南01:导言
AngularJS使用新的attributes扩展了HTML AngularJS对单页面应用的支持非常好(SPAs) AngularJS非常容易学习 现在就开始学习AngularJS吧! 关于本指南 ...
- AngularJS快速入门指南20:快速参考
thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...
- AngularJS快速入门指南19:示例代码
本文给出的大部分示例都可以直接运行,通过点击运行按钮来查看结果,同时支持在线编辑代码. <div ng-app=""> <p>Name: <input ...
- AngularJS快速入门指南16:Bootstrap
thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...
- AngularJS快速入门指南15:API
thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...
- AngularJS快速入门指南14:数据验证
thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...
- AngularJS快速入门指南13:表单
一个AngularJS表单是一组输入型控件的集合. HTML控件 HTML输入型标签标包括: input标签 select标签 button标签 textarea标签 HTML表单 HTML表单将各种 ...
随机推荐
- Tlist
Tlist (Classes.pas) 在我刚开始接触TList的时候,TList搞得我迷雾重重,都是Capacity属性惹的祸.我查了Delphi的帮助,它说Capacity是TList的最大容量, ...
- Selenium2+python自动化15-select下拉框
前言 最近由于工作原因,更新慢了一点,今天终于抽出一点时间给大家继续更新selenium系列,学习的脚本不能停止,希望小伙伴能多多支持. 本篇以百度设置下拉选项框为案例,详细介绍select下拉框相关 ...
- ABP的Zero Sample
下载自:https://github.com/aspnetboilerplate/module-zero 打开D:\ABP\module-zero-master\sample里的ModuleZeroS ...
- 关于内存数据与 JSON
闲话: 正在用 WebBroker 写一个小网站,感受颇多: 1.如果是写一个小东西,应该先考虑下 WebBroker,因为它是分分钟即可上手的. 2.如果要写一个大东西,或许也应该考虑下 WebBr ...
- XE3随笔6:SuperObject 的 JSON 对象中还可以包含 "方法"
SuperObject 的 JSON 对象中还可以包含 "方法", 这太有意思了; 其方法的格式是: procedure Method(const This, Params: IS ...
- sql sever 2008修改数据类型
如果是新表,直接在表中修改: 如果不是新表,则须sql语句修改 附sql语句 alter table 表名 alter column 列名 新的数据类型
- 深入浅出Symfony2 - 如何提高网站响应速度 [转]
简介 Symfony2是一个基于PHP语言的Web开发框架,有着开发速度快.性能高等特点.但Symfony2的学习曲线也比较陡峭,没有经验的初学者往往需要一些练习才能掌握其特性.相对其他框架,Symf ...
- 学习python之练习(二)
#2.已知a1=1,a2=2,an=a(n-1)+a(n-2)(n>=3),求数列{a1,a2,a3....an}的总和 import math arr = [0]*100 num = 0 fo ...
- nop 添加字段
一.Libraries 1.core 层------------实体字段 2.data-Map----------映射到数据库 二.Admin 1.Models --------admin界面模型 ...
- 内存管理运算符new delete与内存管理函数malloc free的区别——已经他们对对象创建的过程。
(1)内存管理函数与内存管理运算符的区别 内存管理函数有内存分配函数,malloc calloc realloc 以及内存释放函数free. 内存管理运算符有new 和delete. 两种内存管理方式 ...