Angularjs 尝试配置angularfire时出现喷油器错误_Angularjs_Firebase_Angularfire

Angularjs 尝试配置angularfire时出现喷油器错误

angularjs firebase

Angularjs 尝试配置angularfire时出现喷油器错误,angularjs,firebase,angularfire,Angularjs,Firebase,Angularfire,当前my 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);

当前my 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>

不知道出了什么问题。此外，还进行了一些调试，以注意到此故障是在尝试注入

firebase

模块时造成的。

在本地获取代码并在我的机器上构建应用程序后，我的最佳猜测是

ng app=“app”

无法看到您的

app.js

文件。当您声明

ng app

时，Angular将查找名为（在本例中为“app”）的模块。如果它找不到，你就会得到你正在得到的错误（不可否认，这是非常模糊的）

您的服务器未正确设置以查找

app.js

，或者您声明的路径不正确。一种测试方法是将

app.js

放在与

index.html

相同的文件夹中，然后替换

与

我很想知道最终是什么解决了你的问题。

在我的本地机器上获取你的代码并构建你的应用程序后，我最好的猜测是

ng app=“app”

看不到你的

app.js

文件。当您声明

ng app

时，Angular将查找名为（在本例中为“app”）的模块。如果它找不到，你就会得到你正在得到的错误（不可否认，这是非常模糊的）

您的服务器未正确设置以查找

app.js

，或者您声明的路径不正确。一种测试方法是将

app.js

放在与

index.html

相同的文件夹中，然后替换

与

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

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

问题在于你的app.js脚本。缩小脚本时，变量将被重命名，在这种情况下，

$routeProvider

将变得像

一样，angular将不再能够注入。将配置调用更改为：

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

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

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

问题在于你的app.js脚本。缩小脚本时，变量将被重命名，在这种情况下，

$routeProvider

将变得像

一样，angular将不再能够注入。将配置调用更改为：

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

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

我在里面没有看到AngularFire

脚本

。@cartant你是说

app.js

的设置方式有问题吗？AngularFire是在

js/app.js

之前导入的，我现在看到了。显然，我不知道如何使用滚动条。多么尴尬。

$firebaseObject

是angularfire提供的服务。尽管您在

app.js

之前的脚本标记中调用angularfire，但您尚未将其注入应用程序模块（即

var-app=angular.module（'app'，['firebase'，'ngRoute'，'angularfire']）；

但是，在您的设置中，这可能是不必要的（我的设置与您的设置有些不同），因此假设没有必要，我强烈怀疑angularfire本身注入了未加载或未及时加载的依赖项。我仍在调试类似问题，并将在我自己发现后发布答案。@samurai_jane也尝试过，结果仍然相同。我在t中未看到angularfire

脚本

这里。@cartant你是说

app.js

的设置方式有问题吗？AngularFire在

js/app.js

之前就已经导入了。是的，我现在看到了。显然，我不知道如何使用滚动条。真是尴尬。

$firebaseObject

是AngularFire提供的服务。尽管你正在调用angularfi在

app.js

之前的脚本标记中，您没有将其注入到您的应用程序模块中（即

var-app=angular.module（'app'，['firebase'，'ngRoute'，'angularfire']）；

但是，在您的设置中，这可能是不必要的（我的设置与您的设置有些不同），因此，假设没有必要，我强烈怀疑angularfire本身注入了未加载或未及时加载的依赖项。我仍在调试类似问题，并将在我自己发现后发布答案。@samurai_jane也尝试过，结果仍然相同。尝试过，但没有结果。目前正在使用minif上述脚本的ied（闭包编译）版本。将其更改为未编译版本，同时删除所有其他firebase脚本（firebase-*）获取此运行。不确定编译时是什么导致了问题。刚刚看到@vivekprakash的答案。完全忘记了这一点，但这是正确的答案。尝试了此操作，但没有结果。当前正在使用minified（closure compiled）上述脚本的版本。将其更改为未编译版本，同时删除所有其他firebase脚本（firebase-*）将运行此脚本。不确定编译时是什么导致问题。刚刚看到@vivekprakash的答案。完全忘记了这一点，但这是正确的答案。