Angular和Firebase应用程序无法运行。

Question

Angular和Firebase应用程序无法运行。

3

这是我的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

当我尝试在自己的电脑上运行它时，控制台显示以下错误信息：

未捕获的语法错误：意外的符号 <

和

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

我无法确定问题出在哪里！

- user3116173

"Uncaught SyntaxError: Unexpected token <" 意味着你的脚本中有拼写错误。在这个例子中我看不到它。但是在检查器中点击该错误信息所在的行号以找到它。下一个错误只是紧随其后的第二个错误。 - Rias

我投票将此关闭为打字错误/不可重现，因为您的代码甚至与您从中获取的示例不匹配。在发布问题之前，您应该仔细检查您的代码。您已经错误地尝试将标准函数转换为IIFE，而示例并没有这样做。 - Claies

嗨，我这里也遇到了同样的问题。你解决了吗？ - WJA

2个回答

0

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

- Ben Petersen

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Seamus · Accepted Answer

你的模块没有被加载，因为你创建的函数从未被执行。看起来你在脚本的最后一个 ; 前面缺少了 ()。这样对我有用:

(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");
    });

})();