How should I inject into provider? - angularjs

I'm trying to inject service/provider into my provider but it seems like I cannot do it the same way with factory or service? Please tell me what I did wrong, I know it's simple and probably just a stupid mistake but I cannot findout
Plnkr: http://plnkr.co/edit/B1XGDZNOpiIJVE4q3zMP?p=preview
Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:unpr] Unknown provider: $window

As mentioned by #Michael, you cannot inject dependencies into provider this way. You can provide your dependencies in get method
this.$get =['$window', 'alert', function (window, alert){
}];

You can't do this. Provider will be registered during the configuration phase. And in this phase the services are not yet available for injection. See http://docs.angularjs.org/guide/module - Module Loading & Dependencies
Also checkout http://docs.angularjs.org/guide/providers. There you will see what is available during configuration phase.

Related

Finding AngularJS service provider

I am trying to write a Jasmine test for an AngularJS service.
I am injecting the required modules but I get the following error:
Message:
Error: [$injector:modulerr] Failed to instantiate module routing due to:
Error: [$injector:unpr] Unknown provider: ConfigServiceProvider
https://docs.angularjs.org/error/$injector/unpr says that there is an unresolved dependency but I'm a little lost as the routing module contains the only references to ConfigServiceProvider. Do I need to include a module that provides ConfigService? If I do, how do I find which module provides a specific service in AngularJS?

Issue with loading Angular $window

Hi I'm trying to use $window object in the module below.
var testInterceptor = function($provide,$httpProvider,$window){
// actual Code
}
angular.module('MyApp')
.config(testInterceptor);
But the page is throwing the error like below
Uncaught Error: [$injector:modulerr] Failed to instantiate module MyApp due to:
Error: [$injector:unpr] Unknown provider: $window
Please help me to resolve this issue.
$window is a service and can't be used in config phase.
Only providers and constants can be used here.
Read the documentation. https://docs.angularjs.org/guide/module
Configuration blocks - get executed during the provider registrations and configuration phase. Only providers and constants can be injected into configuration blocks. This is to prevent accidental instantiation of services before they have been fully configured.
What you could do is place your necessary code in the run phase. Because you can use services here.
Try this one. (http://codepen.io/anon/pen/jWRmqZ)
var testInterceptor = function($provide,$httpProvider,$window){
// More Code
}
angular.module('MyApp', [])
.config(['$provide','$httpProvider','$window', testInterceptor]);

Unit testing a service in angularJS

I'm relatively new to unit testing but was now tasked to write tests for a existing code base that I know quite well.
Sadly I'm unable to achieve any progress what so ever nor find really helpful documentation.
The main component of the code base is a service to retrieve data from an api but I'm unable to get an instance of the module the service belongs to:
TypeError: module is not a function in /home/faebser/workspace/GridSense-CMS-App/dev/test/unit/api.test.js (line 13)
karma config: http://sprunge.us/ObSP?js
tests: http://sprunge.us/AJWL?js
karma output: http://sprunge.us/WYHI?bash
What is the problem? why am I not able to get a instance of the module?
UPDATE1:
I'm managed to load my module by reinstalling the same version of angular and angular mocks. But now I run into the following error:
minErr/<#/home/faebser/workspace/GridSense-CMS-App/dev/bower_components/angular/angular.js:63:12
loadModules/<#/home/faebser/workspace/GridSense-CMS-App/dev/bower_components/angular/angular.js:4138:15
forEach#/home/faebser/workspace/GridSense-CMS-App/dev/bower_components/angular/angular.js:323:11
loadModules#/home/faebser/workspace/GridSense-CMS-App/dev/bower_components/angular/angular.js:4099:5
createInjector#/home/faebser/workspace/GridSense-CMS-App/dev/bower_components/angular/angular.js:4025:11
workFn#/home/faebser/workspace/GridSense-CMS-App/dev/bower_components/angular-mocks/angular-mocks.js:2425:44
I managed to track the error down to the following:
"[$injector:modulerr] Failed to instantiate module ui.router due to:[$injector:nomod] Module 'ui.router' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.http://errors.angularjs.org/1.3.15/$injector/nomod?p0=ui.routerminErr/<#http://localhost:9876/base/bower_components/angular/angular.js:63:12module/<#http://localhost:9876/base/bower_components/angular/angular.js:1774:1ensure#http://localhost:9876/base/bower_components/angular/angular.js:1698:38module#http://localhost:9876/base/bower_components/angular/angular.js:1772:1loadModules/<#http://localhost:9876/base/bower_components/angular/angular.js:4115:22forEach#http://localhost:9876/base/bower_components/angular/angular.js:323:11loadModules#http://localhost:9876/base/bower_components/angular/angular.js:4099:5loadModules/<#http://localhost:9876/base/bower_components/angular/angular.js:4116:40forEach#http://localho"
Okay, simply forgot to add ui-router to karma-config.
It's looks like angular-mock is not loaded.
Checks well your path. For the moment, for karma it's look like :
-dev
|-test/
|-js/
|-bower_components/
|-karma.conf
Because in karma.conf, you have :
base: '',
Okay, I managed to get this to work.
The main problem was the strange error messages that angular gave me:
minErr/<#/home/faebser/workspace/GridSense-CMS-App/dev/bower_components/angular/angular.js:63:12
loadModules/<#/home/faebser/workspace/GridSense-CMS-App/dev/bower_components/angular/angular.js:4138:15
forEach#/home/faebser/workspace/GridSense-CMS-App/dev/bower_components/angular/angular.js:323:11
loadModules#/home/faebser/workspace/GridSense-CMS-App/dev/bower_components/angular/angular.js:4099:5
createInjector#/home/faebser/workspace/GridSense-CMS-App/dev/bower_components/angular/angular.js:4025:11
workFn#/home/faebser/workspace/GridSense-CMS-App/dev/bower_components/angular-mocks/angular-mocks.js:2425:44
To work around this I used the karma debug window and set a breakpoint at angular.js:63 in function minErr(module, ErrorConstructor):
return new ErrorConstructor(message);
that way you can see the arguments and the compiled error message. In the end i just forgot to add a few dependencies in the karma config file.

How to append customized service into angular ng module directly

I tried to add a custom service into the ng module directly
'use strict';
angular
.module("ng")
.service('getAQueryParameterByName', ['', function(){
console.log("getAQueryParameterByName service active");
this.getParameter = function(name){
console.log("getParameter!");
}
}]);
As a result, when I try to run the service by doing getAQueryParameterByName.getParameter(var) I encountered error of
ReferenceError: getAQueryParameterByName is not defined
Usually this error is because I did not inject the service, however, I suppose, as I inject the custom service directly into the module, therefore, I really do not need to inject again into controller? But, I tried to add the service again into the controller anyway, and I received error of
Error: [$injector:unpr] Unknown provider: Provider <- <- getAQueryParameterByName
I am really confused at this point... Where did I do wrong?
Change your definition to:
'use strict';
angular
.module("ng")
.service('getAQueryParameterByName', [function(){
console.log("getAQueryParameterByName service active");
this.getParameter = function(name){
console.log("getParameter!");
}
}]);
Although, I wouldn't recommend extending the ng module. That should be viewed as a third party as far as modular architecture.

Inject a module in MEAN.io module

I'd like to integrate ui-rangeSlider in a app based on MEAN.io framework.
But I think the problem is the same for any module.
When I add the parameter in the function
angular.module('mean', ['ui-rangeSlider']).controller('PreferencesController', ['$scope', 'Global',
I added the required static ressources in the app.js :
Preferences.aggregateAsset('js', 'angular.rangeSlider.js');
I get an error
Uncaught Error: [$injector:modulerr] Failed to instantiate module mean due to:
Error: [$injector:unpr] Unknown provider: $stateProvider
Do you have any idea ?
Thank you
did you see this? How to implement jQuery range slider in AngularJS
I think you need to pass $stateProvider to your module. Without seeing more code I am not sure, I think it is not finding $stateProvider and is not an error related to the range slider script.

Resources