2017-02-14 27 views
1

Я работаю над Угловым учебником, в котором используется шаблонный Угловое зерно и Firebase. Ошибка, которую я получаю: ReferenceError: Firebase is not defined.Firebase ReferenceError: Firebase не задан

Это мой 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'}); 
}]); 

это мой индекс .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>[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> 

Это все файлы, которые я изменил от шаблонного углового семени. Если кто-то может помочь, я буду благодарен.

+0

Не помните, когда-либо видел конструктор «Firebase», обычно вы используете ['firebase.initializeApp'] (https://firebase.google.com/docs/database/web/start#initialize_the_database_javascript_sdk). Какую документацию вы следуете? – Phil

ответ

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 прежде, чем вы попытаетесь реализовать что-то из учебника (особенно старого). В мире изменений в сети очень часто происходят изменения.