Angular app中的“未知提供程序错误”

时间：2014-01-19 02:18:32

标签： angularjs angularjs-service

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

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

我不确定我哪里出错了。

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

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

即使更改为使用工厂后，我也会看到相同的错误。

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

4 个答案:

答案 0 :(得分：8)

使用.service时，传入的函数将作为构造函数调用。你不应该返回一个实例，尝试这样的事情：

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

  this.field1 = "something";

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

});

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

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声明依赖。

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

不要忘记添加：

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

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

    <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>

答案 1 :(得分：4)

有两种写服务的方法。

A）使用.factory

B）使用.service

如果该服务使用$resource，则在模块内部，您需要ngResource，下载并相应地添加angular-resource.js。

使用ngResource，

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

代表A）

angularApp.factory('$users', function($resource, $http) {
  // 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;

});

代表B）

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

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

});

我选择了B. Less lines to write。

答案 2 :(得分：3)

服务没有$scope，如果需要，您可以访问$rootScope，但看起来您只想返回一个包含您想要使用的所有功能的对象。

angularApp.factory('$users', function($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;

});

答案 3 :(得分：3)

你可能会摆脱$scope它不会去那里：P。

$scope是与控制器一起使用的值。

我建议您使用以下服务：

angularApp.factory('$users', function($http) {
    var userService = {activeUser:{name:'anonymous'}};
    return angular.extend(userService,
        {
            getUser: function(id){
                return $http.get('/user/'+id).then(function(response){
                           userService.activeUser = response.data;
                           return userService.activeUser;
                       });
            },
            changePassword: function(data,se,e){
                return $http.post(...)
            }
        }
    );
});
相关问题
最新问题