CODEWITHSUNDEEP
angularjsfirebasefirebase-realtime-databaseangularfire
David Ramirez
David Ramirez

Reputation: 217

Firebase ReferenceError: Firebase is not defined

I'm working on a Angular tutorial that uses the boilerplate Angular-seed and Firebase. The error I am getting is: ReferenceError: Firebase is not defined.

This is my contact.js where my error is being referenced:

'use strict';

angular.module('myContacts.contacts', ['ngRoute','firebase'])

.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/contacts', {
    templateUrl: 'contacts/contacts.html',
    controller: 'ContactsCtrl'
  });
}])

// Contacts Controller
.controller('ContactsCtrl', ['$scope', '$firebaseArray', function($scope, $firebaseArray) {
    // Init Firebase
    var ref = new Firebase('https://mycontacts-app.firebaseio.com/contacts');

    // get Contacts
    $scope.contacts = $firebaseArray(ref);
    console.log($scope.contacts);


}]);

This is my app.js

'use strict';

// Declare app level module which depends on views, and components
angular.module('myContacts', [
  'ngRoute',
  'firebase',
  'myContacts.contacts'
]).
config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider) {
  $locationProvider.hashPrefix('!');

  $routeProvider.otherwise({redirectTo: '/contacts'});
}]);

this is my index.html

<!DOCTYPE html>
<!--[if lt IE 7]>      <html lang="en" ng-app="myContacts" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html lang="en" ng-app="myContacts" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html lang="en" ng-app="myContacts" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" ng-app="myContacts" class="no-js"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>MyContacts App</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="bower_components/foundation/css/foundation.css">
  <link rel="stylesheet" href="app.css">

</head>
<body>
  <div class="container">
    <div class="row">
      <div class="large-12 columns">
        <h1>myContacts</h1>
        <hr>
      </div>
    </div>
    <div ng-view></div>
  </div>

  <!--[if lt IE 7]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
  <![endif]-->

  <!-- In production use:
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
  -->
  <script src="bower_components/jquery/dist/jquery.js"></script>
  <script src="bower_components/angular/angular.js"></script>
  <script src="bower_components/angular-route/angular-route.js"></script>
  <script src="bower_components/firebase/firebase.js"></script>
  <script src="bower_components/angularfire/dist/angularfire.js"></script>
  <script src="bower_components/foundation/js/foundation.js"></script>
  <script src="app.js"></script>
  <script src="contacts/contacts.js"></script>
</body>
</html>

this is my contact.html

<div class="row" ng-controller="ContactsCtrl">
  <div class="large-10 columns">
    <h3>Your Contacts</h3>
    <table>
      <thead>
        <tr>
          <th width="200px">Name</th>
          <th width="200px">Company</th>
          <th width="25%">Email</th>
          <th width="25%">Actions</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><a href="#">John Doe</a></td>
          <td>Some Company</td>
          <td>[email protected]</td>
          <td><a href="#" class="button tiny">Edit</a>
             <a href="#" class="button tiny alert">Delete</a></td>
        </tr>
      </tbody>
    </table>

  </div>
  <div class="small-12 large-2 columns">
    <a href="#" class="button large">+</a>
  </div>
</div>

These are all the files that I've changed from the boilerplate angular-seed. If anyone can help I would be grateful.

Upvotes: 1

Views: 1480

Answers (1)

Marko Letic
Marko Letic

Reputation: 2550

You are looking at a tutorial that is outdated. Things are a little bit changed with the new version of Firebase.

Things like this:

var app = angular.module('app', ['firebase']);
app.controller('Ctrl', function($scope, $firebaseArray) {
    var ref = new Firebase('https://...');
    $scope.contacts = $firebaseArray(ref);
    ...
});

are changed into this:

var app = angular.module('app', ['firebase']);
app.controller('Ctrl', function($scope, $firebaseArray) {

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

    var ref = firebase.database().ref().child("contacts");
    $scope.contacts = $firebaseArray(ref);
    ...
});

Of course you need to include firebase.js and angularfire.js into your index.html but you already did that.

I wasn't sure if you just want to read your data from the database or something more but I think this example is enough. Also try to read the official documentation first before you try to implement something from a tutorial (especially an old one). In the world of web development changes are very frequent.

Upvotes: 1

Related Questions