AngularJS - Initialize service without calling it - angularjs

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();
}]);

Related

How to use Angular factory data throughout the project

I have an Angular js factory. In which I am storing the user information after successful login. Now I have multiple controllers in all of them I need this user information so I need to inject this factory to each and every controller. Is there any way to access this factory data throughout the project without injecting in each and every controller?
Can we directly inject it into the module?
Some suggestions :
storing the user information in factory is not a good approach because if user reload the page it will reset the factory data and user will not exist anymore.
As sajeetharan suggested, you can use HTML5 localStorage or sessionStorage to store the user information. So, that without injecting you can easily access stored storage value everywhere you want.
Yes, if you need the user information so you need to inject the factory to each and every controller because on switching from one controller to another controller you have to fetch the data from the factory.If you inject the factory only in the main module it will not load the factory when you move from success login to some other page.
User information can be stored in local storage or cookie so that i can be accessed anywhere.
You can also consider using $rootScope, in that case also you need to inject in all the modules which you require.
a factory is part of a module.
Injecting it into the controllers needed is the way of using the saved values throughout the module.

ANGULAR runtime add service to module

How can i add a service to the module/angular app at runtime.
Will $injector or $provide help me?
Something like
app.addService('s',['k',function(k){console.log('new Service k');}]);
Yes, $provide will do it. See the documentation at https://docs.angularjs.org/api/auto/service/$provide
So you could do something like this (from within foo):
app.factory('foo',functon() {
$provide.factory('s',function() {
console.log("new service 's'");
});
});
The problem is that you cannot inject $provide directly into the service, so you need to capture it at module creation time.
The question is, why would you want to do this? Since the service 's' isn't declared until 'foo' is run, you run the risk of calling the service as a dependency at some other point. If it is anywhere within a normal injection, you would probably get some weird error.
Matter of fact, I think the only way it would work is by using the $injector to get it from within some other service.
So, yes, you could do it, but would you really want to?
Look at this fiddle: http://jsfiddle.net/ch8vu4ng/1/

How do you inject dependencies into services in angular.js?

I'm using AngularFire to create a web app. Several of my controllers use a lot of the same functions to access the data in Firebase, so I am trying to write a service so that I don't have to rewrite the same functions for every controller. The problem is that I can't seem to get the Firebase dependency into the service. I'm using the following code:
angular.module("myApp", ["firebase","ngDraggable"])
.factory("GetData",['$firebase','FirebaseConn',function($firebase,FirebaseConn){
$firebase(new Firebase("https://XXXX.firebaseio.com/")).$asObject().$bindTo(scope, "firebaseData");
return {
};
}]);
But when I try to run this, I get the following error:
Unknown provider: FirebaseConnProvider <- FirebaseConn
I am able to access Firebase through my controllers, so it's not a problem connecting to firebase.js or angularfire.js.
How should I inject Firebase into my service so I can access the data in all of my controllers? Or, is there a better way to go about this? I'm rather new to Angular so if there's a better way to share functions between my controllers I'm all ears.
You inject them precisely the same way that you do in Controllers and Directives.
This is a common error in AngularJS, and it means you're injecting something that isn't injectable. It almost always means either you missed a dependency (probably not in this case) or that you're asking for something that doesn't exist in the first place.
This is almost certainly your problem. You're asking for firebase and getting it, but it can't find FirebaseConn. What is that, some variable of yours that you're using to track your connection? Because you aren't using it, and the AngularFire docs I just looked at don't, either.
Consider something more like the following:
angular
.module("myApp", ["firebase", "ngDraggable"])
.service("firebaseManager",['$firebase', function($firebase) {
var ref = new Firebase("https://XXXX.firebaseio.com/"),
sync = $firebase(ref);
this.getData = function() {
return sync.$asObject();
};
});
Obviously, customize this to suit. Two comments:
You probably do want a service instead of a factory. This is a common point of confusion when you first start using AngularJS. You only need a factory if you plan to get involved in the instantiation of the service in some way. A service is just a shortcut form of a factory with the most common usage - the one you probably want.
You will now inject this service firebaseManager into your controllers. When you do, they will be able to call firebaseManager.getData() and any other methods you define. firebaseManager will be a singleton, so all of this will go through one common Firebase connection.

AngularJS data-binding inside of dependency injection

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.

Resolving a service programmaticallyin AngularJs

I am trying to resolve a service programmatically in angular js from a particular module, but I can't find the correct way to do that.
I know using angular.injector(['NameOfModule']).get('NameOfService') I can retrieve the service. However, using angular.injector does not retrieve the injector of the given module and instead creates a new injector. This means that when it retrieves the service, as it is a new injector, it does not have the service cached and so creates a new one. This means that I will have several of the same service, and so it will no longer be a singleton, which will obviously cause problems.
What I essentially want to do is retrieve the injector from a particular module so I can try to retrieve the (cached or not cached) service from that injector. Does anyone know how to achieve this?
What i would suggest would be to inject the $injector service into the controller\service where you want to use it. This would return the injector that the app is using and not create a new injector as angular.injector does. See detailed explanation in this SO post Can't retrieve the injector from angular

Resources