使用AngularJS消费Rest Web服务

Question

This is my json data from my web service 这是我的Web服务中的json数据

[{"cameraid":"ggh","timestamp":"2016/05/10 01:31","filename":"ffffpg"},
{"cameraid":"mason","timestamp":"2016/05/10 05:31","filename":"aaa.png"}

My html file 我的html文件

<!doctype html>
<html ng-app="camListApp">
<head>
    <title>hi AngularJS</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
    <script>
    var camListApp = angular.module('camListApp');
    camListApp.controller('Hello', ['$scope', '$http', function($scope, $http){
    function Hello($scope, $http) {
        $http.get('http://localhost/camera/list').
            success(function(data) {
                $scope.record= data;
            });
    }
    </script>
</head>
<body>
    <div ng-controller="Hello">
        <table border = 1>
        <thead>
        <tr>
        <th>camid</th>
        <th>Timestamp</th>
        <th>Filename</th>

        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="record in record">
        <td>{{record.cameraid}}</td>
        <td>{{record.timestamp}}</td>
        <td>{{record.filename}}</td>
        </tr>
        </tbody>
        </table>
    </div>
</body>
</html>

When I run my browser, no data is show in the table. 运行浏览器时，表中未显示任何数据。 What have I miss out or done wrong? 我错过了什么或做错了什么？ Anybody can help? 有人可以帮忙吗？ As i want to display all the data in the table 因为我想在表格中显示所有数据

Answer 1

There are below issues in your code, which once fixed will make yor code working: 您的代码中存在以下问题，这些问题一旦修复将使您的代码正常工作：

Missing [] from module definition. 模块定义中缺少[] 。 Change it as below: 如下更改：
```
 var camListApp = angular.module('camListApp', []); 
```
The controller definition is incorrect as you have 2 callback functions (One within other). 控制器定义不正确，因为您有2个回调函数（一个在另一个函数中）。 You only need one: 您只需要一个：
```
 camListApp.controller('Hello', ['$scope', '$http', function($scope, $http){ $http.get('http://localhost/camera/list'). success(function(data) { $scope.record= data; }); }]); 
```

Also the preferred way of handlin promises is using .then instead of .success 此外韩德林的首选方式用是用.then ，而不是.success

When you use the $http service it wraps up your data in an object and actual data is an attribute exposed on the returned response in callback. 当您使用$http服务时，它将数据包装在一个对象中，而实际数据是在回调的返回响应中公开的属性。 Access the data attribute in response as below: 作为响应，访问data属性，如下所示：
```
 $http.get('https://api.github.com/users/addi90/repos').then(function(response) { $scope.records= response.data; }); 
```

I have created a working bin with sample data from my github repos: https://jsbin.com/qejapayuhi/1/edit?html,js,console,output 我已经从我的github仓库创建了带有示例数据的工作箱： https ://jsbin.com/qejapayuhi/1/edit ? html,js,console,output

Answer 2

In your HTML you need to name the app: 在您的HTML中，您需要为应用命名：

<html ng-app="camListApp">

And then in your script you need to define the controller and the app, and bring in the services. 然后，需要在脚本中定义控制器和应用程序，并引入服务。 Add, around the function: 在函数周围添加：

var camListApp = angular.module('camListApp');
camListApp.controller('Hello', ['$scope', '$http', function($scope, $http){
   // existing code
}

Angular is pretty fussy about these things. Angular对这些事情非常挑剔。 Since I can't easily reproduce your app, I'll be interested to find out if this worked for you. 由于我无法轻松复制您的应用程序，因此我很想知道这是否对您有用。

使用AngularJS消费Rest Web服务

问题描述

2 个解决方案

解决方案1
2 已采纳 2016-06-10 06:25:35

解决方案2
1 2016-06-10 05:25:05

使用AngularJS消费Rest Web服务

问题描述

2 个解决方案

解决方案1 2 已采纳 2016-06-10 06:25:35

解决方案2 1 2016-06-10 05:25:05

解决方案1
2 已采纳 2016-06-10 06:25:35

解决方案2
1 2016-06-10 05:25:05