Question

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

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

未捕获的SyntaxError：意外的标记＆lt;

和

未捕捉错误：[$ injector：modulerr]

我无法弄清楚出了什么问题！

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

})();

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

Angular和Firebase应用程序无法正常工作

2 个答案: