Angularfire Uncaught ReferenceError: Firebase is not defined

Question

I'm following the example Getting started with Firebase and Angular - Firecasts #4 and I keep getting:

Uncaught ReferenceError: Firebase is not defined.

Any ideas?

Here is my app.js:

    angular
    .module('app', ['ngRoute', 'firebase'])
    .constant('FirebaseUrl', 'https://<my-app>.firebaseio.com/')
    .service('rootRef', ['FirebaseUrl', Firebase])
    .service('users', Users)
    .controller('MyCtrl', MyController)
    .config(ApplicationConfig);

function ApplicationConfig($routeProvider) {
    $routeProvider.when('/', {
        controller: 'MyCtrl as ctrl',
        templateUrl: 'views/myctrl.html'
    });
}

function Users(rootRef, $firebaseObject, $firebaseArray) {
    var usersRef = rootRef.child('users');
    this.get = function get(id) {
        return $firebaseObject(usersRef.child(id));
    };

    this.all = function all() {
        return $firebaseArray(usersRef);
    };
}

function MyController(users) {
    this.users = users.all();
}

This is my index.html:

<!DOCTYPE html>
    <html lang="en" ng-app="app">
     <head>
    <meta charset="UTF-8">
    <title>AngularFire</title>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/firebase/firebase.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>
    <script src="bower_components/angularfire/dist/angularfire.js"></script>
    <script src="app.js"></script>
</head>
<body>
    <ng-view></ng-view>
</body>
</html>

Answer 1

It seems like you are using new version of firebase. Go ahead and rewrite this example like it is said here: https://firebase.google.com/support/guides/firebase-web#monitor_authentication_state_numbered.

You need point 4: "In the new SDKs, you no longer instantiate a database references via new Firebase. Instead, you will initialize the SDK via firebase.initializeApp()..."

Answer 2

You need to insert:

var rootRef = new Firebase('https://<my-app>.firebase.io.com');

inside of MyController as seen in this .

The commentator explains that Firebase is injected into to the controller as a "Firebase constructor function."

'FirebaseUrl' is the url defined above inside .constant.

His explaination is quite fast, but either way you need that line of code to help define the reference.

Please edit or comment on this post if anyone has more insight.

Answer 3

I add this as answer to use the link: new docs

As Boas Babs said, the new version uses a different approach to get the database reference.

app.controller("SampleCtrl", function($scope, $firebaseObject) {
  var ref = firebase.database().ref();

  // download the data into a local object
  $scope.data = $firebaseObject(ref);
});