Question

的问题：

为什么我的Angular App会抛出一个未知的提供程序错误：UnitProvider＆lt; - Unit

错误：

Error: [$injector:unpr] Unknown provider: UnitProvider <- Unit

Codepen：

LIVE CODE Example

我最近观看了Angular Youtube上的一个视频：

Crafting the Perfect AngularJS Model and Making it Real Time

Github Repo

背景

我真的感受到了灵感;我觉得，我理解这种方法的理论和结果，但我在连接所有点时遇到很多问题。任何不存在的额外评论都会非常有用!!!

的代码

JS：

angular.module('Modelbuildr', []).config(function() {});
var app = angular.module('Modelbuildr');


// Switch COMMENT on the MainCtrls below and see it work 
//
//
//
app.controller("MainCtrl", function($scope, Unit)           
/*app.controller("MainCtrl", function($scope)*/
{
  $scope.name = "world";
  $scope.units = Unit;
  var vecA = [1,2,3,4,5];

    $scope.vecB = _.map(vecA, function(num){
      return num * 2;
    });
});

/*
  -------Resource
*/
  function Resource($http, path) {
    _.extend(this, {
      _http: $http,
      _path: path
    });
  }

  /* Factory */
  Resource.$factory =  ['$http', function($http) {
    return function(path) {
      return new Resource($http, path);
    };
  }];

  app.factory('bdResource', Resource.$factory);

  Resource.prototype.find = function(uid) {
    var deferred = Q.defer();

    this._http.get(this.path(uid))
      .success(deferred.resolve)
      .error(deferred.reject);

    return deferred.promise;
  };

  Resource.prototype.path = function(uid) {
    return uid ? this._path + '/' + uid : this._path;
  };

  Resource.prototype.set = function(uid, newValue) {
    var deferred = Q.defer();
    var path = this._path + '/' + uid;

    this._http
      .put(path, newValue)
      .success(deferred.resolve)
      .error(deferred.reject);

    return deferred.promise;
  };

/*
  Resource-------
*/
/*
  -------Unit
*/
/* CONSTRUCTOR ACCEPTS PROMISE OR DATA */
  function Unit(futureUnitData) {

    /* DATA IS IMMEDIATELY AVAILABLE */
    if (!futureUnitData.inspect) {
      _.extend(this, futureUnitData);
      return;
    }

    /* THE PROMISE WILL BE UNWRAPPED FIRST */
    this.$unwrap(futureUnitData);
  }

  /* THE FACTORY WE'LL USE TO REGISTER WITH ANGULAR */
  Unit.$factory = ['$timeout', 'bdResource', function($timeout, Resource) {
    _.extend(Unit, {
      $$resource: new Resource('/units'),
      $timeout: $timeout
    });

    return Unit;
  }];

  /* ANGULAR MODULE REGISTRATION */
  angular.module('Modelbuildr').factory('bdUnit', Unit.$factory);

  /* FETCH A UNIT */
  Unit.$find = function(uid) {

    /* FALLS BACK ON AN INSTANCE OF RESOURCE */
    var futureUnitData = this.$$resource.find(uid);

    if (uid) return new Unit(futureUnitData);

    return Unit.$unwrapCollection(futureUnitData);
  };

  Unit.prototype.$unwrap = function(futureUnitData) {
    var self = this;

    this.$futureUnitData = futureUnitData;
    this.$futureUnitData.then(function(data) {
      Unit.$timeout(function() { _.extend(self, data); });
    });
  };

  Unit.$unwrapCollection = function(futureUnitData) {
    var collection = {};

    collection.$futureUnitData = futureUnitData;

    futureUnitData.then(function(units) {
      Unit.$timeout(function() {
        _.reduce(units, function(c, unit) {
          c[unit.id] = new Unit(unit);
          return c;
        }, collection);
      });
    });

    return collection;
  };

  Unit.prototype.$omit = function() {
    return _.omit(this, function(value, key){
      return _.first(key) === '$' || key === 'constructor';
    });
  };
/*
  Unit-------
*/

** html：**

<body ng-app="Modelbuildr" ng-controller="MainCtrl">
  <h1>Empty Angular App</h1>
  Hello {{name}}.
  Lo-dash {{vecB}}.
</body>

Answer 1

在您的代码中，Unit已作为bdUnit注册到角度模块中：

angular.module('Modelbuildr').factory('bdUnit', Unit.$factory);

因此，您应该像这样使用它：

app.controller("MainCtrl", function($scope, bdUnit) { .. });

或明确告诉angular将bdUnit别名为Unit：

app.controller("MainCtrl", ['$scope', 'bdUnit', function($scope, Unit) {
  ..
}]);

当将工厂注入控制器时，Angular会抛出未知提供程序

的问题：

错误：

Codepen：

LIVE CODE Example

背景

的代码

1 个答案: