CODEWITHSUNDEEP
javascriptangularjs
Tobias Mühl
Tobias Mühl

Reputation: 2058

AngularJS: Unable to define Controller

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>

Upvotes: 0

Views: 305

Answers (1)

Dan Saltmer
Dan Saltmer

Reputation: 2165

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/

Upvotes: 1

Related Questions