Controller not a function got undefined error message angular js

Question

I am a beginner with MEAN Stack development. I was trying out to play around with some angular stuff but got completely messed up the the controllers. Here is my main html file

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

I have created another html file for registration. here is the code for it.

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

I have created two separate controllers for registration and posts. the first controller works nicely but whenever I am trying to add a second controller I am getting an error message. Here is the code for my controllers.

//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;
  };
});

I am getting the following error in the chrome console :

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 works fine and the data is being binded successfully. The issue is with the register.html page. I suppose the authController is not getting binded

Can anyone suggest me the best way of implementing the same? And why the controller is getting undefined?

What is the actual error message? Also, could you describe the problem better? When does the error occur? What works and what doesn't work? — Phil
– Phil, Commented May 1, 2015 at 1:06
Hey arindam, I just tried out your code and its working fine without any error. Please check in chrome dev tool if your JS file is loaded correctly(not throwing 404)because I tried with Inline javascript. — prashant
– prashant, Commented May 1, 2015 at 1:10
@Phil : he has clearly mentioned "And why the controller is getting undefined?" And IMHO we should not discourage new developers from posting questions. — prashant
– prashant, Commented May 1, 2015 at 1:13
@prashanth yes but when does the error occur? On main.html, register.html or both? Which controller is undefined? I only asked for more information, not sure how you equate that to discouraging — Phil
– Phil, Commented May 1, 2015 at 1:19
@ArindamDawn after submitting its gives me "registeration request for asdasd" where asdasd is username. — prashant
– prashant, Commented May 1, 2015 at 2:01

daxeh · Accepted Answer · 2015-05-01 01:27:01Z

1

Try the following checklist:

angularjs lib is included in
ng-app=".." directive is in index.html
..path/to/module and other controllers in index.html
module and controllers defined correctly (spelling, syntax etc)

Controller example (if not using global angular var:

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

Hope this helps.

answered May 1, 2015 at 1:27

daxeh

1,0858 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Alhuck · Accepted Answer · 2015-05-01 05:18:48Z

0

Here is the plunker of your files

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

Your application works as expected. Please check your core files is loaded or not.

Hope this helps

your code

edited May 1, 2015 at 5:18

answered May 1, 2015 at 5:10

Alhuck

1,0298 silver badges11 bronze badges

Comments

Aminovski · Accepted Answer · 2015-09-10 17:51:43Z

0

When you create a new controller with the AngularJS Controller Sub-Generator you have to reboot Grunt.

answered Sep 10, 2015 at 17:51

Aminovski

1451 silver badge6 bronze badges

Collectives™ on Stack Overflow

Controller not a function got undefined error message angular js

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related