what is the correct way to do constructor injection in angularjs for instantiating objects with a factory or a service and invoke in a controller?
Ref : http://docs.angularjs.org/guide/providers
If you could provide an example it would be really helpful.
An angular service is a singleton, so whatever you attach to the execution context in the service (eg: this.*), is usable in the module it's attached to.
An angular factory is a little different. In an angular factory, you are going to want to return a handle to a factory that will run your constructor function.
Here is a plunk demonstrating both of them.
If you are writing your own angular module, your services and factories would attach to the module the same way, except, you must then inject your module into the app module.
var myAppModule = angular.module('myAppModule', ['ngRoute', 'myCustomModule'])
This will allow the myAppModule to then use all the services, factories, directives in ngRoute and myCustomModule (myCustomModule is any custom module you write and inject into your app).
Related
In my AngularJS application I want to initialize a factory service, without calling it from a controller or other service. How can this be done?
The reason is that I want the service to call one of its functions when the application loads.
You could just inject your service in the angular.module(...).run(...) function.
Then you could add the required code in the Service's main function/constructor.
But just injecting the Service without using it is a bad practice, because you or someone could remove it some day without knowing why it was injected.
So the best way to me is to inject the service in the .run function AND call a yourService.init() method that you will expose from your Service.
That would be more explicit.
app.run(['yourService', function(yourService) {
yourService.init();
}]);
It says that Angular JS Services are singleton objects which are instantiated only once in app.
In terms of instantiation, how different is it from Angular JS factories or controllers?
Answers with a fiddle will be helpful.
There is no factory component in AngularJS. A factory is a function, passed to module.factory(), whose responsibility is precisely to create the service instance. This factory is called only once by Angular, to create the unique instance of the service. This unique instance, returned by the factory function, is then injected everywhere the service is needed.
So, in short, when you do
app.factory('foo', function() {
var service = {};
...
return service;
});
You're not defining a factory. You're passing a factory function to app.factory(), and this factory creates and returns the service instance. 'foo' is the name of the service.
A controller is not a singleton at all. Every time ng-controller="FooCtrl" is used, or FooCtrl is used in some route or directive, a new instance of FooCtrl is created.
Service is a class or an object, which works on singleton pattern once you create an object of a class the same object will be reused so that the memory utilization is very less.
My app is following John Papa's styleguide for AngularJS applications:
The styleguide emphasizes using a strongly modular approach to the design of the app. My question is about multiple configurations and their effect on shared services.
Suppose I have a main module like this:
angular.module("app", ["app.feature1"])
.config(function() {
// do some configuration here
console.log("app configured");
});
And a feature module that configures a shared angular service, let's say the $http service:
angular.module("app.feature1", [])
.config(function($http) {
// configure the $http service
console.log("feature1 configured");
});
Is my understanding correct, that the configuration by "feature1" will carry over to the main module, since the $http service is a singleton and therefore shared across modules? Or do I have to configure the $http service in the main module instead, because each module has it's own $http service instance?
Edit: I can confirm that dependency configs are carried over and are executed first. See David's jsfiddle example.
As a matter of best practice, you should configure services as early as possible, which is typically your main module (the app root), and preferably only once to avoid overlapping changes.
Since $http is a singleton (as you mentioned), any changes via configuration will be propagated throughout the application every time you inject $http.
It's also worth mentioning that configuration to services is First In First Out, meaning that if you have two configuration changes, the last-accessed configuration will be the one that is persisted to the service since the previous configuration will be overwritten if they are changing identical components of the service.
In your case, yes, the change to $http in your module will be extended to your main application and any other modules using $http.
Finally, in light of the comments, child dependency configs are resolved before parent configs, as demonstrated by this simple fiddle:
http://jsfiddle.net/maqzo6fv/
HTML:
<div ng-app="app"></div>
JS:
angular.module("app", ["app.feature1"])
.config(function() {
alert('main config');
});
angular.module("app.feature1", [])
.config(function() {
alert('child config');
});
The child config will call alert before main on every load.
I am new to angular and want to know if I can inject controller into service and then that service can be shared into multiple services.
Or help me out to know how can I create a function in service which can be used my multiple controllers?
Can I use databinding for dependency injection? I'd like to pass the services I want to call on the JSON file being delivered to the AngularJS application.
app.directive('directiveName', ['{{ Data.servName }}','lookupService', function () {};])
Can I use databinding in this method?
No, and that sounds like a terrible idea. Your REST api shouldn't be tightly coupled like this to your angular client implementation.
Anyway, if you has the name of a service and want to get this service instance, inject the $injector service, and call its get() method with the service name as argument.