Is there a way to inject $q into provider, in my case, angular throws exception telling that there is no such provider.
For a provider, the values are injected in the $get function.
myApp.provider('testProvider', function() {
this.$get = function($q) {
};
});
More details here:
AngularJS: Service vs provider vs factory
https://gist.github.com/Mithrandir0x/3639232
Related
Snippet 1 does not work. I get Error: [$injector:unpr] Unknown provider: $q
/* Snippet 1*/
var mApp = angular.module('MyApp',[]);
mApp.provider('authProvider', ['$q', function($q) {
this.$get = function(){
authProvider = {};
authProvider.Title = function(){
var deferred = $q.defer();
deferred.resolve("promise resolved");
return deferred.promise;
}
return authProvider;
}
}]);
However, Snippet 2 works. I am confused why that is ? All the factory sample codes i have read, inject the dependency in the first line such as
.factory('MyFactory',[$q,function($q) {}]);
Why doesnt that style work in the provider code above ? Also, why are we injecting $q below in the GET declaration but not further down in the TITLE declaration.
/* Snippet 2*/
mApp.provider('authProvider', function() {
this.$get = function($q){
authProvider = {};
authProvider.Title = function(){
var deferred = $q.defer();
deferred.resolve("promise resolved");
return deferred.promise;
}
return authProvider;
}
});
Please help!!!
(The code doesn't do anything right now. I am just trying to learn syntax)
you can't do direct DI in provider , when you are using provider you have to inject your component in $get .
Reason you cannot inject dependency into the provider directly is that the provider runs during the module loading phase whereas the $get is run when instantiating the service you are providing.
You can not use any service during the loading/configuration phase of your modules.
All the factory sample codes i have read, inject the dependency in the first line such as .factory('MyFactory',[$q,function($q) {}]); Why doesn't that style work in the provider code above ?
This graphic has always helped me understand the difference between a provider and a factory:
source: simplygoodcode.com
The factory function is the $get function of the provider. Before injection, the provider constuction function can configure the $get function. The $get function is where injection happens.
The provider construction function isn't injectable. That's why you get that error. The $get function is injectable and that is the function that you specify with factory. factory is just syntactic sugar for creating a provider with an empty constructor function.
See Also
Confused about Service vs Factory — this answer
I am trying to inject a custom factory from one module into a custom provider from another module. What I really want to do is to use the custom factory inside the config block but I can't, so I'm trying to configure a provider that uses the custom factory which will then get injected into config.
I have been trying to inject my custom factory into the provider but I can't seem to get it right. I don't know if it's syntax or maybe my approach is wrong. My questions are:
1.) is this even possible?
2.) is my syntax correct?
Here is the factory:
.factory('myFactory', myFactory);
myFactory.$inject = ['$q', '$http', 'Story'];
function myFactory($q, $http) {
return {
getSomething: getSomething,
}
function getSomething() {
}
}
Here is the provider:
.provider('myProvider', function() {
return {
$get: function(myFactory) {
function getStuff() {
return myFactory.getSomething().then(function(data){
return data;
})
}
return {
stuff: getStuff
}
}
}
})
The error that I am getting is this:
Cannot read property 'getSomething' of undefined
Is this the correct use of a provider? I feel like I may be missing something. Thanks!
During the configuration phase, you can't access services:
During application bootstrap, before Angular goes off creating all
services, it configures and instantiates all providers. We call this
the configuration phase of the application life-cycle. During this
phase, services aren't accessible because they haven't been created
yet.
https://docs.angularjs.org/guide/providers
I am unclear of exactly how decorator works in conjunction with the angular $injector, so any explanation is helpful.
Considering my myTempService:
$provide.decorator('myTempService', function($delegate) {
$delegate.controller = // some service to get the current controller
return $delegate;
});
When myTempService is injected into my controller, I need myTempService.controller to be the controller's name:
.controller('MainCtrl', function (myTempService) {
console.log(myTempService.controller); // MainCtrl
});
When you are using .value(), .service(), .factory() and .provider() to register a service, what you pass in as the second parameter will actually be ended up as a part of a Service Provider Constructor.
When an angular's bootstrap process begin, each of those registered service provider constructors will be used to create a Service Provider Instance.
During a Configuration Phase, the service provider instances are available to be injected, and you can use them to change default configuration of to be created service instances.
angular.module('myApp').config(function ($httpProvider) {
// $httpProvider is a provider instance of the $http service
$httpProvider.interceptors.push(function () {});
});
Before entering a Run Phase, each of service provider instance will be used to create a Service Instance.
Then the Decorators will come into play at this point. Before those service instances will be used for injecting to various places, each service instance will be passed into its registered decorators as $delegate parameter if any. The result of the decorator function will be used instead of the
original service instance.
angular.module('myApp').config(function ($provide) {
$provide.decorator('$http', function ($delegate) {
// monkey patching
var originalGet = $delegate.get;
$delegate.get = function () {
console.log('$http.get is called');
return originalGet.apply(this, arguments);
};
return $delegate;
});
});
Therefore, in a decorator function, you have choices to:
Just do something and return the original service instance e.g. print out something for debugging purpose.
Set initial values of the service, that for some reasons cannot be done in a config phase.
Monkey patch the original service instance and return it.
Create and return a wrapper/proxy service over the original service instance.
In unit testing, you could return a mock/spy object instead.
Finally, the service instances will be available for injecting into all of the places e.g. run blocks, controllers, directives, filters etc. for the entire life of the application.
When making use of a service in a controller test do you need to initialize the service in the same way you would the controller? By this I mean do you need to pass it its own dependencies?
For example I can initialize my controller like so:
// Instantiate the controller
searchController = $controller( 'VisibilitySearchController',{
$scope: scope,
dataService: dataService
});
}));
so do I need to initialize the service according to the components it needs like $http, $resource etc as well as make spyOn calls on its functions? Or is this/should this be sufficient? (Note - my tests fail when I do the following )
// Instantiate the dataService
dataService = $injector.get( 'dataService' );
it throws this error:
* Error: [$injector:unpr] Unknown provider: $resourceProvider <- $resource <- dataService
The relevant part of the service:
myAppServices.factory('dataService', ['$http', '$resource', 'authService', 'messageService', function ($http, $resource, authService, messageService) {
}
Side note
Note - we are using Maven as our build tool and only make use of Jasmine at this point - trying to bring Karma in as our test-runner as a Maven plugin.
You must provide all the dependencies but you can mock them. This can be done by jasmine like this for example:
var mockedDataService = jasmine.createSpyObj('dataService', ['getData', 'getOtherData']);
And then you inject this mocked service to $provider:
beforeEach(function () {
module(function ($provide) {
$provide.value('dataService', mockedDataService );
});
}
Instance of this mocked service can be retrieved like this then:
inject(function (dataService) {
var dataServiceInstance = dataService;
});
This will provider mocked dataService anytime it is needed. However if you need fully functional dataService you must instantiate it but always you can mock any of its dependecies.
While you can inject dependencies into the controller manually you don't need to do it as long as you have loaded the module the service belongs to.
In your case it looks like you have not loaded the ngResource module.
If you add beforeEach(module('ngResource')) to your test (and make sure the actual script file it lives in is included in Jasmine's fileset) you should not need to inject it manually.
Note that you do not need to load angular core services like $http, but since $resource is not part of core it needs to be loaded like this.
Injecting dependencies manually is mostly useful if you want to provide a mock implementation.
Is it possible to do DI in a provider method?
In this example
angular.module('greet',[])
.provider('greeter',function() {
this.$get=function() {
};
})
.service('greeterService',function($http){
console.log($http);
})
;
Injecting $http into service appears to be the correct implementation, but it doesn't work in a provider method and it throws an error:
Unknown provider: $http
Does the provider method work with DI to inject services?
You can certainly inject $http to provider. Just make sure it appears in $get, not the function constructor. As follows:
angular.module('greet',[]).provider('greeter',function() {
this.$get = function($http) {
};
});
You can inject constants and other providers into a provider. Not services or factories - with one exception. It seems that you can inject the $injector service into a provider - at least, you can in AngularJS 1.3.16.
.provider('foo', ['$injector', function ($injector) {
var messagePrefix = $injector.get('msgPrefix');
this.message = '';
this.$get = function() {
var that = this;
return function() {
return messagePrefix + that.message;
}
};
}])
You can use the injector outside the $get method, but you still can't get services from it at configure time.
See here for a demo.
Following up on IgrCndd's answer, here's a pattern that might avoid potential nastiness:
angular.module('greet',[]).provider('greeter', function() {
var $http;
function logIt() {
console.log($http);
}
this.$get = ['$http', function(_$http_) {
$http = _$http_;
return {
logIt: logIt
};
}];
});
Note how similar this is to the equivalent service, making conversion between the two less troublesome:
angular.module('greet',[]).factory('greeter', ['$http', function($http) {
function logIt() {
console.log($http);
}
return {
logIt: logIt
};
});
You actually have to inject the dependency on $get and then store it to use on what you retrieve from $get. Not beautiful at all...
No, you can not inject a service into the provider itself.
Injecting a service into a provider's $get method is the same as injecting a service into a factory, but you can not inject it into the provider function directly.
The difference between $get and the provider itself is that the provider runs during the module loading phase whereas the $get is run when instantiating the service you are providing.
This implies that you can not use any service at all during the module loading/configuration phase of your modules. That is all the stuff you run inside your config blocks, such as when defining your app routes or states, can not make use of any service.
The only other thing you can inject into config blocks besides providers are constants.
You could do something like IgrCndd suggested. But if you needed to consume the provider in a config block, which is the provider's purpose after all, you will not have your values injected until much after. So it's not going to work unless you do some nasty hack using promises.
Further reading on injectables