AngularJS如何在工厂模块中使用RESTful

Question

我在制作RESTful代码2个小时时一直遇到错误。

我有一个文件在这里有一个控制器

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

您应该根据模型定义将绑定更改为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. 将资源作为依赖项传递给控制器​​。

    // 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; }); }]); 

Answer 2

您的工厂可能没有出现控制台错误，但是可能无法恢复数据。 您的工厂应该看起来像这样：

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

  return {
    projects: $resource('api/url/:projectId.json', {projectId: '@test'})
    }
  });
}]);

在您的控制器中，它应调用如下方法：

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

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

     $scope.projects = Project.projects.get({id: 'test'});

}]);

更新：

为了缓解chrome的HttpHttpRequest错误，您需要从计算机的chrome.exe文件夹中运行以下命令：

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files --disable-web-security