在这里我们把后台的数据用一个.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": "ingridtownsend@jasper.com", "address": "690 Charles Place, Santel, Northern Mariana Islands, 3791" }, { "id": "581", "isActive": true, "eyeColor": "blue", "name": "Estrada Nolan", "company": "FIBRODYNE", "email": "estradanolan@fibrodyne.com", "address": "317 Seeley Street, Cade, Maryland, 3976" }, { "id": "29", "isActive": true, "eyeColor": "brown", "name": "Laverne Andrews", "company": "INTRAWEAR", "email": "laverneandrews@intrawear.com", "address": "760 Provost Street, Valle, Alaska, 4628" }, { "id": "856", "isActive": false, "eyeColor": "green", "name": "Hull Woodward", "company": "SENMAO", "email": "hullwoodward@senmao.com", "address": "452 Union Avenue, Hachita, Palau, 9166" }, { "id": "2321", "isActive": false, "eyeColor": "green", "name": "Maria Stanley", "company": "EYERIS", "email": "mariastanley@eyeris.com", "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":"ingridtownsend@jasper.com", "address":"690 Charles Place, Santel, Northern Mariana Islands, 3791" }, { "id":"581", "isActive":true, "eyeColor":"blue", "name":"Estrada Nolan", "company":"FIBRODYNE", "email":"estradanolan@fibrodyne.com", "address":"317 Seeley Street, Cade, Maryland, 3976" }, { "id":"29", "isActive":true, "eyeColor":"brown", "name":"Laverne Andrews", "company":"INTRAWEAR", "email":"laverneandrews@intrawear.com", "address":"760 Provost Street, Valle, Alaska, 4628" }, { "id":"856", "isActive":false, "eyeColor":"green", "name":"Hull Woodward", "company":"SENMAO", "email":"hullwoodward@senmao.com", "address":"452 Union Avenue, Hachita, Palau, 9166" }, { "id":"2321", "isActive":false, "eyeColor":"green", "name":"Maria Stanley", "company":"EYERIS", "email":"mariastanley@eyeris.com", "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"