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 Zailey Walls
Zailey Walls
5,427 Points

AngularJS: Why am I getting this error when adding a controller in my routes?

Erorr

Uncaught SyntaxError: Unexpected token :
angular.js:68 Uncaught Error: [$injector:nomod] Module 'appName' 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=appName(anonymous function) @ angular.js:68(anonymous function) @ angular.js:1983ensure @ angular.js:1907module @ angular.js:1981(anonymous function) @ main.js:1
angular.js:68 Uncaught Error: [$injector:modulerr] Failed to instantiate module appName due to:
Error: [$injector:nomod] Module 'appName' 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=appName
    at http://port-80-16mpqyi57w.treehouse-app.com/vendor/angular.js:68:12
    at http://port-80-16mpqyi57w.treehouse-app.com/vendor/angular.js:1983:17
    at ensure (http://port-80-16mpqyi57w.treehouse-app.com/vendor/angular.js:1907:38)
    at module (http://port-80-16mpqyi57w.treehouse-app.com/vendor/angular.js:1981:14)
    at http://port-80-16mpqyi57w.treehouse-app.com/vendor/angular.js:4385:22
    at forEach (http://port-80-16mpqyi57w.treehouse-app.com/vendor/angular.js:336:20)
    at loadModules (http://port-80-16mpqyi57w.treehouse-app.com/vendor/angular.js:4369:5)
    at createInjector (http://port-80-16mpqyi57w.treehouse-app.com/vendor/angular.js:4294:11)
    at doBootstrap (http://port-80-16mpqyi57w.treehouse-app.com/vendor/angular.js:1655:20)
    at bootstrap (http://port-80-16mpqyi57w.treehouse-app.com/vendor/angular.js:1676:12)
http://errors.angularjs.org/1.4.4/$injector/modulerr?p0=appName&p1=Error%3A…F%2Fport-80-16mpqyi57w.treehouse-app.com%2Fvendor%2Fangular.js%3A1676%3A12)

app.js

angular.module("appName", ["ngRoute"])
.config(function($routeProvider) {
  $routeProvider
  .when("/", function() {
    templateUrl: "templates/main.html",
    controller: mainController
  })
  .otherwise({
    redirectTo: "templates/main.html"
  })
});

main.js (controller)

angular.module("appName").controller("mainController", function($scope){
});

index.html

<!doctype html>
<html lang="en">
<head>
  <title>Angular App</title>
  <link href='styles/main.css' rel='stylesheet' type="text/css">
</head>
<body ng-app="appName">
  <div ng-view></div>
  <script src="vendor/angular.js"></script>
  <script src="vendor/angular-route.min.js"></script>
  <script src="scripts/app.js"></script>
  <script src="scripts/controllers/main.js"></script>
</body>
</html>

1 Answer

Aidan Pine
Aidan Pine
9,210 Points
Aidan Pine
Aidan Pine
9,210 Points

It's because you can't name your controller module the same name as your app module.

So, change your controllers file to this:

angular.module("appName.controllers", [])
.controller("mainController", function($scope){
});

and then change your app file to this:

angular.module("appName", ["ngRoute", "appName.controllers"])
.config(function($routeProvider) {
  $routeProvider
  .when("/", function() {
    templateUrl: "templates/main.html",
    controller: mainController
  })
  .otherwise({
    redirectTo: "templates/main.html"
  })
});

Also, you might want to actually give your app a name, instead of appName.

Zailey Walls
Zailey Walls
5,427 Points

Huh... I thought that was how Huston did it in the video...

Aidan Pine
Aidan Pine
9,210 Points
Aidan Pine
Aidan Pine
9,210 Points

Hm, you're totally right. That's how he does it in the video. I've just done it the way I posted so I was used to it, but you could definitely do it that way so long as you don't have the dependency [] brackets. So that doesn't solve your error. Sorry! I'll think about this some more.

Aidan Pine
Aidan Pine
9,210 Points
Aidan Pine
Aidan Pine
9,210 Points

I'm not sure if this will solve all your problems but I just realized that you didn't put your controller in quotations. It should be "mainController" not mainController:

angular.module("appName", ["ngRoute"])
.config(function($routeProvider) {
  $routeProvider
  .when("/", function() {
    templateUrl: "templates/main.html",
    controller: "mainController"
  })
  .otherwise({
    redirectTo: "templates/main.html"
  })
});