AngularJS: Unable to define Controller

Question

I have just started developing with AngularJS a few days ago, and this issue really bugs me.

I keep getting this error:

Error: ng:areq
Bad Argument
Argument 'NewStudentCtrl' is not a function, got undefined

All other controllers are working since I am using them in other files, just NewStudentCtrl won't work. I have tried a lot of different things, only one worked: defining the controller using function NewStudentCtrl ($scope) {} inside the HTML file itself right before the use of the controller. The problem is that I want to split HTML and JS into seperate files.

Please note that the provided source is simplified a lot, there might be little indentation or syntax errors.

<html ng-app="myApp">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
  <script>var app = angular.module('myApp',[]);</script>
</head>
<body>
  <div ng-controller="NewStudentCtrl">
    <div ng-controller="AccountMenuCtrl">
    </div>

    <script src="js/account-menu.js">
      function AccountMenuCtrl ($scope) {
    }
    </script>

    <div ng-controller="OrtsteileCtrl">
        <option value="{{ortsteil.ID}}" ng-repeat="ortsteil in ortsteile">
          {{ortsteil.Name}}
        </option>
    </div>

    </div> <!-- end NewStudentCtrl -->

  <!-- Loading dependencies -->
  <script src="js/jquery-1.8.3.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/new-student.js">
    var app = angular.module("myApp");

    function NewStudentCtrl ($scope) {
    }
  </script>
  <script src="js/plz.js">
    angular.module('myApp').controller('OrtsteileCtrl', ['$scope', '$http',
      function($scope, $http) {

    }]);
  </script>
</body>
</html>

Why aren't you defining it like you define OrtsteileCtrl ? — Omri Aharon
– Omri Aharon, Commented Mar 1, 2014 at 10:32
I have tried that, it didn't work either. I then sticked to the functionsyntax because that worked HTML-inlined. — Tobias Mühl
– Tobias Mühl, Commented Mar 1, 2014 at 11:05

Dan Saltmer · Accepted Answer · 2014-03-01 11:02:22Z

1

EDIT: Scratch that, something I didn't realise is that angular is happy with mixing them.

The issue is because you are recreating your module several times:

Line 4: <script>var app = angular.module('myApp',[]);</script>

Line 28: var app = angular.module("myApp");

Line 34: angular.module('myApp').controller(...

fiddle: http://jsfiddle.net/uXpqL/

edited Mar 1, 2014 at 11:02

answered Mar 1, 2014 at 10:44

Dan Saltmer

2,16514 silver badges15 bronze badges

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

4 Comments

Tobias Mühl Over a year ago

I changed the code to use app instead of angular.module(), didn't change a thing

Dan Saltmer Over a year ago

Just to check something, but when you have in your question: <script src="js/account-menu.js">function AccountMenuCtrl ($scope) {}</script> you don't ACTUALLY have a src defined and script contents as well right? That's just showing the contents of your external file?

Dan Saltmer Over a year ago

Because aside from the multiple module declarations and the src tags, this is fine: plnkr.co/edit/5mMxvNf2dNVZ7XQoYG5F?p=info

Tobias Mühl Over a year ago

That's just showing the contents of your external file? - Yes. Fixing the multiple modules and another function did it here. It finally works :-) If anyone is curious: I used var as a function parameter, not knowing that var is a reserved word.

Collectives™ on Stack Overflow

AngularJS: Unable to define Controller

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related