Angular 和 Firebase 应用程序无法运行答案

【问题标题】：Angular and Firebase app won't workAngular 和 Firebase 应用程序无法运行
【发布时间】：2015-04-21 21:38:58
【问题描述】：

这是我的html：

<!DOCTYPE html>
<html ng-app="sampleApp">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script src="https://cdn.firebase.com/js/client/2.2.2/firebase.js"></script>
    <script src="https://cdn.firebase.com/libs/angularfire/1.0.0/angularfire.min.js"></script>
    <script src="scripts/app.js"></script>
  </head>
  <body ng-controller="SampleCtrl">
    <!-- anything typed in here is magically saved to Firebase! -->
    <input type="text" ng-model="data.text"/>

    <!-- all changes from Firebase magically appear here! -->
    <h1>You said: {{ data.text }}</h1>
  </body>
</html>

这是我的 app.js 文件：

(function() {

var app = angular.module("sampleApp", ["firebase"])

app.controller("SampleCtrl", function($scope, $firebaseObject) {
  var ref = new Firebase("https://fiery-inferno-4208.firebaseio.com/data");
  var syncObject = $firebaseObject(ref);

  syncObject.$bindTo($scope, "data");
});

})();

我从这个例子中复制了它：https://www.firebase.com/docs/web/libraries/angular/quickstart.html

当我尝试在自己的计算机上运行它时，我在控制台中收到以下错误：

Uncaught SyntaxError: Unexpected token

和

未捕获的错误：[$injector:modulerr]

我不知道出了什么问题！

【问题讨论】：

Uncaught SyntaxError: Unexpected token < 表示您的脚本中某处存在拼写错误。在这个例子中我看不到它。但是在检查器中单击该错误消息行号以找到它。下一个错误只是第一个错误的后续错误。
我投票决定将其关闭为错字/不可重现，因为您的代码甚至与您从中获取的示例不匹配。在发布问题之前，您应该仔细检查您的代码。您错误地尝试将标准函数转换为 IIFE，而示例没有这样做。
您好，同样的问题。你解决了吗？

标签： javascript angularjs firebase

【解决方案1】：

您的模块未加载，因为您创建的函数从未执行。看起来您在脚本中最后一个 ; 之前缺少 ()。这为我解决了这个问题：

(function() {

    var app = angular.module("sampleApp", ["firebase"])

    app.controller("SampleCtrl", function($scope, $firebaseObject) {
        var ref = new Firebase("https://fiery-inferno-4208.firebaseio.com/data");
        var syncObject = $firebaseObject(ref);

        syncObject.$bindTo($scope, "data");
    });

})();

【讨论】：

宾果游戏。应该已经被调试器捕获了，并且从来没有这样做过。
谢谢这是一个很好的捕获，但我仍然得到：未捕获的错误：[$injector:modulerr]

【解决方案2】：

$injector:modulerr 基本上意味着模块无法加载，可能是多种原因。

<script>
      var myApp = angular.module("myApp", ["firebase"]);

      myApp.controller("MyController", ["$scope", "$firebaseArray",
        function($scope, $firebaseArray) {
          //CREATE A FIREBASE REFERENCE
          var ref = new Firebase("https://qst13ns0z14.firebaseio-demo.com/");

          // GET MESSAGES AS AN ARRAY
          $scope.messages = $firebaseArray(ref);

          //ADD MESSAGE METHOD
          $scope.addMessage = function(e) {

            //LISTEN FOR RETURN KEY
            if (e.keyCode === 13 && $scope.msg) {
              //ALLOW CUSTOM OR ANONYMOUS USER NAMES
              var name = $scope.name || "anonymous";

              //ADD TO FIREBASE
              $scope.messages.$add({
                from: name,
                body: $scope.msg
              });

              //RESET MESSAGE
              $scope.msg = "";
            }
          }
        }
      ]);
    </script>

<!doctype html>
<html ng-app="myApp">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script src="https://cdn.firebase.com/js/client/2.2.1/firebase.js"></script>
    <script src="https://cdn.firebase.com/libs/angularfire/1.0.0/angularfire.min.js"></script>
    <link rel="stylesheet" href="/resources/tutorial/css/example.css"/>
  </head>

  <body ng-controller="MyController">

    <!-- CHAT MARKUP -->
    <div class="example-chat l-demo-container">
      <header>Firebase Chat Demo</header>

      <div class="example-chat-toolbar">
        <label for="nameInput">Username:</label>
        <input ng-model="name" type="text" id="nameInput" placeholder="enter a username...">
      </div>

      <ul id="example-messages" class="example-chat-messages">
        <li ng-repeat="msg in messages">
          <strong class="example-chat-username">{{ msg.from }}</strong>
          {{ msg.body }}
        </li>
      </ul>

      <footer>
        <input ng-model="msg" ng-keydown="addMessage($event)" type="text" id="messageInput"  placeholder="Type a message...">
      </footer>
    </div>
  </body>
</html>

【讨论】：