Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript AngularJS Basics (1.x) Controllers and Scope Understanding Scope In Angular

Console errors existing before I make any changes.

Hi. I've been getting errors in every workspace related to this part of the Angular instruction. This ng-click directive is supposed to fire the controller function and print 'Hello there! This is the helloworld controller function, in the mainCtrl' to the console, but it doesn't. I'm using Chrome.

From the console: Uncaught SyntaxError: Unexpected token .
app.js:2 which is this line:

.controller('mainCtrl', function($scope){

And then this from: angular.js: 4408 :

Uncaught Error: [$injector:modulerr] Failed to instantiate module todoListApp due to: Error: [$injector:nomod] Module 'todoListApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument. http://errors.angularjs.org/1.4.4/$injector/nomod?p0=todoListApp at http://port-80-ymhtuoroem.treehouse-app.com/vendor/angular.js:68:12 at http://port-80-ymhtuoroem.treehouse-app.com/vendor/angular.js:1983:17 at ensure (http://port-80-ymhtuoroem.treehouse-app.com/vendor/angular.js:1907:38) at module (http://port-80-ymhtuoroem.treehouse-app.com/vendor/angular.js:1981:14) at http://port-80-ymhtuoroem.treehouse-app.com/vendor/angular.js:4385:22 at forEach (http://port-80-ymhtuoroem.treehouse-app.com/vendor/angular.js:336:20) at loadModules (http://port-80-ymhtuoroem.treehouse-app.com/vendor/angular.js:4369:5) at createInjector (http://port-80-ymhtuoroem.treehouse-app.com/vendor/angular.js:4294:11) at doBootstrap (http://port-80-ymhtuoroem.treehouse-app.com/vendor/angular.js:1655:20) at bootstrap (http://port-80-ymhtuoroem.treehouse-app.com/vendor/angular.js:1676:12) http://errors.angularjs.org/1.4.4/$injector/modulerr?p0=todoListApp&p1=Erro…F%2Fport-80-ymhtuoroem.treehouse-app.com%2Fvendor%2Fangular.js%3A1676%3A12)

This is what the workspace loads, which I don't believe I've changed.

<!doctype html>
<html lang="en">
<head>
  <title></title>
  <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
  <link href='styles/main.css' rel='stylesheet' type="text/css">
</head>
<body ng-app="todoListApp">
  <h1>My TODOs</h1>
    <div ng-controller="mainCtrl" class="list">
       <input type="checkbox"/>
       <label class="editing-label">A sample todo!</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>
</html>
angular.module("todoListApp", []); 
.controller('mainCtrl', function($scope){
  $scope.helloworld = function() {
   console.log('Hello there! This is the helloworld controller function, in the mainCtrl'); 
  }
});

Thanks!

2 Answers

Hi Adam,

Try removing the semicolon from the end of the first line (the module declaration). It's 'stopping' that statement and keeping the interpreter from knowing that .controller(...) is a continuation of it, so it doesn't know what to do with that code when it reaches it.

An alternative method for writing module/controller syntax is:

var myApp =angular.module("todoListApp", []);

myApp.controller(....etc)

but it doesn't look like they're doing that in this section.

Thanks, Cena. That was it! I must have added that semicolon after all.