Firebase ReferenceError: Firebase ist nicht definiert

Ich arbeite an einem Angular-Tutorial, das die Boilerplate Angular-Seed und Firebase verwendet. Der Fehler, den ich bekomme, ist: ReferenceError: Firebase is not defined.Firebase ReferenceError: Firebase ist nicht definiert

Dies ist mein contact.js, wo mein Fehler verwiesen wird:

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


}]);

Das ist mein 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'}); 
}]);

das ist mein 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>

das ist mein 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>

Dies sind alle Dateien, die ich aus dem vorformulierten Winkel Samen geändert haben. Wenn jemand helfen kann, wäre ich dankbar.

Quelle

2017-02-14 David Ramirez

Sie erinnern sich nicht, jemals einen 'Firebase'-Konstruktor zu sehen, normalerweise verwenden Sie [' firebase.initializeApp'] (https://firebase.google.com/docs/database/web/start#initialize_the_database_javascript_sdk). Welche Dokumentation folgen Sie? – Phil

Sie betrachten ein Tutorial, das veraltet ist. Mit der neuen Version von Firebase ändert sich einiges.

Dinge wie diese:

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

in diese geändert:

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

Natürlich müssen Sie firebase.js und angularfire.js in Ihre index.html enthalten aber du hast das schon gemacht.

Ich war mir nicht sicher, ob Sie nur Ihre Daten aus der Datenbank oder etwas mehr lesen möchten, aber ich denke, dieses Beispiel ist genug. Versuchen Sie auch, die official documentation zuerst zu lesen, bevor Sie versuchen, etwas aus einem Tutorial (vor allem einem alten) zu implementieren. In der Welt der Web-Entwicklung sind Veränderungen sehr häufig.

Quelle

2017-02-15 10:29:20

Firebase ReferenceError: Firebase ist nicht definiert

Antwort

Verwandte Themen