控制器不是函数得到未定义的错误消息 angular js

Question

我是 MEAN Stack 开发的初学者。我正在尝试玩一些 angular 东西，但完全弄乱了控制器。这是我的主要 html 文件

<!--main.html-->
<html>
  <head>
    <title>Chirp</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
    <script src="javascripts/chirpApp.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="stylesheets/style.css">
  </head>
  <body ng-app="chirpApp">
    <div id='main' class="container" ng-controller="mainController">
      <div class="col-md-offset-2 col-md-8">
        <div class="clearfix">
          <form ng-Submit="post()">
            <input required type="text" class="form-control" placeholder="Your name" ng-model="newPost.created_by" /> 
            <textarea required class="form-control" maxlength="200" rows="3" placeholder="Say something" ng-model="newPost.text"></textarea>
            <input class="btn submit-btn pull-right" type="submit" value="Chirp!" />
          </form>
          <div id="post-stream">
            <h4>Chirp Feed</h4>
                <div class="post" ng-repeat="post in posts | orderBy:'created_at':true" ng-class-odd="'odd'" ng-class-even="'even'"> 
                  <p>{{post.text}}</p>
                <small>Posted by @{{post.created_by}}</small>
                <small class="pull-right">{{post.created_at | date:"h:mma 'on' MMM d, y"}}</small>
                </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

我创建了另一个 html 文件用于注册。这是它的代码。

<!--register.html-->
<html>
  <head>
    <title>Chirp</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
    <script src="javascripts/chirpApp.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="stylesheets/style.css">
  </head>
  <body ng-app="chirpApp">
    <div id='main' class="container" ng-controller="authController">
      <form class="form-auth" ng-submit="register()">
        <h2>Register</h2>
        <p class="text-warning">{{error_message}}</p>
        <input type="username" ng-model="user.username" placeholder="Username" class="form-control"><br>
        <input type="password" ng-model="user.password" placeholder="Password" class="form-control"><br>
        <input type="submit" value="Register" class="btn btn-primary" />
      </form>
    </div>
  </body>
</html>

我为注册和发帖创建了两个独立的控制器。第一个控制器运行良好，但每当我尝试添加第二个控制器时，我都会收到一条错误消息。这是我的控制器的代码。

//chirpApp.js
var app = angular.module('chirpApp', []);

app.controller('mainController', function($scope){
  $scope.posts = [];
  $scope.newPost = {created_by: '', text: '', created_at: ''};

  $scope.post = function(){
    $scope.newPost.created_at = Date.now();
    $scope.posts.push($scope.newPost);
    $scope.newPost = {created_by: '', text: '', created_at: ''};
  };
});

app.controller('authController', function($scope){
  $scope.user = {username: '', password: ''};
  $scope.error_message = '';

  $scope.login = function(){
    //placeholder until authentication is implemented
    $scope.error_message = 'login request for ' + $scope.user.username;
  };

  $scope.register = function(){
    //placeholder until authentication is implemented
    $scope.error_message = 'registeration request for ' + $scope.user.username;
  };
});

我在 chrome 控制台中收到以下错误：

Error: [ng:areq] http://errors.angularjs.org/undefined/ng/areq?p0=authController&p1=not%20a%20function%2C%20got%20undefined
    at Error (native)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:6:453
    at tb (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:18:250)
    at Oa (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:18:337)
    at $get (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:61:288)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:48:476
    at q (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:7:367)
    at S (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:48:342)
    at h (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:43:59)
    at h (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:43:76)

main.html 工作正常，数据绑定成功。问题出在 register.html 页面上。我想 authController 没有被绑定

任何人都可以建议我最好的实施方式吗？为什么控制器变得不确定？

Answer 1

试试下面的清单：

angularjs 库包含在
ng-app=".." 指令在 index.html
..path/to/module 和 index.html
模块和控制器定义正确（拼写、语法等）

控制器示例（如果不使用全局 angular var:

    app.controller('AppController', ['$http', '$scope', '$log',
        function($http, $scope, $log) {
          // TODO: implement
        }
    ]);

希望对您有所帮助。

Answer 2

这是您文件的插件

http://embed.plnkr.co/6jNXImBddYqjK23FCWUy/preview

您的应用程序按预期运行。请检查您的核心文件是否已加载。

希望对您有所帮助

your code

Answer 3

当您使用 AngularJS 控制器子生成器创建新控制器时，您必须重新启动 Grunt。

控制器不是函数得到未定义的错误消息 angular js

Controller not a function got undefined error message angular js

javascript

angularjs

angularjs-controller