Error: $ injector: modulerr Module Error

Question

Error: $ injector: modulerr Module Error

Navigation

#1 by (3 votes)
#2 by (3 votes)

3

In a project I'm developing, I'm including the files:

app.js

angular.module('app', [
    'app.controllers',
    'app.services'
]

controller.js

angular.controller('HomeController', function($scope, HomeService)
{
    // code
})

services.js

angular.service('HomeService', function()
{
    // code
})

template.html

<html ng-app="app">
    <head>
        // scripts
    </head>
    <body ng-controller="HomeController">

        // body

    </body>
</html>

When I open the page, I find the error:

I searched in Google and in the few searches I found where it was the same error I'm having, I could not find a solution for it. Some say that some module or something is missing, but as I have shown, everything is inserted and the names are correct.

What can I be doing wrong?

angularjs

asked by anonymous 16.08.2014 / 23:54

2 answers

Sort List by by descending values Many relationships for many in RESTful service

score 3 · Answer 1

If your code is exactly as described, you have at no time declared these 'app.controllers' and 'app.services' modules thus causing the problem in the injection.

Following the line of your code, it should look something like this:

app.js

angular.module('app', [
    'app.controllers', 
     'app.services'
]);

controller.js

angular.module('app.controllers')
      .controller('HomeCtrl', ['$scope', function($scope) {
        // código aqui
      }]);

service.js

angular.module('app.services')
   .service('HomeService', [function] {
   // código aqui
   });

In this way, the modules you injected as dependency are declared. You could also do the following:

controller.js

var appControllers = angular.module('app.controllers');
appControllers.controller('HomeCtrl', [function () {
  // código aqui
}]);

If you want to add more controllers / services (use the same principle for declaration):

controller.js

angular.module('app.controllers')
      .controller('HomeCtrl', ['$scope', function($scope) {
        // código aqui
      }])
      .controller('OutroCtrl', [function () {
       // mais código aqui
      }])
;

or this way:

var appControllers = angular.module('app.controllers');

appControllers.controller('HomerCtrl', [function () {
 //código aqui
}]);

appControllers.controller('OutroCtrl', [function () {
 // mais código aqui
}]);

I hope this solves!

score 3 · Answer 2

The concept of the @Marco Antônio answer is correct, but it does contain some compilation errors, so here is a simpler way to do it:

Ah, and another thing, you do not need to attach the modules app.controllers and app.services if you are not creating them, but registering controllers and services direct in the main module.

Just Copy'n 'Paste

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

app.controller('HomeController',function($scope){
    //codigo aqui
});

app.service('HomeService', function(){
    //codigo aqui
});