2016-10-31 10 views
1

現在、私のindex.htmlには次の設定があります。次のようにJavaScriptのファイル(JS/app.js)は次のとおりです。anglefireを設定しようとしたときのインジェクタのエラー

var app = angular.module('app', ['firebase', 'ngRoute']); 

app.controller('RootCtrl', function($scope, $firebaseObject) { 
    var ref = firebase.database().ref(); 
    $scope.data = $firebaseObject(ref); 
}); 

app.controller('HomeCtrl', function($scope, $firebaseObject) { 
    var ref = firebase.database().ref(); 
    $scope.data = $firebaseObject(ref); 
    $scope.pageName = 'Home'; 
}); 

app.config(function($routeProvider) { 
    $routeProvider.when('/', { 
    templateUrl: 'home.html', 
    controller: 'HomeCtrl' 
    }).when('/location/:locId', { 
    templateUrl: 'location.html', 
    controller: 'LocationCtrl' 
    }).otherwise({ 
    redirectTo: '/' 
    }); 
}); 

HTMLファイル:何の

angular.js:38Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.8/$injector/modulerr?p0=app&p1=Error%3A%20%…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.8%2Fangular.min.js%3A43%3A336)(…) 

わからない:

<html> 

<head> 
    <title>Firebase App</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css"> 
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 

    <!-- Angular Material requires Angular.js Libraries --> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-aria.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-messages.min.js"></script> 

    <!-- Angular Material Library --> 
    <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script> 


    <!-- Firebase Libraries --> 
    <script src="https://www.gstatic.com/firebasejs/3.5.2/firebase.js"></script> 
    <script src="https://www.gstatic.com/firebasejs/3.5.2/firebase-app.js"></script> 
    <script src="https://www.gstatic.com/firebasejs/3.5.2/firebase-auth.js"></script> 
    <script src="https://www.gstatic.com/firebasejs/3.5.2/firebase-database.js"></script> 
    <script src="https://www.gstatic.com/firebasejs/3.5.2/firebase-messaging.js"></script> 
    <script src="https://www.gstatic.com/firebasejs/3.5.2/firebase-storage.js"></script> 
    <script> 
    // Initialize Firebase 
    var config = { 
     apiKey: "___", 
     authDomain: "___.firebaseapp.com", 
     databaseURL: "https://___.firebaseio.com", 
     storageBucket: "___.appspot.com", 
     messagingSenderId: "___" 
    }; 
    firebase.initializeApp(config); 
    </script> 

    <!-- AngularFire --> 
    <script src="https://cdn.firebase.com/libs/angularfire/2.1.0/angularfire.min.js"></script> 
    <script src="js/app.js"></script> 
</head> 

<body ng-app="app" ng-controller="RootCtrl"> 
    <div ng-view> 
    </div> 
</body> 

</html> 

が、これは次のエラーを与える実行うまくいかない。さらに、firebaseモジュールを注入しようとしたときに、このエラーが発生していることに気づくためにデバッグを行いました。

+0

そこにAngularFireの「スクリプト」は表示されません。 – cartant

+0

@cartant 'app.js'の設定方法に問題があるのですか? AngularFireは 'js/app.js'の直前にインポートされました –

+0

はい、私は今それを見ます。どうやら、私はスクロールバーをどのように動作させるか分かりません。どのように恥ずかしい。 – cartant

答えて

0

別の答えにコメントやスクリプトに基づいて:

問題は、あなたのapp.jsスクリプトです。スクリプトを小さくすると、変数の名前が変更されます。この場合、$routeProvidereのようになり、角度を挿入できなくなります。設定コールを次のように変更してください。

app.config(['$routeProvider', function($routeProvider) { 
    $routeProvider.when('/', { 
    templateUrl: 'home.html', 
    controller: 'HomeCtrl' 
    }).when('/location/:locId', { 
    templateUrl: 'location.html', 
    controller: 'LocationCtrl' 
    }).otherwise({ 
    redirectTo: '/' 
    }); 
}]); 

また、コントローラにも同様の変更を加えてください。これが動作するかどうか私に教えてください。

0

コードを取得してローカルで自分のマシンにアプリケーションをビルドした後、ng-app="app"app.jsファイルを見ることができません。 ng-appを宣言すると、Angularは名前を付けたモジュール(この場合は「app」)を探します。それが見つからなければ、あなたはあなたが得ているエラーを受け取ります(それは間違いなく、非常に曖昧です)。

サーバが正しく設定されていないと、app.jsが見つかりません。または、宣言したパスが正しくありません。これをテストするための一つの方法はindex.htmlと同じフォルダにapp.jsを入れた後、最終的にはあなたの問題を解決を聞くのが大好きだ

<script src="./app.js"></script>

<script src="js/app.js"></script>

を交換することです。

+0

これは試しましたが、結果はありません。現在、上記のスクリプトの縮小版(クロージャをコンパイルしたもの)を使用していました。すべてのadditを削除するional firebaseスクリプト(firebase- *)がこれを実行します。コンパイル時に何が原因で起こっているのか不明です。 –

+0

@vivekprakashの回答を見ただけです。それを完全に忘れてしまったのですが、それは正しい答えです。 –

関連する問題