Javascript 如何使用Angular.js使用REST？_Javascript_Angularjs_Rest

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

javascript angularjs rest

Javascript 如何使用Angular.js使用REST？,javascript,angularjs,rest,Javascript,Angularjs,Rest,我是angular的新手，所以我在angular.js中遵循了一些方法，更具体地说是使用RESTfulAPI 我在localhost:8080/test/categories上有一个working REST服务，它返回以下JSON: [{"id":1,"name":"name1"},{"id":2,"name":"name2"},{"id":3,"name":"name3"}] 这是我的网页： <!doctype html> <html lang="pt-BR" id="ng

我是angular的新手，所以我在angular.js中遵循了一些方法，更具体地说是使用RESTfulAPI

我在localhost:8080/test/categories上有一个working REST服务，它返回以下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>

但当我运行此程序时，我在页面上看到的是：

First
ID:
Name:
All

控制台日志返回适当的对象数组

我可能做错了什么，但我找不到，有人能帮我解决这个问题吗？谢谢

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

编辑：根据评论，这不是指控制器的正确对象。

我认为您在资源配置方面遗漏了一点。您应该尝试使用以下方法：

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>

有关此链接的更多提示，请参阅示例信用卡资源：

希望它能帮助你，

蒂埃里

为什么要添加/：id？您不需要这样做：

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

另外，您必须通过{{Name:+category.Name}}更改：{{Name:+category.content}

您的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：

控制台日志数据；在控制台中它给了你什么？我很累，但是页面保持不变，我应该删除它吗？我想我在某处看到了，但我可能错了。@Ahmad我不知道如何使用该命令，但我会找出并编辑我的命令question@trainoasis绝对不要那样做。自动执行功能带来了很多好处！当然，您必须首先在控制器范围内参考这一点？所以函数$scope，Category{var vm=this；…}哦，对了，第二个是复制/粘贴错误，我将编辑它，我还将提到控制器syntax@CallumLinington你是什么意思？他在视图中使用控制器作为语法，但是他的控制器函数将可绑定属性放在范围对象上，而不是控制器函数上下文上。

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

(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
    });
})();

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