--@angularJS--$http服务与后台数据交互
2015-05-21 10:33
417 查看
1、httpBasic.html:
<!DOCTYPE HTML>
<html ng-app="app">
<head>
<title>$http与后台数据交互</title>
<meta charset="utf-8">
<link rel="stylesheet" href="../css/bootstrap.css">
<script src="../js/angular.js"></script>
</head>
<body>
<div ng-controller="loadDataCtrl">
<ul>
<li ng-repeat="user in users">
{{user.name}}
</li>
</ul>
</div>
<script src="httpBasic.js"></script>
</body>
</html>
2、httpBasic.js:
var myModule = angular.module("app",[]);
myModule.controller('loadDataCtrl', ['$scope', '$http',
function($scope,$http){
$http({
method:'GET',
url:'data.json'
}).success(function(data,status,header,config){
console.log(data);
$scope.users = data;//直接为ng-repeat里面的users赋值了
}).error(function(data,status,header,config){
console.log("错误......");
});
}]);
3、后台数据文件——data.json
[{
"name": "《用AngularJS开发下一代WEB应用》"
},{
"name": "《Ext江湖》"
},{
"name": "《AngularJS权威指南》"
}]
<!DOCTYPE HTML>
<html ng-app="app">
<head>
<title>$http与后台数据交互</title>
<meta charset="utf-8">
<link rel="stylesheet" href="../css/bootstrap.css">
<script src="../js/angular.js"></script>
</head>
<body>
<div ng-controller="loadDataCtrl">
<ul>
<li ng-repeat="user in users">
{{user.name}}
</li>
</ul>
</div>
<script src="httpBasic.js"></script>
</body>
</html>
2、httpBasic.js:
var myModule = angular.module("app",[]);
myModule.controller('loadDataCtrl', ['$scope', '$http',
function($scope,$http){
$http({
method:'GET',
url:'data.json'
}).success(function(data,status,header,config){
console.log(data);
$scope.users = data;//直接为ng-repeat里面的users赋值了
}).error(function(data,status,header,config){
console.log("错误......");
});
}]);
3、后台数据文件——data.json
[{
"name": "《用AngularJS开发下一代WEB应用》"
},{
"name": "《Ext江湖》"
},{
"name": "《AngularJS权威指南》"
}]
相关文章推荐
- --@angularJS--自定义服务与后台数据交互小实例
- 通过AngularJS实现前端与后台的数据对接——服务(service,$http)
- 通过AngularJS实现前端与后台的数据对接(二)——服务(service,$http)篇
- 使用AngularJS的$http服务与服务端进行数据交互
- Android之使用HttpPost提交数据到服务器(Android手机客户端和后台服务器交互)
- AngularJS——中服务$http请求网络数据
- 解答”打包成功后的apk不能和后台服务进行数据交互“的问题
- angularJs中$http获取后台数据实例
- AngularJS学习(九) $resource服务 前后台交互ajax
- 前台后台数据交互之Servlet & XMLHttpRequest(GET篇)
- 前台后台数据交互之Servlet & XMLHttpRequest(POST篇)
- angularjs---$http.post发的数据,后台取不到
- angularjs使用http服务请求网络数据展示
- angularJs中$http获取后台数据的实例讲解
- AngularJs前后台数据交互
- [置顶] web服务交互中HTTP数据内容GZIP,ZLIB格式压缩与解压缩封装(共享)
- AngularJS中的$http服务请求数据
- web服务交互中HTTP数据内容GZIP,ZLIB格式压缩与解压缩封装(共享)
- AngularJs之$http服务前端与后端之间的数据传输
- AngularJS $http模块POST数据,后台接受不到