尝试配置角火时注入器错误

目前我的index.html有以下设置。javascript文件(js/app.js)如下:

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文件:

<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>

运行此命令会产生以下错误:

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)(…)

不知道哪里出了问题。另外，我做了一些调试，注意到这个失败是在试图注入firebase模块时引起的。

根据您在另一个答案中的评论和您的脚本:

问题出在app.js脚本上。当你最小化你的脚本时，你的变量将被重命名，在这种情况下，$routeProvider将变成类似e的东西，angular将不再能够注入。将您的配置调用更改为:

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

同样，对您的控制器进行类似的更改。让我知道这是否有效。

在您的代码和在本地机器上构建您的应用程序之后，我最好的猜测是ng-app="app"无法看到您的app.js文件。当你声明ng-app时，Angular会查找你给它起的任何名字(在本例中是"app")。如果它找不到它，你就会得到你正在得到的错误(无可否认，这是非常模糊的)。

您的服务器没有正确设置以找到app.js或您声明的路径不正确。一种测试方法是将app.js与index.html放在同一个文件夹中，然后替换

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

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

希望听到最终解决你问题的方法。

相关内容

最新更新

热门标签：