Angular: Controller is undefined when adding a directive

Question

I get the following error when adding a directive to my site:

Error: [ng:areq] Argument 'MainController' is not a function, got undefined

The error only occurs when I include the welcome-directive (welcome.js) in my site. If the import is removed the controller works.

Body of my index.html

<body ng-app="my-app">
  <div ng-controller="MainController">
    <welcome></welcome>
  </div>

  <!-- Angular -->
  <script src="bower_components/angular/angular.js"></script>
  <script src="js/app.js"></script>
  <script src="js/controllers/mainController.js"></script>
  <!-- Without this line the controller works -->
  <script src="js/directives/welcome.js"></script>
</body>

app.js

(function() {
  var app = angular.module('my-app', []);
})();

mainController.js

angular.module('my-app', [])
  .controller('MainController', ['$scope', function($scope) {
    console.log('Controller working');
  }]);

welcome.js

angular.module('my-app', [])
  .directive("welcome", function() {
    return {
      restrict: "E",
      template: "<div>Test test.</div>"
    };
  });

Satpal · Accepted Answer · 2015-06-01 16:39:27Z

6

You are redefining the module. Define module only once.

when used as angular.module('my-app', []) it defined the module this should be used only once. When you want retrieve it. then use angular.module('my-app')

Use

angular.module('my-app')  //Notice remove []
  .directive("welcome", function() {
  });

edited Jun 1, 2015 at 16:39

answered Jun 1, 2015 at 16:37

Satpal

134k13 gold badges168 silver badges171 bronze badges

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

3 Comments

Davin Tryon Over a year ago

in both the controller and the directive definitions.

fwind Over a year ago

Thanks, that did it! Do I always leave out the brackets when I have no dependencies?

Satpal Over a year ago

@fwind, You need to define Module only once in entire application with whatever dependencies you have on module level.

tekkavi · Accepted Answer · 2015-06-01 16:40:22Z

3

passing a 2nd argument like this angular.module('my-app', []) creates a new module, use it only once.

To retrive a module use var module = angular.module('my-app') and use module.controller(... or module.directive(.... etc.,

answered Jun 1, 2015 at 16:40

tekkavi

89411 silver badges19 bronze badges

Collectives™ on Stack Overflow

Angular: Controller is undefined when adding a directive

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related