AngularJS/Jade Error: Argument 'MyController' is not a function, got undefined (MEAN)

Question

I know variations of this question have already been asked several times, but I've tried several suggested solutions for other OPs, haven't been able to resolve this, and would appreciate some clarification.

I'm working with the basic mean todo list app (http://www.mean.io/). After implementing a simple controller I'm running into the "Error: Argument 'nameOfMyController' is not a function, got undefined."

Here's where I'm at:

app.js (boilerplate)

window.app = angular.module('mean', ['ngCookies', 'ngResource', 'ui.bootstrap', 'ui.route', 'mean.system', 'mean.articles' ]);

angular.module('mean.system', []);
angular.module('mean.articles', []);

I've tried modifying what's referenced here, like, for example, adding mean.controller to the array but that clearly isn't the right way to do it because it tells me the module doesn't exist.

here's my taskController.js (a mean tutorial I followed made taskController a standalone function but I'm declaring it as a constructor the way angular's docs say to)

var mean = angular.module('mean',[]);

mean.controller('taskController', function taskController($scope){

   $scope.todos = [];

   $scope.doneFilter = { done : true };
   $scope.notDoneFilter = { done : false };

   $scope.setTodos = function(todos){
       $scope.todos = todos;
   };

});

I also tried angular.module('mean.system').controller('taskController', function taskController($scope){ ... }, same result.

ok now for the views: included ng-app in default.jade

!!! 5
  html(ng-app='mean', lang='en', xmlns='http://www.w3.org/1999/xhtml', xmlns:fb='https://www.facebook.com/2008/fbml', itemscope='itemscope', itemtype='http://schema.org/Product')
    include ../includes/head
    body
     ...
     include ../includes/foot

then in index.jade I have:

extends layouts/default

block head
  script(type='text/javascript', src='/js/controllers/taskController.js')

block content
  section(data-ng-view)
  div.container(ng-controller="taskController", ng-init="setTodos( #{JSON.stringify(todos)} )")
  ...
  div.row(ng-repeat="todo in todos | filter:notDoneFilter")
    label.checkbox
      input(type="checkbox", ng-model="todo.done")
      | {{ todo.description }}
    span.datestring
      i {{ todo.due | date: 'MMM d, yyyy' }}    
  ...
  div.row(ng-repeat="todo in todos | filter:doneFilter")
    label.checkbox
      input(type="checkbox", checked="true")
        del {{ todo.description }}
      span.datestring
        i {{ todo.due | date: 'MMM d, yyyy' }}

foot.jade inserts:

//AngularJS
script(type='text/javascript', src='/lib/angular/angular.js')
script(type='text/javascript', src='/lib/angular-cookies/angular-cookies.js')
script(type='text/javascript', src='/lib/angular-resource/angular-resource.js')

I don't think I'm missing any angular directives and the controller itself should work, so I'm assuming this is a basic app architecture problem where I don't understand how things fit together. Any help would be appreciated.

Answer 1

This error mostly comes when angularjs is not able to locate the controller in any module. This can happen when you accidentally redefine the module. In your case i see that

window.app = angular.module('mean', ['ngCookies', 'ngResource', 'ui.bootstrap', 'ui.route', 'mean.system', 'mean.articles' ]);

and then

var mean = angular.module('mean',[]);

This syntax redefine the module.

To get the existing module using angular.module('mean') without the second parameter.

Answer 2

I just had this issue now. I tried all the suggestions above and nothing worked. Then, I downgraded AngularJS from version 1.3.9-build.3746 to version 1.2.8. That is what I get for using beta versions.