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 AngularJS Basics (1.x) Controllers and Scope Creating a Controller

Posted by Susan Rusie
Susan Rusie
10,671 Points

Why am I getting these errors?

I am getting 2 errors: "Uncaught SyntaxError: Unexpected Token . App.js:2" and "Uncaught Error: [$injector: modulerr] Failed to initiate module todolistApp due to:(...) Angular.js 4408. Here is my code:

module("angulartodoListApp", []);
.controller('mainCtrl', function($scope){
    $scope.helloWorld = function(){
        console.log("Hello there!  This is the helloWorld controller function inside the mainCtrl!");
    };
});

<!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 ng-click="helloWorld()">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
David Bath
David Bath
25,940 Points
David Bath
David Bath
25,940 Points

Don't change the AngularJS file, that's not where the problem is (despite the message! Don't you love Angular errors? Ha!)

Also, your module name doesn't match the ng-app attribute in the HTML.

1 Answer

David Bath
David Bath
25,940 Points
David Bath
David Bath
25,940 Points

Your first line ends in a semicolon. This isn't correct, because on the next line you are chaining the controller to it. I believe you just need to remove the semicolon.

Susan Rusie
Susan Rusie
10,671 Points

I realized after you pointed that out that I also had my h1 tag in the wrong place, forgot to add add "angular.module" instead of just "module" and then I had "angular" typed in in front of todoListApp in my app.js. so now I fixed the problem. I think I have been on the computer way too long today. Thanks again for your help.