Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Stephen Gehring
Stephen Gehring
11,203 Points

I get a error "angular.js:12416Error: [ng:areq] Argument 'mainCtrl' is not a function, got undefined"

When I try to run the $scope.helloWorld = function() from app.js I get this error? "angular.js:12416Error: [ng:areq] Argument 'mainCtrl' is not a function, got undefined"

app.js

angular.module("todoListApp", [])
.controller('mainCtrl', function($scope) {  
    $scope.helloWorld = function() {
        console.log("Hello World Controller");
    };
});

index.html

<body ng-app="todoListApp">
    <h1>My To Dos</h1>
    <div ng-controller="mainCtrl" class="list">
        <input type="checkbox" />
        <label class="editing-label">A Sample To Do!</label>
        <input class="editing-label" type="text" />
    </div>
    <div class="actions">
        <a href="">edit</a>
        <a href="" ng-click="helloWorld()">save</a>
        <a href="" class="Delete">delete</a>
    </div>
  <script src="vendor/angular.js" type="text/javascript"></script>
  <script src="scripts/app.js" type="text/javascript"></script>
</body>
Stephen Gehring
Stephen Gehring
11,203 Points

Ohhh! I see the issue.... My action need be inside the 'class="list"'

Stephen Gehring
Stephen Gehring
11,203 Points

Nope i am still getting the error =O\

angular.module("todoListApp", [])
.controller('mainCtrl', function($scope) {  
    $scope.helloWorld = function() {
        console.log("Hello World Controller");
    };
});

index.html

<body ng-app="todoListApp">
    <h1>My TODOs</h1>
    <div ng-controller="mainCtrl" class="list">
        <input type="checkbox" />
        <label class="editing-label">A Sample To Do 1!</label>
        <input class="editing-label" type="text" />

        <div class="actions">
            <a href="">edit</a>
            <a href="" ng-click="helloWorld()">save</a>
            <a href="" class="Delete">delete</a>
        </div>

    </div>
  <script src="vendor/angular.js" type="text/javascript"></script>
  <script src="scripts/app.js" type="text/javascript"></script>
</body>
Stephen Gehring
Stephen Gehring
11,203 Points

Ok this is weird... I did a search on stack overflow and found this thread http://stackoverflow.com/questions/17289236/error-argument-is-not-a-function-got-undefined. So I remove the brackets on the module method angular.module('todoListApp', []) to angular.module('todoListApp'). Then I tested the code and got 2 errors. So I then added the brackets back in a changed it back to angular.module('todoListApp', []). Ran it again and it started working... Weird can any one explain what happened in more detail?

1 Answer

mikes02
PLUS
mikes02
Courses Plus Student 16,968 Points
mikes02
mikes02
Courses Plus Student 16,968 Points

Just out of curiosity, wouldn't it be cleaner to write it:

angular.module("todoListApp", []).controller('mainCtrl', function($scope) {  
        $scope.helloWorld = "Hello World Controller";
    };
    console.log($scope.helloWorld);
});
Stephen Gehring
Stephen Gehring
11,203 Points

not sure! :) i was following the instructors formating :)