javascript - AngularJS 如何将 RESTful 与工厂模块一起使用

Question

我在编写 RESTful 代码时遇到了错误 2 小时。

我有一个文件在这里有一个 Controller

angular.module('orderToBeShippedApp',['ng','projectService'])

    .controller('orderCtrl',function($scope, Project){

        Project.query(function(data){
            alert(data);
            $scope.projects = data;
        });

    });

这是我的工厂，称为“项目”。

angular.module('projectService',['ng','ngResource'])
   .factory('Project',function($resource){

      return $resource('api/url/:projectId.json',{},{
        query:{
          method:'get',
          params: {projectId:"test"},
          isArray: false
        }
      });

   });

我的html:

<div ng-controller = "orderCtrl" class ="col-sm-8 col-md-9">
    <!--Body content -->
    <div  ng-repeat = "project in projects">
        <h2>{{project.name}}</h2>
    </div>
</div>

我的 json 是这样的

[
    {
    "age": 0, 
    "id": "a", 
    "imageUrl": "a0.jpg", 
    "name": "b", 
    "snippet": "Tbaa."
   }, 
 {
    "age": 1, 
    "id": "mo", 
    "imageUrl": "assets/images/phones/mo.0.jpg", 
    "name": "M\u2122", 
    "snippet": "The Ned by Android 3.0 (Honeycomb)."
  }

]

它不会在浏览器上给我任何错误消息。工厂功能似乎有问题。

谁能帮我解决这个问题吗？

Answer 1

您应该根据模型定义将绑定(bind)更改为 name，而不是 ProjectName:

<div ng-controller = "orderCtrl" class ="col-sm-8 col-md-9">
<!--Body content -->
<div  ng-repeat = "project in projects">
    <h2>{{project.name}}</h2>
</div>

此外，要使用 ngResource，您需要记住添加对以下内容的脚本引用:angular-resource:

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-resource.min.js"></script>

更新:

1. 删除“ng”依赖项

2. 将资源作为依赖项传递给 Controller ​​。

   // resource
   angular.module('projectService',['ngResource'])
   .factory('Project',function($resource){
       return $resource('api/url/:projectId.json',{},{
           query:{
             method:'get',
             params: {projectId:"test"},
             isArray: false
           }
       });
   });
   // controller
   angular.module('orderToBeShippedApp',['projectService'])
   .controller('orderCtrl',['$scope','Project', function($scope, Project){
       Project.query(function(data){
           alert(data);
           $scope.projects = data;
       });
   }]);