AngularJS data-binding inside of dependency injection - angularjs

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.

Related

AngularJS - Initialize service without calling it

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

How to override or add some functionality to the existing AngularJS services?

I want to override or add some more functionality to existing services like $http, $log and so on
how to do that?
You would need to use the $provide.decorator method for extending any angular services, the definition of a decorator as per the angular docs:
A service decorator intercepts the creation of a service, allowing it to override or modify the behavior of the service. The object returned by the decorator may be the original service, or a new service object which replaces or wraps and delegates to the original service.
Came across this link by Freek Wielstra which might help you in taking this further.
Edit:
Please check this SO answer by #tomakisquare, he has provided a brilliant plunkr example to extend third party services (or any service for that matter) without meddling with the original code.

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.

Maintain controller state in Angular like Durandal does?

I like that Durandal has Activate/Deactivate methods that get called on the VM and that the views can even be cached.
Is there a way to have this same features in Angular?
You can use a service / factory. These are singletons in AngularJS and you can inject them to the controller. Strictly have one service per controller and the service will be maintained between navigations to the view / controller.
http://docs.angularjs.org/guide/dev_guide.services.creating_services
The way this would work is that your controller would take myService as an injected dependency. Then you assign it to $scope as $scope.cache = myService. Then in your view you bind to cache.someProperty for elements that wanted cached.
Just as an aside:
You can even share services containing state data between controllers. Although I would recommend against this pattern, because it looks like global state. Services you share between controllers should ideally only provide functionality instead of being data objects. Unless you are specifically looking for a global data store :)

AngularJS - using requirejs inside factory

I'm trying to integrate angularjs with dojo.
I've decided to wrap creation of dojo objects in an external module, in order to leave my controller clean.
So I have a factory that exposes creation of an AndOrReadStore instance, for example, and then in the controller I use it to instantiate my dojo store.
Here is an example of what I'm trying to do:
http://plnkr.co/edit/EM0kXKWqZzZrlISvsOik
The problem is that the assignment to the store in the controller occurs before the code inside the requirejs block gets executed (and it doesn't make any difference if the async property of dojoConfig is true or false).
How can I use a factory method that is asynchronously? Could premise solve my problem?
Thanks,
Lior

Resources