Angular 应用程序中的“未知提供程序错误" [英] 'unknown provider error' in Angular app

问题描述

我按照 Angular 文档创建了我的服务并看到了一条错误消息

I followed the Angular docs to create my Service and saw an error message

http://docs.angularjs.org/error/$injector:unpr?p0=$scopeProvider%20%3C-%20$scope%20%3C-%20$users

这是我的代码:

var angularApp = angular.module("myApp", []);
angularApp.run(function($http) {
  $http.defaults.headers.common['Content-Type'] = 'application/x-www-form-urlencoded';
  $http.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
});

angularApp.service('$users', function($scope, $http, $cookie, $window) {
  // need to instantiate the service
  var newUsersServiceInstance;

  // upper case is resource
  var User = $resource('/user/:userId', {userId:'@id'});
  var MyPassword = $resource('/mypasswords/new');
  // lower case is instance you tend to want the instance
  // to be binded to the controller's scope
  $scope.user // = User.get({userId:123});

  $scope.getUser = function(id, s) {
    $scope.user = User.get({"userId": id}, s, e);
  }

  $scope.changePassword = function(data, s, e) {
    MyPassword.post(data, s, e);
  }

  // need to return the instance
  return newUsersServiceInstance;

});

angularApp.controller('passwordController', ['$scope', '$users', function($scope, $users) {

  $scope.changePasswordForm = function() {
    $users.changePassword(
      $.param($scope.data),
      function(data, xhr) {
          console.log(data);
      },
      function(data, xhr) {
          console.log(data);
          // error callback
          $scope.errors = data.errors;
      })
  }
  $scope.debug = function () {
   console.log($scope);
  }
}]);

我不确定我哪里出错了.

I am not sure where I have gone wrong.

考虑到大家的回答后，我的新代码.同样的错误.

My new code after taking into account everybody's answer. Same error.

var angularApp = angular.module("myApp", []);
angularApp.run(function($http) {
  $http.defaults.headers.common['Content-Type'] = 'application/x-www-form-urlencoded';
  $http.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
});

angularApp.service('$users', function($http, $cookie, $window) {
  // upper case is resource
  var User = $resource('/user/:userId', {userId:'@id'});
  var MyPassword = $resource('/mypasswords/new');
  // lower case is instance you tend to want the instance
  // to be binded to the controller's scope
  this.user // = User.get({userId:123});

  this.getUser = function(id, s) {
    this.user = User.get({"userId": id}, s, e);
  }

  this.changePassword = function(data, s, e) {
    MyPassword.post(data, s, e);
  }

 return this;

});

angularApp.controller('passwordController', ['$scope', '$users', function($scope, $users) {

  $scope.changePasswordForm = function() {
    $users.changePassword(
      $.param($scope.data),
      function(data, xhr) {
          console.log(data);
      },
      function(data, xhr) {
          console.log(data);
          // error callback
          $scope.errors = data.errors;
      })
  }
  $scope.debug = function () {
   console.log($scope);
  }
}]);

即使更改为使用 factory 后，我也看到相同的错误.

Even after changing to use factory I see the same errors.

var angularApp = angular.module("myApp", []);
angularApp.run(function($http) {
  $http.defaults.headers.common['Content-Type'] = 'application/x-www-form-urlencoded';
  $http.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
});

angularApp.factory('$users', function($resource, $http, $cookie, $window) {
  // need to instantiate the service
  var newUsersServiceInstance = {};

  // upper case is resource
  var User = $resource('/user/:userId', {userId:'@id'});
  var MyPassword = $resource('/mypasswords/new');
  // lower case is instance you tend to want the instance
  // to be binded to the controller's scope
  newUsersServiceInstance.user // = User.get({userId:123});

  newUsersServiceInstance.getUser = function(id, s) {
    newUsersServiceInstance.user = User.get({"userId": id}, s, e);
  }

  newUsersServiceInstance.changePassword = function(data, s, e) {
    MyPassword.post(data, s, e);
  }

  // need to return the instance
  return newUsersServiceInstance;

});

angularApp.controller('passwordController', ['$scope', '$users', function($scope, $users) {

  $scope.changePasswordForm = function() {
    $users.changePassword(
      $.param($scope.data),
      function(data, xhr) {
          console.log(data);
      },
      function(data, xhr) {
          console.log(data);
          // error callback
          $scope.errors = data.errors;
      })
  }
  $scope.debug = function () {
   console.log($scope);
  }
}]);

推荐答案

当您使用 .service 时，您传入的函数将作为构造函数调用.你不应该返回一个实例，试试这样的:

When you use .service, the function you pass in is invoked as a constructor function. You should not return an instance, try something like this:

angularApp.service('$users', function() {

  this.field1 = "something";

  this.method1 = function(){
  }
  //more fields

});

只有在使用 .factory 方法时才返回实例.我不明白为什么需要将 $scope 注入服务功能，因为服务被设计为可重用组件.在您的情况下，您应该摆脱 $scope.像这样重构代码:

You return an instance only when you use .factory method. I don't see the point why you need to inject $scope into service function because service is designed to be a reusable component. In your case, you should get rid of $scope. Refactor the code like this:

angularApp.factory('$users', function($resource, $http, $cookie, $window) {//Declare $resource dependency
  // need to instantiate the service
  var newUsersServiceInstance;

  // upper case is resource
  var User = $resource('/user/:userId', {userId:'@id'});
  var MyPassword = $resource('/mypasswords/new');
  // lower case is instance you tend to want the instance
  // to be binded to the controller's scope
  newUsersServiceInstance.user; // = User.get({userId:123});

  newUsersServiceInstance.getUser = function(id, s) {
    newUsersServiceInstance.user = User.get({"userId": id}, s, e);
  }

  newUsersServiceInstance.changePassword = function(data, s, e) {
    MyPassword.post(data, s, e);
  }

  // need to return the instance
  return newUsersServiceInstance;

});

如果你需要将它们注入你的工厂函数，你还必须声明对 ngResource、ngCookies 的依赖.

You also have to declare dependency with ngResource, ngCookies if you need to inject them into your factory function.

var angularApp = angular.module("myApp", ['ngResource','ngCookies']);

不要忘记添加:

 <script src="angular-resource.js"></script>
 <script src="angular-cookies.js"></script>

如果您使用 CDN，则可以添加:

If you use a CDN, you could add:

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

这篇关于Angular 应用程序中的“未知提供程序错误"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！