angular js 模拟获取后台的数据
Posted 技术让世界更精彩
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了angular js 模拟获取后台的数据相关的知识，希望对你有一定的参考价值。
在这里我们把后台的数据用一个.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"
以上是关于angular js 模拟获取后台的数据的主要内容，如果未能解决你的问题，请参考以下文章
AngularJs $http.post 数据后台获取不到数据问题 的解决过程