AngularJS XMLHttpRequest $http服务
$http 是 AngularJS 中的一个核心服务，用于读取远程服务器的数据。
读取JSON文件
以下是存储在web服务器上的 JSON 文件：
http://www.runoob.com/try/angularjs/data/sites.php
{
"sites": [
{
"Name": "菜鸟教程",
"Url": "www.runoob.com",
"Country": "CN"
},
{
"Name": "Google",
"Url": "www.google.com",
"Country": "USA"
},
{
"Name": "Facebook",
"Url": "www.facebook.com",
"Country": "USA"
},
{
"Name": "微博",
"Url": "www.weibo.com",
"Country": "CN"
}
]
}
AngularJS $http 是一个用于读取web服务器上数据的服务。
$http.get(url) 是用于读取服务器数据的函数。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body> <div ng-app="myApp" ng-controller="siteCtrl"> <ul>
<li ng-repeat="x in names">
{{ x.Name + ', ' + x.Country }}
</li>
</ul> </div> <script>
var app = angular.module('myApp', []);
app.controller('siteCtrl', function($scope, $http) {
$http.get("http://www.runoob.com/try/angularjs/data/sites.php")
.success(function (response) {$scope.names = response.sites;});
});
</script> </body>
</html>
解析:
注意：以上代码的 get 请求是本站的服务器，你不能直接拷贝到你本地运行，会存在跨域问题，解决办法就是将 Customers_JSON.php 的数据拷贝到你自己的服务器上，附：PHP Ajax 跨域问题最佳解决方案（http://www.runoob.com/w3cnote/php-ajax-cross-border.html）。
AngularJS 应用通过 ng-app 定义。应用在 <div> 中执行。
ng-controller 指令设置了 controller 对象 名。
函数 customersController 是一个标准的 JavaScript 对象构造器。
控制器对象有一个属性: $scope.names。
$http.get() 从web服务器上读取静态 JSON 数据。
服务器数据文件为： http://www.runoob.com/try/angularjs/data/sites.php。
当从服务端载入 JSON 数据时，$scope.names 变为一个数组。
AngularJS XMLHttpRequest $http服务的更多相关文章
- AngularJs之六（服务）
服务:AngularJS 中,服务是一个函数或对象,可在你的 AngularJS 应用中使用.AngularJS 内建了30 多个服务. 最常用的服务:$location 服务, $http 服务 ...
- 让AngularJS的$http 服务像jQuery.ajax()一样工作
让AngularJS的$http 服务像jQuery.ajax()一样工作 $http的post . 请求默认的content-Type=application/json . 提交的是json对象的字 ...
- Ⅳ.AngularJS的点点滴滴-- 服务
服务(Angularjs很多方法都是服务组成的) 1.使用service方法创建的单例服务 <html> <script src="http://ajax.googleap ...
- 怎么理解angularjs中的服务？
AngularJS中的服务其实就是提供一种方式抽取共用类库 比如说一些工具类方法,我们传统的做法就是自己写个 utility 类,把相关的工具方法填充到utility里面去,最后把utility类放到 ...
- AngularJS之使用服务封装
AngularJS之使用服务封装可复用代码 创建服务组件 在AngularJS中创建一个服务组件很简单,只需要定义一个具有$get方法的构造函数, 然后使用模块的provider方法进行登记: / ...
- AngularJS 的异步服务测试与Mocking
测试 AngularJS 的异步服务 最近,在做项目时掉进了 AngularJS 异步调用 $q 测试的坑中,直接躺枪了.折腾了许久日子,终于想通了其中的道道,但并不确定是最佳的解决方案,最后还是决定 ...
- AngularJS内建服务以及自定义服务的用法
在AngularJS中, 服务是一个比较重要的部分,它是一个对象或者是函数,可以在你的AngularJS的应用中使用.接下来介绍几种比较常用的内建服务以及自定义服务的方法. [内建服务] (1)loc ...
- 【angularJS】Service服务
AngularJS 中的服务是一个函数或对象.可以创建自己的服务,或使用内建服务. 内置服务 AngularJS 内建了30 多个服务. 1. $location 服务,它可以返回当前页面的 URL ...
- angularJS(三)：服务(Service)、http
一.服务 服务是一个函数或对象,可在你的 AngularJS 应用中使用. 可以创建自己的服务,或使用内建服务 $location 注意 $location 服务是作为一个参数传递到 controll ...
- angularjs provider 供应商服务
今天学习了angularjs的provider的供应商服务,写了个例子(自定义供应商服务,也可使用angularjs内部提供的服务) var starterApp = angular.module(' ...
随机推荐
- ii7安装php
http://www.jb51.net/article/22372.htm 我们知道php配置有几种: 1.CGI方式加载PHP环境,通常就是IIS里面配置解释器为php.exe,早期比较常见,目前使 ...
- HDU 5033 Building
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5033 解题报告:在一条x轴上有n个建筑物,每个建筑物有一个高度h,然后现在有q次查询,查询的内容是假设 ...
- BZOJ1483——[HNOI2009]梦幻布丁
1.题目大意:这题就是给你一个序列,有两个操作,一个是询问序列中的连续段数,比如序列 1 2 2 1就是三段.. 1是一段,2 2 又是一段,1又是一段,就是相同的在一起,第二个操作就是将其中的一种数 ...
- 瀑布流js排列
var _px = document.getElementById("px"); var con=document.getElementById("content&quo ...
- 符瑞艺 160809228_C语言程序设计实验2 选择结构程序设计
实验2- 输入3个数,并按由大到小的顺序输出. 实验要求: 编写一个C程序,输入3个数,并按由大到小的顺序输出. 参考: 源码: #include <stdio.h> int main() ...
- 跟着百度学PHP[3]-PHP中结构嵌套之循环结构与条件结构嵌套
任务 有个学生数组存储了学号和姓名,我们需要查找学号为"2014"的学生姓名,这时候我们就需要遍历该数组,并判定学号是否为"201 <?php $student = ...
- __get().__set.__isset,__unset魔术方法
一般来说,总是把类的属性定义为 private .这更符合现实的逻辑. 但是对属性的读取和赋值操作非常频繁的,因此在PHP中,预定义了两魔术方法 ＂__get()＂用来获取私有成员属性值的,只有一个参 ...
- 编写Delphi控件属性Stored和Default的理解及应用
property ButtonSize: Integer read FButtonSize write SetButtonSize default 0; property Color: TCol ...
- ARPACK在window visual Studio的安装配置
ARPACK是一个求解大规模稠密/稀疏矩阵问题的库,最近在做特征值问题时用到.ARPACK这库相当古老,最早是RICE的一帮人弄的.LAPACK也差不多,貌似是美帝某个.gov发起的.这俩源代码是Fo ...
- Struts2中的OGNL通配符
<action name="*_*" class="action.{1}Action" method="{2}"> 匹配,第一个 ...