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

【问题标题】：AngularJS How to use RESTful with factory moduleAngularJS 如何在工厂模块中使用 RESTful
【发布时间】：2014-07-21 21:07:37
【问题描述】：

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

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

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)."
  }

]

它没有在浏览器上给我任何错误消息。工厂功能好像有问题。

谁能帮我解决这个问题？

【问题讨论】：

在 chrome 的网络选项卡中，它试图访问的 url 是什么？
在 chrome 上，我得到 XMLHttpRequest 无法加载错误。所以我切换到Firefox。而且我在网络上没有任何网址。
我已经更新了我的答案，让您克服这个 xmlHttpRequest 错误。这可能是主要问题
尝试运行服务器，你有什么样的错误 - 请分享更多细节。将名称方法更改为 GET

标签： javascript angularjs factory angular-resource

【解决方案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>

更新：

移除“ng”依赖

将资源作为依赖项传递给控制器。

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

【讨论】：

抱歉，我在简化代码时犯了错误。因为我的原始代码需要 project.ProjectName。但我的问题是我什至无法查询该项目。它是空的。
我还添加了角度资源。我没有收到任何错误消息。 “项目”工厂模块没有问题。
问题还没有解决。 projectName 是我的错误而不是问题。
这解决了问题吗？

【解决方案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 的 xmlHttpRequest 错误，您需要从机器的 chrome.exe 文件夹中运行此命令：

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

【讨论】：