码迷,mamicode.com
首页 > Web开发 > 详细

angular js 模拟获取后台的数据

时间:2017-11-18 20:57:30      阅读:307      评论:0      收藏:0      [点我收藏+]

标签:orm   ast   ace   company   isl   $scope   config   mail   use   

在这里我们把后台的数据用一个.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 模拟获取后台的数据

标签:orm   ast   ace   company   isl   $scope   config   mail   use   

原文地址:http://www.cnblogs.com/1540340840qls/p/7857753.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!