Firebase's AngularFire in an AngularJS service

Question

The best way of handling Firebase in AngularJS surely has to be from within a service, so it's available to all Controllers across the App.

I just can't get it to work! ... I first tried using angularFire(new Firebase(url)), hoping I could bind to the service's scope, but Angular complains that it cannot $watch it.

So I tried angularFireCollection instead like this:

app.factory('myService', function myService(angularFireCollection) {
    var url = 'https://myfirebase.firebaseio.com';
    return {
        getAll: function(path) {
            var ref = angularFireCollection(new Firebase(url + '/' + path));
            console.log(ref);
            return ref;
        },
        ...
    };
});

However, the angularFireCollection is an Object containing a load of methods etc. if I bind it to a controller $scope I just get garbage. It also complains that it can't call the Firebase functions before I try to use them (e.g. Error: Firebase.push failed: second argument must be a valid function.)... anyone got any ideas where I'm going wrong?

See this PLUNKER

Answer 1

If you want to encapsulate some of the functionality into a service, consider keeping the returned ref in state of the service. I expanded on your plunker. It seems to mostly do what you were trying for.

http://plnkr.co/edit/Uf2fB0