Search code examples
javascriptangularjsangularjs-controllerangularjs-module

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


I started receiving the error and can't figure out what's wrong. Am I missing something?

js

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

app.controller('TasksCtrl', [
  '$scope', function($scope) {
    $scope.tasks = Task.query({
      status: 'incompleted'
    });

   $scope.completed_tasks = Task.query({
     status: 'completed'
    });

 }
]);

html

<div ng-controller='TasksCtrl' class='tasks-container'>
</div>

Solution

  • You should add Task service dependency as you are using it inside your controller.

    Controller

    app.controller('TasksCtrl', [
      '$scope', 'Task', function($scope, Task) {
        $scope.tasks = Task.query({
          status: 'incompleted'
        });
    
       $scope.completed_tasks = Task.query({
         status: 'completed'
        });
    
     }
    ]);
    

    I'm assuming that you have defined Task service already somewhere, if not then you should add it in your code.

    Edit

    Though I added an answer which does solve you other problem. I think you have declared your app twice in your code while defining service. At that time the initially assigned controller gets flushed from the module and you are getting the Error: [ng:areq] Argument 'TasksCtrl' is not a function error