在这里我们把后台的数据用一个.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"
angular js 模拟获取后台的数据
原文地址：http://www.cnblogs.com/1540340840qls/p/7857753.html