在这里我们把后台的数据用一个.json文件进行代替。
项目的目录结构如下：
puDongLibraryLearning----ui-router-learning ---- data-------people.json
puDongLibraryLearning-test.html
people.json的代码如下：
[
{
"id": "293",
"isActive": false,
"eyeColor": "brown",
"name": "Ingrid Townsend",
"company": "JASPER",
"email": "[email protected]",
"address": "690 Charles Place, Santel, Northern Mariana Islands, 3791"
},
{
"id": "581",
"isActive": true,
"eyeColor": "blue",
"name": "Estrada Nolan",
"company": "FIBRODYNE",
"email": "[email protected]",
"address": "317 Seeley Street, Cade, Maryland, 3976"
},
{
"id": "29",
"isActive": true,
"eyeColor": "brown",
"name": "Laverne Andrews",
"company": "INTRAWEAR",
"email": "[email protected]",
"address": "760 Provost Street, Valle, Alaska, 4628"
},
{
"id": "856",
"isActive": false,
"eyeColor": "green",
"name": "Hull Woodward",
"company": "SENMAO",
"email": "[email protected]",
"address": "452 Union Avenue, Hachita, Palau, 9166"
},
{
"id": "2321",
"isActive": false,
"eyeColor": "green",
"name": "Maria Stanley",
"company": "EYERIS",
"email": "[email protected]",
"address": "350 Remsen Avenue, Abrams, Ohio, 6355"
}
]
test.html的代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="../materialDesignfile/angular.js"></script>
<script>
angular.module("myApp",[])
.config([‘$httpProvider‘,function ($httpProvider) {
$httpProvider.useApplyAsync(true);
}])
.controller("myCtrl",[‘$scope‘,‘$http‘,function ($scope,$http) {
$scope.getData=function(){//刚才在上面写清项目的目录结构就是为了这里的url.
$http.get(‘ui-router-learning/data/people.json‘).then(function success(response) {
debugger
console.log(JSON.stringify(response));//运行结果之后会把response 的内容打印出来：
},function error() {
debugger
console.error("request error");
});
}
}]);
</script>
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="getData()">data</button>
</div>
</body>
</html>
点击data按钮之后，运行结果如下：
{
"data":[
{
"id":"293",
"isActive":false,
"eyeColor":"brown",
"name":"Ingrid Townsend",
"company":"JASPER",
"email":"[email protected]",
"address":"690 Charles Place, Santel, Northern Mariana Islands, 3791"
},
{
"id":"581",
"isActive":true,
"eyeColor":"blue",
"name":"Estrada Nolan",
"company":"FIBRODYNE",
"email":"[email protected]",
"address":"317 Seeley Street, Cade, Maryland, 3976"
},
{
"id":"29",
"isActive":true,
"eyeColor":"brown",
"name":"Laverne Andrews",
"company":"INTRAWEAR",
"email":"[email protected]",
"address":"760 Provost Street, Valle, Alaska, 4628"
},
{
"id":"856",
"isActive":false,
"eyeColor":"green",
"name":"Hull Woodward",
"company":"SENMAO",
"email":"[email protected]",
"address":"452 Union Avenue, Hachita, Palau, 9166"
},
{
"id":"2321",
"isActive":false,
"eyeColor":"green",
"name":"Maria Stanley",
"company":"EYERIS",
"email":"[email protected]",
"address":"350 Remsen Avenue, Abrams, Ohio, 6355"
}
],
"status":200,
"config":{
"method":"GET",
"transformRequest":[
null
],
"transformResponse":[
null
],
"jsonpCallbackParam":"callback",
"url":"ui-router-learning/data/people.json",
"headers":{
"Accept":"application/json, text/plain, */*"
}
},
"statusText":"OK",
"xhrStatus":"complete"
时间： 2024-08-09 07:06:03