Issue:
Encountering an Unknown Provider Error in Angular App for: UnitProvider <- Unit
Error Details:
Error: [$injector:unpr] Unknown provider: UnitProvider <- Unit
Codepen Link:
View LIVE CODE Example
I recently came across a fascinating video about Angular on YouTube titled:
Crafting the Perfect AngularJS Model and Making it Real Time
Find more info on Github: Repo
Insight:
Feeling motivated after watching the video, I believe I grasp the concept and outcome of this method, but I'm struggling to connect all the dots. Any additional comments or explanations would greatly assist me!
Code:
JavaScript Code:
angular.module('Modelbuildr', []).config(function() {});
var app = angular.module('Modelbuildr');
app.controller("MainCtrl", function($scope, Unit)
{
$scope.name = "world";
$scope.units = Unit;
var vecA = [1,2,3,4,5];
$scope.vecB = _.map(vecA, function(num){
return num * 2;
});
});
function Resource($http, path) {
_.extend(this, {
_http: $http,
_path: path
});
}
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;
};
function Unit(futureUnitData) {
if (!futureUnitData.inspect) {
_.extend(this, futureUnitData);
return;
}
this.$unwrap(futureUnitData);
}
Unit.$factory = ['$timeout', 'bdResource', function($timeout, Resource) {
_.extend(Unit, {
$$resource: new Resource('/units'),
$timeout: $timeout
});
return Unit;
}];
angular.module('Modelbuildr').factory('bdUnit', Unit.$factory);
Unit.$find = function(uid) {
var futureUnitData = this.$$resource.find(uid);
if (uid) return new Unit(futureUnitData);
return Unit.$unwrapCollection(futureUnitData);
};
Unit.prototype.$unwrap = function(futureUnitData) {
var self = this;
...
**HTML Code:**
<body ng-app="Modelbuildr" ng-controller="MainCtrl">
<h1>Empty Angular App</h1>
Hello {{name}}.
Lo-dash {{vecB}}.
</body>