Firebase ReferenceError: Firebase is not defined

Question

我正在编写一个 Angular 教程，该教程使用样板文件 Angular-seed 和 Firebase。我收到的错误是：ReferenceError: Firebase is not defined.

这是我的 contact.js 引用我的错误的地方：

'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);


}]);

这是我的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'});
}]);

这是我的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>

这是我的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>sothing@something.com</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>

这些是我从样板 angular-seed 更改的所有文件。如果有人能帮助我，我将不胜感激。

Answer 1

您正在查看的教程已过时。新版本的 Firebase 发生了一些变化。

像这样的事情：

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

改成这样：

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);
    ...
});

当然，您需要将 firebase.js 和 angularfire.js 添加到您的 index.html 但你已经做到了。

我不确定您是只想从数据库中读取数据还是其他内容，但我认为这个示例就足够了。在尝试从教程（尤其是旧教程）中实现某些内容之前，也请先尝试阅读 official documentation。在网络开发的世界里，变化是非常频繁的。

Firebase ReferenceError: Firebase is not defined

Firebase ReferenceError: Firebase is not defined

angularjs

firebase

angularfire

firebase-realtime-database