CODEWITHSUNDEEP
javascriptangularjs
Kiel L.
Kiel L.

Reputation: 29

Angular uncaught reference $injector

I'm new to angular and am having trouble set my project up. I have tried everything I have seen on google and stackoverflow(please do not send link to similar question).. None have worked. Im using angular 1.5.5 and refer to the cdn. here is what my code looks like. Thanks!

<html ng-app="boatup">
<link href="css/one-page-wonder.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
</head>


<body ng-controller="mainCtrl">
</body>

//in app.js
var app = angular.module('boatup', [
'boatup.controllers',
'ngRoute'
]);

//in controllers.js
app.controller('mainCtrl', function($scope) {  
 console.log("hello");
});

The error is angular.js:38 Uncaught Error: [$injector:modulerr] in angular.js 38

Thanks for any help in advance.

Upvotes: 0

Views: 57

Answers (3)

Aditya Singh
Aditya Singh

Reputation: 16650

Uncaught reference error in angular is caused when you are either using a module with no definition or the file with the module definition is not loaded in scripts. You have not declared the boatup.controllers module but added it as a dependency to your main module. Either declare and define boatup.controllers or remove it as a dependency as below:

angular.module('boatup', [
  'ngRoute'
]);

Upvotes: 1

k10der
k10der

Reputation: 726

As far as I can see from your description, you've started your project with creating different files with your application's modules. That's a good descision. But!

  1. You instantiated your main app's module and assigned it to global variable app. It's not that big deal, but better avoid creating unnecessary variable in global scope. And if you devine gloabl variable app in different files, it will be owerwritten with the last file loaded.
  2. You must load your module with controllers before main module. Otherwise you'll get [$injector:modulerr].

So in your case the following solution will work.

controllers.js

angular.module('boatup.controllers', [])
  .controller('mainCtrl', ['$scope', function($scope) {
    console.log('hello');
  }])

app.js

angular.module('boatup', ['ngRoute', 'boatup.controllers']);

And you need to load in appropriate order.

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-route.min.js"></script>
<script src="controllers.js"></script>
<script src="app.js"></script>

Upvotes: 0

Ebimie Abari
Ebimie Abari

Reputation: 96

Replace this with your code.

//in app.js
 angular.module('boatup', [
'ngRoute'
 ]);

//in controllers.js
angular.module('boatup')
.controller('mainCtrl', function($scope) {  
console.log("hello");
});

Upvotes: 0

Related Questions