angular module injection error in when running my app

Question

I just started with Angular and I'm little bit confused with this error. I don't know exactly what I've done wrong, but my console is showing this error:

angular.js:38 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.8/$injector/modulerr?p0=app&p1=Error%3A%20%…(http%3A%2F%2Flocalhost%3A8080%2Flib%2Fangular%2Fangular.min.js%3A21%3A179)(…)

my html:

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
   <link rel="stylesheet" href="css/app.min.css">
   <script src="lib/angular/angular.min.js"></script>
   <script src="lib/angular-route/angular-route.min.js"></script>
   <script src="lib/angular-resource/angular-resource.min.js"></script>
   <script src="js/app.js"></script>
   <script src="js/controller.js"></script>
</head>
<body>
    test
</body>
</html>

and my app.js:

(function() {
   'use strict';
    angular.module('app', [
        'ngRoute',
        'ngResource',
        'mainController'
    ])
   .config(['$routeProvider', function() {
       routeProvider.when("/", {templateUrl: 'www/index.html', controller:      'mainController'})
   }])

   .controller('mainController', function($scope){
      alert();
   })
 })();

what is wrong ?

Developer · Accepted Answer · 2016-10-31 16:34:54Z

0

The mainController is not a module but a controller inside your app module. So injecting mainController does not make sense here. Remove the mainController injection from your modules dependencies array.

The other dependencies, ngRoute and ngResources are modules which your module is depending upon - for eg, $routeProvider is from the ngRoute module, so in order to get routeProvider, you need to inject the ngRoute module as dependency.

edited Oct 31, 2016 at 16:34

answered Oct 31, 2016 at 16:31

Developer

6,4703 gold badges20 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Developer Over a year ago

What is inside your controller.js file?

Sajeetharan · Accepted Answer · 2016-10-31 16:42:14Z

0

You don't have to inject controller as a dependency to the module

Change,

angular.module('app', ['ngRoute','ngResource','mainController'])

To

angular.module('app', ['ngRoute','ngResource'])

DEMO

edited Oct 31, 2016 at 16:42

answered Oct 31, 2016 at 16:29

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

1 Comment

Sajeetharan Over a year ago

@vbotio Check the demo attached in the answer

Mishegaz · Accepted Answer · 2016-10-31 16:51:32Z

First and foremost, do not inject the controller as a dependency. Remember: you are registering it after you create the module, and adding it to that model. Thus, it would make no sense to inject it at the time of creating the module. It doesn't exist yet. Makes sense?

Then some stuff to make life easier for you: separate out your app config stuff from your controller registrations. Have an app.js for example doing the code below. Notice I separated the steps, and I also create a config function that I then call in the app.config. This is just a bit more readable in the JavaScript mess we have to deal with.

(function() {
'use strict';

var app = angular.module('app', ['ngResource']);

var config = function(routeProvider){
    routeProvider.when("/", {templateUrl: 'www/index.html', controller:      'mainController'});
};

app.config(['$routerProvider'], config); 
}) 
})();

Then have a mainController.js containing the controller code and the registration of it. It'll be more future-proof for when you start adding more controllers and services and so on. Also, don't use $scope, use 'this' instead, you can use that from version 1.5 I think. Only place when you need to use $scope because 'this' doesn't work there is in angular charts, just a heads up ;)

(function ()
{    
'use strict';

var mainController = function ($scope,)
{
    var vm = this;

    vm.variable = "value";
};

angular.module('app').controller('mainController', ['', mainController]);
})();

Btw don't mind the strange indentation of the code snippets, the editor on this page is messing with me a bit ;)

Collectives™ on Stack Overflow

angular module injection error in when running my app

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related