I'm trying to dynamically create a service in another service and add it to the inejctor, so that other controllers and services throughout the app can inject it later. I'm not sure if what I'm even trying to do is possible but I've boiled down what I'm trying to do into an example on Plunkr
I'm basically having two modules use each other. One defines how a service should be configured on the fly, and the other module configures the services on the fly. I'm not sure what to do while configuring the new dynamic service though so that it can be found by the injector later and used in other controllers,services etc. Any thoughts?
Ok, so basically I needed to make a provider instead of a service. The provider can create factories, values, constants, etc. See a revised plunker here
Related
This is a question about AngularJS modules and services, and how to define them.
An app can be composed of multiple modules
A service allows commonly-used code to be factored out and used by multiple modules
A service is (commonly) defined with:
angular.module('module1').factory('serviceA', function() { ... } );
If the above are all true, then why does the definition of serviceA include a reference to module1? Shouldn't it be ignorant of any modules that want to use it?
If I was building a module2 and I referenced serviceA.js in order to access the above service, it would tell me that module1 is not defined.
I guess my question is how do I create a set of independent modules and have them all access a global service? In all the examples I've seen the service is tightly-coupled to a specific module.
The factory() method is a method on module, so you need a module instance to be able to call it. Essentially, that statement says that you want that factory to be defined on that specific module.
If you need module1 in something used in module2, then module2 should declare a dependency on module1:
angular.module('module2', ['module1']);
One thing that writing unit tests will teach you really quickly is that the more places something is used, the more important it is to put it in a module. If you try to treat it as "global" because it's used in a lot of places, that means you have to bootstrap the entire app just to use those services that are basically used everywhere.
I have built a custom a directive using angularjs. Now I have to make it configurable, so that who ever is using it should be able to call a service in my directive and initialize all the configurable parameters, I cant even get a big picture of what it is and how to make it configurable.
Right before any body uses my directive in their spa(single page application) they should configure the directive and then the configurable parameters should be set and the directive should function as configured.
Any help would be appreciated, please ask any questions if I am not clear because as said even I don't have a clear picture of what is needed. Thanks
I have used the angular service providers and config functions, made another js file isolated all the configurations into the file.
Just have to set the parameters in the config function, via the provider function we can inject the configurables into the desired controller.
I am just starting with Angular with a project that seems really suited to it. In this project i must make several instances of a form builder so i have decided to make a service out of the form builder code. All is fine and good up until i take in account the other requirement: Form previews.
I was thinking of something along the lines of what this guy does but then i realised using his approach implies i cannot store/share more than one form (At least with the default injection approach used by Angular) so i gave it some thought and decided that having one instance of the FormBuilder service for each form would cut it. How can i control which instance of my service is injected into my controllers?
Propably you would not inject a specifc FormBuilder instance rather than a InstanceRegistry?
Create a service which returns a function taking the name to resolve and returns the resolved instance. This will be called from your controller.
Optionally, you could create resolves for the route if you are using either ngRoute or ui.router and do the resolving in the resolve block.
.when("...",{
controller:"...",
templateUrl:"...",
resolve:{
form1:["$formFactory", function($formFactory){
return $formFactory("form1")
})
}
})
HTH
tl;dr
I'm really struggling to find the appropriate pattern here. How should I best configure a generalized provider to a specific use-case? I can't use $http as a dependency in .configure(); can I?
longer, boring explanation:
I am trying to create a generalized provider which I may reuse in Angular. I have it working, however it requires configuration.
The intention is to provide a fallback REST service to use in saving data to the server, but with provision to save offline in local-storage. Therefore, I need to provide appropriate $http calls for each instance of this provider.
Is it possible to provide appropriate $http calls with .configure() or else should I try and figure out how to inject $http into the provider from the start and then configure it afterward??
It's frustrating... and may change in AngularJS 2.0... But for now, yes, it is not possible to do this. There is a very high wall between the .configure() and .run() states, so you can't access $http from a .configure() function. The reason is that it hasn't actually been created. At this stage, all that exists is the provider. Once all of the dependencies are configured, then the http provider will be used to make the real $http service.
I'm not sure exactly what you're trying to do, but there are two excellent AngularJS developers that are good to follow who have some advanced patterns in projects they've shared: Pascal Precht and Brian Ford. Here are two projects that make heavy use of provider/service concepts as well as $http-driven services:
https://github.com/angular-translate/angular-translate
https://github.com/btford/angular-modal
Angular Modal, especially, does $http work to load its templates. There might be use cases in there that are similar to what you're trying to do.
How does AngularJS handle collisions between names of services? For example if I have declared two modules each containing a service called 'foo'. What would be a good way to "namespace" services if I want to create a reusable module or want to avoid collisions with other third-party modules?
As of today AngularJS doesn't handle namespace collisions for services so if you've got 2 different modules with the service named the same way and you include both modules in your app, only one service will be available.
For the moment the best option is to prefix service names with a custom prefix, ex:
angular.module('myprefix_mymodule',['dep1', 'dep2']).factory('myprefix_MyService', ...)
As noted by pkozlowski, they don't. You can manually add a prefix to all of your services (which is kind of annoying), alternatively, I wrote a hack to namespace it for you.
https://github.com/callmehiphop/angular-namespacer