Question

我是棱角分明的新手，所以我正在使用Angular.js跟踪食谱，更具体地说是＆＃34;使用RESTful API＆＃34;一部分。

我在localhost上运行REST服务：8080 / test / categories返回此JSON：

[{"id":1,"name":"name1"},{"id":2,"name":"name2"},{"id":3,"name":"name3"}]

这是我的网页：

<!doctype html>
<html lang="pt-BR" id="ng-app" ng-app="categories">
<head>
    <title>REST TEST</title>
    <script src='/resources/js/jquery-2.1.3.min.js'></script>
    <script src='/resources/js/angular.min.js'></script>
    <script src='/resources/js/angular-resource.min.js'></script>
    <script src='/resources/js/custom-ang.js'></script>
</head>

<body>
<div ng-controller="CatController as cat">
    <div class="row placeholders">
        <h4>First</h4>
        <h4>{{"ID: " + cat.categories[0].id}}</h4>
        <h4>{{"Name: " + cat.categories[0].name}}</h4>

        <h4>All</h4>
        <div ng-repeat="category in cat.categories">
            <h4>{{"Name: " + category.name}}</h4>
            <h4>{{"ID: " + category.id}}</h4>
        </div>
    </div>
</div>
</body>
</html>

这是custom-ang.js：

(function() {
var app = angular.module('categories', [ 'ngResource' ]);

app.factory('Category', function($resource) {
    return $resource('http://localhost:8080/test/categories/:id');
});

app.controller('CatController', function($scope, Category) {
    Category.query(function(data) {
        console.log(data);
        $scope.categories = data;
    });
});
})();

但是当我运行这一切时，我在页面上的所有内容都是：

First
ID:
Name:
All

Consol日志返回适当的对象数组。

我可能做错了但我无法找到，有人可以帮我解决这个问题吗？感谢

Answer 1

我认为您在资源配置中遗漏了一件事。你应该尝试使用它：

var Category = $resource(
       'http://localhost:8080/test/categories/:id',
       {id:'@id'});

在HTML内容中使用列表时也存在问题。您应该执行以下操作，因为您将类别放在上下文中：

<h4>First</h4>
<h4>{{"ID: " + categories[0].id}}</h4>
<h4>{{"Name: " + categories[0].name}}</h4>

<h4>All</h4>
<div ng-repeat="category in categories">
    <h4>{{"Name: " + category.name}}</h4>
    <h4>{{"ID: " + category.id}}</h4>
</div>

参见示例＆＃34;信用卡资源＆＃34;更多提示：https://docs.angularjs.org/api/ngResource/service/$resource。

希望它可以帮到你，亨利

Answer 2

您的custom-ang.js文件应如下所示：

(function() {
    angular.module('categories', [ 'ngResource' ])
    .factory('Category', function($resource) {
        return $resource('http://localhost:8080/test/categories/:id');
    })    
    .controller('CatController', function($scope, Category) {
        $scope.categories = Category.query(); // this is the key
    });
})();

并修改您的html：

<div ng-repeat="category in categories">

Answer 3

您正在使用“控制器为”语法并通过控制器引用您的数据，但控制器将数据放在$scope中。做：

app.controller('CatController', function($scope, Category) {
    var self = this;
    Category.query(function(data) {
        self.categories = data;
    });
});

编辑：根据评论，this没有引用正确的对象（控制器）。

Answer 4

为什么要添加“/：id”？你不需要这样做：

$resource('http://localhost:8080/test/categories');

此外，您必须按{{"Name: " + category.content}}

更改{{"Name: " + category.name}}

如何使用Angular.js来使用REST？

4 个答案: