Firebase's AngularFire in an AngularJS service

8
votes

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

2
angularjsfirebaseangularjs-serviceangularfire
I think angularFire already is a service so you could use it just as it is. - Victor Bjelkholm
well ... angularFire is a service, but it provides binding to the $scope you choose to apply it to e.g. angularFire(new Firebase(url), $scope, 'value');. That's great if I just want to use it in one Controller, but I want to be able to bind to a custom service so that I can access/edit/update the data from any controller, just by passing around the service. The Firebase site only shows you how to bind implicitly and explicitly to the current $scope. - stukennedy
It is really amazing that there is no simple answer (nor Firebase example) for this question, regarding that AngularJS promotes using angular services to share state/services between controllers. Therefore, upvoted. - Michael Trouw

2 Answers

12
votes

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

6
votes

Jeff answered the question correctly ... I'm just posting a further development on Jeff's example for those who are interested.

I have abstracted the Firebase service creation, so you can dynamically create an instance of whatever Firebase service you want:-

var registerFirebaseService = function (serviceName) {
    app.factory(serviceName, function (angularFire) {
        var _url = null;
        var _ref = null;

        return {
            init: function (url) {
                _url = url;
                _ref = new Firebase(_url);
            },
            setToScope: function (scope, localScopeVarName) {
                angularFire(_ref, scope, localScopeVarName);
            }
        };
    });
};

You first create an instance of the service as follows

registerFirebaseService('itemsService'); // create itemsService instance

Then you can inject the itemsService service into your controllers. The instance is initialised using your Firebase URL e.g.

itemsService.init('https://firebase.firebaseio.com/' + userId + '/items');

The Firebase can now be bound to your controller e.g.

itemsService.setToScope($scope, 'items');

adapted PLUNKER