Question

我一直在通过互联网解决这个错误。我似乎无法找到代码的任何错误。救命！我正在关注平均堆栈的microsoft jumpstart教程，我有几乎相同的代码，但他们的运行正常。 I cant understand why the angular code is getting displayed on the page.

angular.js:4630 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.6/$injector/modulerr?p0=chirpApp&p1=Error%3…oogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.6%2Fangular.min.js%3A21%3A19)

var app = angular.module('chirpApp', []);
app.controller('maincontroller', function($scope) {
      $scope.posts = [];
      $scope.newPosts = {
        created_by: '',
        text = '',
        create_at: ''
      };
      $scope.post = function() {
        $scope.newPosts.create_at = Date.now();
        $scope.posts.push($scope.newPosts);
        $scope.newPosts = {
          created_by: '',
          text = '',
          create_at = ''
        };

      }



    };

<!--main.html-->
<!doctype html>
<html>

<head>
  <title>Chirp</title>
  <script source="js/chirpApp.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
</head>
</head>

<body ng-app="chirpApp" ng-controller="mainController">
  <div id='main'>
    <form ng-submit="post()">
      <input required type="text" placeholder="Your name" ng-model="newPosts.created_by" />
      <textarea required maxlength="200" rows="3" placeholder="Say something" ng-model="newPosts.text"></textarea>
      <input class="button" type="submit" value="Chirp!" />
    </form>
    <div id="post-stream">
      <h4>Chirp Feed</h4>
      <div class='post' ng-repeat="post in posts | orderBy:'create_at': true" ng-class-odd="'odd'" ng-class-even="'even'">
        <p>{{post.created_by}} says {{post.text}} at {{post.create_at}}</p>

      </div>
    </div>
  </div>
</body>

</html>

NEW SITUATION

Answer 1

您的代码中存在一些问题。

text是对象$ scope.newPosts的关键，因此您必须将=替换为:

修改地点$scope.newPosts

 $scope.newPosts = {
            created_by: '',
            text : '',
            create_at: ''
          };

使用src属性加载外部脚本，但您使用的是源代码，因此chirpApp根本没有在页面中加载

在本地计算机上工作时，请正确参考文件位置。正如Venkant所指出的那样，文件顺序也很重要

您检查此PLUNKER

Answer 2

应在angular.min.js之前加载

chirpApp.js。所以，把

 <script source="js/chirpApp.js"></script>

之后的

行

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>

线。

Answer 3

mainController的大小写在HTML和JS之间并不匹配。

JS

app.controller('maincontroller', function($scope) {

HTML

<body ng-app="chirpApp" ng-controller="mainController">

angular.js：4630未捕获错误：[$ injector：modulerr]

3 个答案: