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": "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"