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权威指南》"
}]