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(' ...
随机推荐
- CSU 1333 Funny Car Racing （最短路）
题目链接: http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1333 解题报告:一个图里面有n个点和m条单向边,注意是单向边,然后每条路开a秒关闭b秒 ...
- Unable to locate player settings. bin/Data/settings.xml
Hello guys, so according to the this response: http://stackoverflow.com/a/18302624/5727136 you need ...
- 【笔记】CSS高级选择器:nth-child()
详解CSS中:nth-child的用法 前端的哥们想必都接触过css中一个神奇的玩意,可以轻松选取你想要的标签并给与修改添加样式,是不是很给力,它就是“:nth-child”. 下面我将用几个典型的实 ...
- 谷歌chrome浏览器和火狐firefox浏览器自带http抓包工具和请求模拟插件
谷歌chrome浏览器自带http抓包工具 chrome://net-internals/ 谷歌chrome浏览器http请求模拟插件:postman 火狐http请求模拟插件:httprequest ...
- CDN——到底用还是不用？
最近在学bootstrap,在知乎上搜索bootstrap看到有人问bootstrap基础包体积较大,对性能影响会不会很大,看到两种方法来减少对性能的影响: 有选择地部分加载,bootstrap带有L ...
- Html空格字符代码：
Html空格字符代码: 为html空格字符代码,由“&+n+b+s+p+;”组成,记住最后一个分号不要忘记了.
- poj 1001
http://poj.org/problem?id=1001 这是一道高精度的运算,如果你之前有写过那种高精度的乘法的题目的话,做这个也还是比较简单的.. 思路:我是首先把小数点的位置确定下来,然后其 ...
- 快速搭建VPN服务器
http://www.ttlsa.com/linux/centos-install-pptp-vpn/
- Android webView解析URL参数
2015年6月18日 13:56:21 星期四 又当爹又当娘啊............ public void onPageFinished(WebView view, String url) { s ...
- UrlEncoder url编码
public static string PercentEncode(string s) { var bytes = Encoding.UTF8.GetBytes( ...