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

问题描述

我跟着角文档创建我的服务，看到错误消息

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

这是我的code：

  VAR angularApp = angular.module（对myApp，[]）;
angularApp.run（函数（$ HTTP）{
  $ http.defaults.headers.common ['内容类型'] ='应用/的X WWW的形式urlen $ C $光盘';
  $ http.defaults.headers.common ['X-要求-随着'] ='XMLHtt prequest';
}）;angularApp.service（'$用户'，函数（$范围，$ HTTP，$饼干，$窗口）{
  //需要实例化服务
  VAR newUsersServiceInstance;  //大写是资源
  VAR用户= $资源（'/用户/：用户id'，{用户名：@ ID'}）;
  VAR MyPassword输入= $资源（'/ mypasswords /新）;
  //小写的情况下，你往往希望实例
  //要绑定到控制器的范围
  $ scope.user // = User.get（{用户名：1​​23}）;  $ scope.getUser =功能（ID，S）{
    $ scope.user = User.get（{用户id：ID}，S，E）;
  }  $ scope.changePassword =功能（数据，S，E）{
    MyPassword.post（数据，S，E）;
  }  //需要返回实例
  返回newUsersServiceInstance;}）;angularApp.controller（'passwordController'，['$范围'，'$用户'，函数（$范围，$用户）{  $ scope.changePasswordForm =功能（）{
    $ users.changePassword（
      $ .PARAM（$ scope.data）
      功能（数据，XHR）{
          的console.log（数据）;
      }，
      功能（数据，XHR）{
          的console.log（数据）;
          //错误回调
          $ scope.errors = data.errors;
      }）
  }
  $ scope.debug =功能（）{
   的console.log（$范围内）;
  }
}]）;
 

我不知道，我出了问题。

我的新code考虑到每个人的答案后。同样的错误。

  VAR angularApp = angular.module（对myApp，[]）;
angularApp.run（函数（$ HTTP）{
  $ http.defaults.headers.common ['内容类型'] ='应用/的X WWW的形式urlen $ C $光盘';
  $ http.defaults.headers.common ['X-要求-随着'] ='XMLHtt prequest';
}）;angularApp.service（'$用户'，函数（$ HTTP，$饼干，$窗口）{
  //大写是资源
  VAR用户= $资源（'/用户/：用户id'，{用户名：@ ID'}）;
  VAR MyPassword输入= $资源（'/ mypasswords /新）;
  //小写的情况下，你往往希望实例
  //要绑定到控制器的范围
  this.user // = User.get（{用户名：1​​23}）;  this.getUser =功能（ID，S）{
    this.user = User.get（{用户id：ID}，S，E）;
  }  this.changePassword =功能（数据，S，E）{
    MyPassword.post（数据，S，E）;
  } 返回此;}）;angularApp.controller（'passwordController'，['$范围'，'$用户'，函数（$范围，$用户）{  $ scope.changePasswordForm =功能（）{
    $ users.changePassword（
      $ .PARAM（$ scope.data）
      功能（数据，XHR）{
          的console.log（数据）;
      }，
      功能（数据，XHR）{
          的console.log（数据）;
          //错误回调
          $ scope.errors = data.errors;
      }）
  }
  $ scope.debug =功能（）{
   的console.log（$范围内）;
  }
}]）;
 

甚至改变使用工厂我看到了同样的错误了。

  VAR angularApp = angular.module（对myApp，[]）;
angularApp.run（函数（$ HTTP）{
  $ http.defaults.headers.common ['内容类型'] ='应用/的X WWW的形式urlen $ C $光盘';
  $ http.defaults.headers.common ['X-要求-随着'] ='XMLHtt prequest';
}）;angularApp.factory（'$用户'，函数（$资源，$ HTTP，$饼干，$窗口）{
  //需要实例化服务
  变种newUsersServiceInstance = {};  //大写是资源
  VAR用户= $资源（'/用户/：用户id'，{用户名：@ ID'}）;
  VAR MyPassword输入= $资源（'/ mypasswords /新）;
  //小写的情况下，你往往希望实例
  //要绑定到控制器的范围
  newUsersServiceInstance.user // = User.get（{用户名：1​​23}）;  newUsersServiceInstance.getUser =功能（ID，S）{
    newUsersServiceInstance.user = User.get（{用户id：ID}，S，E）;
  }  newUsersServiceInstance.changePassword =功能（数据，S，E）{
    MyPassword.post（数据，S，E）;
  }  //需要返回实例
  返回newUsersServiceInstance;}）;angularApp.controller（'passwordController'，['$范围'，'$用户'，函数（$范围，$用户）{  $ scope.changePasswordForm =功能（）{
    $ users.changePassword（
      $ .PARAM（$ scope.data）
      功能（数据，XHR）{
          的console.log（数据）;
      }，
      功能（数据，XHR）{
          的console.log（数据）;
          //错误回调
          $ scope.errors = data.errors;
      }）
  }
  $ scope.debug =功能（）{
   的console.log（$范围内）;
  }
}]）;
 

解决方案

当您使用。服务，传递的函数被调用一个构造函数。你不应该返回一个实例，尝试这样的事情：

  angularApp.service（'$用户'，函数（）{  this.field1 =东西;  this.method1 =功能（）{
  }
  //更多的领域}）;
 

您只有当你使用 .factory 方法返回一个实例。我不明白这一点，为什么你需要的，因为服务的设计是一个可重用的组件以注入$范围到服务功能。在你的情况，你应该摆脱$范围。重构code是这样的：

  angularApp.factory（'$用户'，函数（$资源，$ HTTP，$饼干，$窗口）{//声明$资源依赖性
  //需要实例化服务
  VAR newUsersServiceInstance;  //大写是资源
  VAR用户= $资源（'/用户/：用户id'，{用户名：@ ID'}）;
  VAR MyPassword输入= $资源（'/ mypasswords /新）;
  //小写的情况下，你往往希望实例
  //要绑定到控制器的范围
  newUsersServiceInstance.user; // = User.get（{用户名：1​​23}）;  newUsersServiceInstance.getUser =功能（ID，S）{
    newUsersServiceInstance.user = User.get（{用户id：ID}，S，E）;
  }  newUsersServiceInstance.changePassword =功能（数据，S，E）{
    MyPassword.post（数据，S，E）;
  }  //需要返回实例
  返回newUsersServiceInstance;}）;
 

您也要申报与ngResource依赖，ngCookies如果你需要将它们注入到你的工厂函数。

  VAR angularApp = angular.module（对myApp，['ngResource'，'ngCookies']）;
 

不要忘了加一句：

 ＆LT;脚本SRC =角resource.js＆GT;＆LT; / SCRIPT＆GT;
 ＆所述; SCRIPT SRC =角cookies.js＆GT;＆下; /脚本＆GT;
 

如果您使用CDN，可以添加：

 ＆LT;脚本的src =// ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.js\"> ＆LT; / SCRIPT＆GT;
＆LT;脚本的src =// ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-cookies.js\"> ＆LT; / SCRIPT＆GT;
 

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

This is my code:

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

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

解决方案

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

});

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;

});

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']);

And don't forget to add:

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

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>

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