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!

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 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">
  <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">
<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>

  <script src="vendor/angular.js" type="text/javascript"></script>
  <script src="scripts/app.js" type="text/javascript"></script>
angular.module("todoListApp", []); 
.controller('mainCtrl', function($scope){
  $scope.helloworld = function() {
   console.log('Hello there! This is the helloworld controller function, in the mainCtrl'); 


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", []);


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.