您的位置:首页 > 理论基础 > 计算机网络

--@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权威指南》"
}]
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: