javascript - 使用 AngularJS 使用 Rest Web 服务-6ren

javascript - 使用 AngularJS 使用 Rest Web 服务

转载作者：行者123 更新时间：2023-11-28 18:32:23

27

4

这是来 self 的网络服务的 json 数据

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

我的 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>

当我运行浏览器时，表格中没有显示任何数据。我错过了什么或做错了什么？有人可以帮忙吗？因为我想显示表中的所有数据

最佳答案

您的代码中存在以下问题，修复后将使您的代码正常工作:

模块定义中缺少 []。更改如下:

var camListApp = angular.module('camListApp', []);

Controller 定义不正确，因为您有 2 个回调函数(其中一个)。您只需要一个:

camListApp.controller('Hello', ['$scope', '$http', function($scope, $http){
  $http.get('http://localhost/camera/list').
    success(function(data) {
        $scope.record= data;
    });
}]);

处理 Promise 的首选方式是使用 .then 而不是 .success

当您使用 $http 服务时，它将您的数据包装在一个对象中，而实际数据是在回调中返回的响应上公开的属性。访问响应中的 data 属性，如下所示:

$http.get('https://api.github.com/users/addi90/repos').then(function(response) {
  $scope.records= response.data;
});

我已经使用来 self 的 github 存储库的示例数据创建了一个工作箱:https://jsbin.com/qejapayuhi/1/edit?html,js,console,output

关于javascript - 使用 AngularJS 使用 Rest Web 服务，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37740187/

27

4

0

文章推荐： css - 操纵第 3 方 *.less css 而不破解它

文章推荐： javascript - 如果任一输入字段已填写，如何验证表单？

rest - 非 RESTful 与 RESTful
我对编程真的很陌生，并且在理解 RESTful API 的概念时遇到了一些麻烦。我读过 REST 和 RESTful API。我已经查看了 SO 中已经提出的问题，但似乎无法更好地理解该主题。在我的
rest - 简单来说，REST，RESTFul，SOA和微服务是什么？
我以为我知道REST /“RESTFul”，restfulservices，webservices，SOA和微服务是什么，但是我遇到了许多不同的定义，我得出的结论是这些术语被过度使用，滥用或完全错误定
rest - SharePoint REST 在单个 REST 查询中获取用户标题
我有一个列表，其中有一个“人员和组”列。当我使用 REST 查询行时，我会在此列中列出用户 ID。我发现这篇文章将帮助我将每个 id 转换为标题 http://www.codeproject.com
rest - 什么是 REST 调用以及如何发送 REST 调用？
我想问一些关于 REST 调用的问题。我是 REST 调用的绿色，我想了解什么是 REST 调用以及如何使用 URL 向服务器发送 REST 调用。谁能给我一些基本的教程或链接供我引用？另外，如果我
rest - 为什么 REST Web 服务称为 REST
很难说出这里问的是什么。这个问题模棱两可、含糊不清、不完整、过于宽泛或言辞激烈，无法以目前的形式合理回答。如需帮助澄清此问题以便可以重新打开，visit the help center . 8年前关闭
rest - 什么是监视 REST 资源以进行更改的 RESTful 方式？
如果有一个 REST 资源我想监视来自其他客户端的更改或修改，那么最好(也是最 RESTful)的方法是什么？我这样做的一个想法是通过提供特定资源来保持连接打开，而不是在资源不(尚)存在时立即返回。
rest - RESTful 服务中的分页
我有一个可以返回大量项目的 RESTful API，我希望能够使用分页样式技术来限制项目数量，这是 RESTful API 中的一个好主意吗？如果有可能最好通过链接(在这种情况下为 url)或请求正
rest - RESTful 发布多个实体的策略
我仍然处于适应以 REST 方式做事的过程中。在我的情况下，客户端软件将与 RESTful 服务交互。很少，客户端会上传其整个实体数据库(每个实体序列化为大约 5kb 的 xml 块)。也许我错了
rest - REST 中的子资源和路径变量冲突？
设计一个路径解析可能有歧义的 REST API 是否被认为是不好的做法？例如: GET /animals/{id} // Returns the animal with the given ID
rest - REST 是如何无状态的？
我知道 REST 并且知道在不使用 session 的情况下创建 RESTful Web 服务，我更了解它，但我不太了解无状态的概念以及使用 REST 如何使您的应用程序可扩展有人可以解释 REST
rest - REST API的单点登录支持
我正在尝试找到解决以下问题的最佳方法:我们的应用程序是SaaS，它支持Web登录的SAML。该应用程序还公开了应该在自动化和无人值守的流程中使用的REST API，这意味着没有交互式用户可以键入凭据。
rest - REST 是否可以建立连接池？
由于 REST 是无状态的，因此传入的每个请求都不知道传入的前一个请求。在这种情况下是否可以使用连接池？如果要实现连接池，它将像标准数据库连接一样在每个请求时打开连接池并关闭它。如何实现 REST
rest - 得墨忒耳定律与 REST
得墨忒耳定律(真的应该是得墨忒耳的建议)说你不应该“穿过”一个物体去接触它们的子物体。如果您作为客户需要执行一些重要的操作，大多数情况下您使用的域模型应该支持该操作。 REST 原则上是一个愚蠢的对象
rest - 通过示例了解 REST
我唯一真正接触到 REST 的想法已经通过 Ruby on Rails 的 RESTful routing .这非常适合我使用 Rails 构建的基于 CRUD 的应用程序，但因此我对 RESTful
rest - RESTful URL的好处
有什么好处 http://www.example.com/app/servlet/cat1/cat2/item 网址超过 http://www.example.com/app/servlet?c
rest - REST 服务中的建模操作
我知道以前有人问过这类问题。我有我的问题的解决方案，我想知道我是否在任何地方破坏了 REST 或 HTTP 主体。在我的系统中，我有一个名为 member 的资源。支持通常的GET/POST/PUT
rest - REST API响应部分成功
我有一个API，可以执行一些批量处理任务。假设它确实为某些资源命名。我批量传递了7个请求，其中5个更新成功，2个失败。我的问题是如何应对。使用HTTP时，我无法同时返回成功和错误。有一个部分成功
rest - RESTful 单例资源
我来自 RPC 世界，但目前正在调查使用 REST 是否适合我的项目。至于据我了解 Wikipedia RESTful 服务的基本思想是提供对集合及其各个元素的访问。在我的情况下，服务器将是一个测量
rest - Tapestry + REST
我想将REST添加到我的挂毯项目中，因此需要知道如何实现它。有什么更好的方法？谢谢。 [编辑，从答案中复制:]我必须将GET，PUT，POST和DELETE服务添加到我的挂毯应用程序中。我看到Ta
rest - RESTful 服务中的资源级别授权
让 /users/{id}成为 RESTful 服务中的资源 url。启用基本身份验证，只有经过身份验证的用户才能访问该 url。示例场景: User_1 & User_2是经过身份验证的用户，用

首页

博学

6Ren·AI

商城

javascript - 使用 AngularJS 使用 Rest Web 服务