CODEWITHSUNDEEP
angularjsfirebaseangularfirefirebase-realtime-database
Jakob Pilsgaard
Jakob Pilsgaard

Reputation: 120

Firebase angularfire in new firebase

I have an angular app, which utilizes the angularFire library. It is stated in the firebase documentation that angularfire is supported https://firebase.google.com/support/guides/firebase-web#update_your_firebase_libraries_numbered

I have updated firebase and angularfire to the latest version.

BEFORE: //This works :-) 

    // *** DataService ***

    var root = new Firebase(FIREBASE_URL);         

    var service = { 
        root: root, 
        items: root.child('items'), 
        tastings: root.child('tastings'), 
        users: root.child('users'), 
        votes: root.child('votes') 
    };

    return service;

    // *** Controller ***

    $scope.tastings = $firebaseArray(dataService.tastings);

AFTER: //This does not work :-(

    // *** app.js ***

    .run(function (FIREBASE_CONFIG) {
        firebase.initializeApp(FIREBASE_CONFIG);
    });

    // *** DataService ***

    var root = firebase.database().ref();         

    var service = { 
        root: root, 
        items: root.child('items'), 
        tastings: root.child('tastings'), 
        users: root.child('users'), 
        votes: root.child('votes') 
    };

    return service;

    // *** Controller ***

    $scope.tastings = $firebaseArray(dataService.tastings);

The error I am getting: "Must pass a valid Firebase reference to $firebase (not a string or URL)"

It looks like a firebase reference in chrome console when i evaluate dataService.tastings, though there are new properties like database, which has been added.

Upvotes: 4

Views: 2950

Answers (3)

Ezequiel
Ezequiel

Reputation: 125

I'm using the latest version in one of my projects and it works fine so you should have something like this:

/// Main configuration of Firebase

    var config = {
        apiKey: "AIzaSyDcPq_z9vh4CidkzFDyerRK0ZS7gs2Sj14",
        authDomain: "citytimer-90920.firebaseapp.com",
        databaseURL: "https://citytimer-90920.firebaseio.com",
        storageBucket: "citytimer-90920.appspot.com",
        messagingSenderId: "497040832817"
    };
    firebase.initializeApp(config);

This part is pure Javascript so you don't need to include it in an Angular file.

Then those are the Angular files I'm using.

/// Database service

    function firebaseDataService() {
        var root = firebase.database().ref();

        var service = {
            root: root,
            requests: root.child('requests'),
            places: root.child('places')
        };

        return service;
    }

As you can see my service looks like yours.

/// Specific service to retrieve data

function cityTimerService($firebaseArray, firebaseDataService, $firebaseObject, $rootScope, $q, $http) {

        var service = {
            getRequestsByUser: getRequestsByUser,
        };

        return service;

        function getRequestsByUser(uid) {
            if (!requests) {
                requests = $firebaseArray(firebaseDataService.requests.child(uid).child('userRequests'));
            }
            return requests;
        }
}

Basically you don't longer need to provide the FIREBASE_URL because it's part of the configuration object. For the record you can get this configuration object from your Firebase console.

If you want to take a closer look on the code I have in my project you can do it here.

Upvotes: 0

vaibhav
vaibhav

Reputation: 784

Yes, AngularFire is supported with google's new firebase 3 and above.

Along with that you can get the detailed documentation of it on : GitHub : https://github.com/firebase/angularfire

Upvotes: 1

iamchriswick
iamchriswick

Reputation: 370

AngularFire is now officially updated to support Firebase 3.x.x :)

Upvotes: 2

Related Questions