Im trying to understand hows providers works and i make a test based in angularjs documentation and i wrote a simple provider :
(function( window, angular, undefined ){"use strict";
function MyProviderExample(foo)
{
this.testdrive = function()
{
console.log(foo);
}
console.log("init");
}
angular.module('app',[])
.provider('$myProvider',function (){
var foo = "bar";
this.$get = function()
{
return new MyProviderExample(foo);
}
console.log("ey....");
}).config(function($myProvider){
console.log("wut");
$myProvider.foo = "foo";
});
})(window, window.angular);
When i run the code always returns
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:unpr] Unknown provider: $myProvider
I was trying to understand what fails but i cant see my mistake, if someone can helps i appreciate
I think you need to remove function($myProvider) from the .config section. Like this:
angular.module('app', [])
.provider('$myProvider', function () {
this.$get = function () {
// --
}
console.log("loaded $myProvider");
})
.config(function(){
console.log("loaded config");
})
.controller('Main',
function main() {
console.log('loaded mycontroller')
});
What are you trying to do with $myProvider.foo = "foo";?
Related
I actually hate to be that guy, but I've been sitting with this
problem for some days now. I have these three files as a part of a
larger angularjs application. I can not get even this rudimentary test
to pass (or even work). I've been comparing files within the project,
I've read on-line (tried all those ways people have suggested). I have
even written the files from scratch a few times. I'm probably not able
to see my error anymore. I guess this is easier to spot (right away)
for a back-seat driver.
I'd be most appreciative for any help.
The output from gulp/karma
PhantomJS 2.1.1 (Linux 0.0.0) SiteDescriptionService the service should be defined FAILED
Error: [$injector:unpr] Unknown provider: SiteDescriptionServiceProvider <- SiteDescriptionService
http://errors.angularjs.org/1.5.8/$injector/unpr?p0=SiteDescriptionServiceProvider%20%3C-%20SiteDescriptionService (line 4511)
bower_components/angular/angular.js:4511:86
getService#bower_components/angular/angular.js:4664:46
bower_components/angular/angular.js:4516:48
getService#bower_components/angular/angular.js:4664:46
injectionArgs#bower_components/angular/angular.js:4688:68
invoke#bower_components/angular/angular.js:4710:31
workFn#bower_components/angular-mocks/angular-mocks.js:3085:26
loaded#http://localhost:8080/context.js:151:17
inject#bower_components/angular-mocks/angular-mocks.js:3051:28
app/service/sitedescriptor-service-test.js:10:19
app/service/sitedescriptor-service-test.js:4:13
global code#app/service/sitedescriptor-service-test.js:1:9
Expected undefined to be truthy.
app/service/sitedescriptor-service-test.js:17:32
loaded#http://localhost:8080/context.js:151:17
The module declaration
(function(){
'use strict';
angular.module('application.service', []);
})();
The service itself
(function () {
angular.module('application.service')
.service('SiteDescriptorService',
['$http', '$q', function ($http, $q) {
var lastRequestFailed = true,
promise,
items = [];
return {
name: 'SiteDescriptorService',
getItems: function () {
if (!promise || lastRequestFailed) {
promise = $http.get('site.json').then(
function (response) {
lastRequestFailed = false;
items = response.data;
return items;
}, function (response) { // error
lastRequestFailed = true;
return $q.reject(response);
});
}
return promise;
}
};
}]
);
})();
and the test
describe('SiteDescriptionService', function() {
'use strict';
describe('the service', function() {
var service, httpBackend;
beforeEach(module('application.service'));
beforeEach(inject(function(_SiteDescriptionService_, $httpBackend) {
service = _SiteDescriptionService_;
httpBackend = $httpBackend;
console.log(service);
}));
it('should be defined', function() {
expect(service).toBeTruthy();
});
});
});
Cheers
Mats
Looks like you just use incorrect name when injecting dependency, should be 'SiteDescriptorService' and not 'SiteDescriptionService'
Im new to angular js.
Can anyone please tel me why i get an error saying functions in the factory cannot be accessed from the controller.
Error: UserService.getAllCustomers is not a function
This happens when I add
App.service('UserService', function () { })
to the controller.
If this is not added it gives
Error: [$injector:unpr] Unknown
provider:serServiceProvider<-UserService<- UserController
You should have someting like :
angular.module('MyApp')
.factory('serviceName',[
function () {
return function () {
/*your code */
};
}]);
angular.module('MyApp')
.controller('controllerName',['serviceName'
function (serviceName) {
}]);
The userService does not have the "getAllCustomers"
var App= angular.module('myApp', []);
App.controller("MyCtrl", ['UserService', function(UserService) {
UserService.getAllCustomers();
}]);
App.service('UserService', function() {
this.getAllCustomers = function() {
alert('getAllCustomers');
}
});
DEMO
Note: If you removed "UserService" from the app ,so the UserService is not available in the app, but you are injected in controller then angular will check UserService is created or not, if it is not created it will throw the error like Error:
[$injector:unpr] Unknown provider:serServiceProvider<-UserService<-
UserController
This coffee script code is trying to create an angular provider but I get this message: Provider 'ItemsProvider' must define $get factory method.
I have the $get method set. Any idea of what is happening?
'use strict'
app = angular.module('logica-erp')
app.provider 'ItemsProvider', [ ->
this.$get = ->
return {
}
]
It fail to load with this message:
Error: [$injector:modulerr] Failed to instantiate module logica-erp due to:
[$injector:pget] Provider 'ItemsProvider' must define $get factory method.
EDIT:
This is the javascript generated:
(function() {
'use strict';
var app;
app = angular.module('logica-erp');
app.provider('ItemsProvider', [
function() {
return this.$get = function() {
return {};
};
}
]);
}).call(this);
CoffeeScript introduces syntax sugar coating that may be poorly understood by both readers and adepts. It is always a good idea to compile it to JS to see what's going on. Implicit returns appear to be the biggest troublemakers in my practice.
In this case CS code is compiled to this
app.provider('ItemsProvider', [
function() {
return this.$get = function() {
return {};
};
}
]);
Here provider constructor function returns a value of this.$get (a function) and not this object. Constructor function shouldn't return anything (except the rare case when it should):
app.provider('ItemsProvider', [
function() {
this.$get = function() {
return {};
};
}
]);
Beware the arrows.
I have problem related AngularJS dependency injection and timing between them. Here is my code and error
var module = angular.module('Demo', []);
module.factory('demo', function () {
return {
data: {},
};
});
module.provider('foo', ['demo', function(demo) {
console.log(demo);
this.$get = function() {
};
}]);
Error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module Demo due to:
Error: [$injector:unpr] Unknown provider: demo
But if I add setTimeout on last definition everything works fine, but its hacking code it shouldn't be like this.
var module = angular.module('Demo', []);
module.factory('demo', function () {
return {
data: {},
};
});
setTimeout(function(){
module.provider('foo', ['demo', function(demo) {
console.log(demo);
this.$get = function() {
};
}]);
});
Here is problem on fiddle:
http://jsfiddle.net/zcf7rb4s/1/
You cannot add demo as a dependency there because it does not yet exist. That's the way the $injector works. What you can do is list demo as a dependency in the $get function of the provider. That's going to be executed by the $injector after all providers have been defined.
Check this:
<div ng-app="Demo">
<div ng-controller="test">{{x}}</div>
</div>
And the definitions:
var module = angular.module('Demo', []);
module.factory('demo', function () {
return {
data: {x: 'x'},
};
});
module.provider('foo', function() {
this.$get = function(demo) {
return {
demo: demo
};
};
});
module.controller('test', ['$scope', 'foo', function($scope, foo) {
$scope.x = foo.demo.data.x;
}]);
The code inside the factory and provider is run at "step 1".
Then, in "step 2" AngularJS binds the controller. It first uses $injector to inject the dependencies (that have been previously defined in "step 1"). So in practice your $timeout "emulates" this behavior, that's why it works. But it's wrong, that's not the way you are supposed to use them.
Inject into the provider like this instead:
module.provider('foo', function() {
this.$get = ['demo', function(demo) {
console.log(demo);
}];
});
I have the following provider:
(function (angular) {
angular.module('app')
.provider('$_Config', ConfigProvider);
function ConfigProvider() {
.... //routes definition
}
ConfigProvider.prototype.$get = function () {
return this;
};
ConfigProvider.prototype.getRoutes = function() {...}
//other prototype functions
})(angular);
In app.js I am using it like this:
app.config(function ($routeProvider, $_ConfigProvider) {
var routes = $_ConfigProvider.getRoutes();
routes.forEach(function(route) {
$routeProvider
.when(route.route, {
.....
})
}
Every thing work fine till it gets to testing. Here is my test:
describe('Provider: $_ConfigProvider', function () {
// load the providers module
beforeEach(module('app'));
// instantiate provider
var $_ConfigProvider;
beforeEach(inject(function (_$_Config_) {
$_ConfigProvider = _$_Config_;
}));
it('Should verify getRoutes function', function () {
var routes = $_ConfigProvider.getRoutes();
expect(Object.prototype.toString.call(routes) === '[object Array]').toBe(true);
});
});
When running the test I am getting the following error:
Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:unpr] Unknown provider: $_ConfigProvider
Note: The $_ConfigProvider is injected correctly during run-time.
You are likely not including the file where the provider is defined in in your karma.conf.js dependencies list. See this question:
Include dependencies in Karma test file for Angular app?
I would rename the $_Config to something else, '$' is usually reserved for angular-specific components.