对角度 $resource 查询的测试显示未找到 ngResourceProvider 的错误

Question

<script src="/library/angularjs/1.2.0-rc.3/angularjs.js"></script>
<script src="/library/angularjs/1.2.0-rc.3/angular-route.js"></script>
<script src="/library/angularjs/1.2.0-rc.3/angular-resource.js"></script>
<script>
var app= angular.module('myApp', ['ngRoute', 'ngResource']);
app.service('Greeter', ['$resource',function($resource){
  return $resource(
    'http://123.com/processor.php',
    {callback: 'JSON_CALLBACK'},
    {
      query: {method:'JSON_CALLBACK',isArray:true}
    });
}]);

app
.controller('MyCtrl', ['$scope', 'Greeter',
  function($scope,Greeter){
  alert("yes");
  $scope.greet = function(){
    alert("greetttt");
    Greeter.query({name:this.name}, function(response){
      alert(response.greeting);
    });
  };
}]);
</script>
<div ng-app="myApp">
  <div ng-controller="MyCtrl">
  Your name: 
    <input type="text" name="name" value="World"/>
    <button ng-click="greet()">greet</button>
  </div>
</div>

PHP 文件只是简单地抛出了一个 JSON 数组，但我看到 chrome 检查员告诉我：

Error: [$injector:unpr] Unknown provider: $resourceProvider <- $resource <- Greeter

不知道有没有语法错误？由于 PHP 确实抛出了一个有效的 JSON 数组。

谢谢

更新1---- 我更新代码显示我以正确的顺序加载了资源和角度。 在 Bielski 修复之后，仍然有错误显示（同样的错误） 错误：[$injector:unpr] 未知提供者：$resourceProvider 更新 2 在 runTarm 修复之后，现在唯一的麻烦似乎是我引用 Greeter 的方式不正确...... ReferenceError: Greeter 未定义 在 Scope.$scope.greet (http://123.com/index-query.php:21:5) 代表这一行： Greeter.query({name:this.name}, function(response){

更新 3

建议添加 Greeter 广告资源后，还是会出现如下错误：

TypeError: undefined is not a function
    at Scope.$scope.greet (http://123.com/index-query.php:21:13)

这 3 行之间似乎有问题

$scope.greet = function(){
    alert("greetttt");
    Greeter.query({name:this.name}, function(response){

Answer 1

您必须在模块的依赖项列表中包含 ngResource，如下所示：

var app = angular.module('myApp', ['ngRoute', 'ngResource']);

另一件事是关于greet() 函数，当您像这样在ng-click 中绑定一个函数时：

<button ng-click="greet()">

Angular 会在控制器的作用域中寻找 greet() 函数，但您在控制器实例本身中定义 greet()。

一种方法是将greet() 函数移动到$scope 中，如下所示：

app
  .controller('MyCtrl', ['$scope', 'Greeter',
    function($scope, Greeter){
      alert("yes");
      $scope.greet = function(){
        alert("greetttt");
        Greeter.query({name:this.name}, function(response){
          alert(response.greeting);
        });
      };
  }]);

Answer 2

$resource 提供程序未正确加载和/或引用。两件事：

首先，您需要确保文件“angular-resource.js”正在加载到您的页面中，并且在您加载应用程序之前，它出现在要加载的脚本列表中。

其次，尝试像这样设置您的服务：

app.service('Greeter', ['$resource', function($resource){
  return $resource(
    'http://123.com/processor.php', 
    {callback: 'JSON_CALLBACK'},
    {
      query: {method:'JSON_CALLBACK',isArray:true}
    });
}]);

这将保护您免受缩小错误的影响，并且有时使用这种格式更容易发现缺少哪些提供程序。

Answer 3

您忘记将 Greeter 添加到控制器函数的参数中

app
.controller('MyCtrl', ['$scope', 'Greeter',
  function($scope, Greeter){
  alert("yes");
  $scope.greet = function(){
    alert("greetttt");
    Greeter.query({name:this.name}, function(response){
      alert(response.greeting);
    });
  };
}]);