Dependency Injection not working when defining module

Question

I am new to angular so please let me know my absolute newbie mistake I am making here.

I have a module and controller as such

(function () {
    'use strict';

    angular
        .module('myApp')
        .controller('myController', MyController);

I removed most of the code for brevity, just showing the relevant parts.

This code works perfect, the page loads and everything functions as expected.

However my problem comes when I want to inject something into the module

(function () {
    'use strict';

    angular
        .module('myApp', ['custom'])
        .controller('myController', MyController);

When I do this, my page doesn't load at all and I have no errors in the console output.

So I originally thought it was the custom module not loading properly, so I tried this

(function () {
    'use strict';

    angular
        .module('myApp', [])
        .controller('myController', MyController);

This doesn't even work, same again in that nothing loads, with empty square brackets, even though I see many examples like this.

I am using AngularJS 1.3.16.

Just to confirm, You can only define your module once. Are you sure module is not redefined? Where have you defined custom? — Satpal
– Satpal, Commented Jul 27, 2015 at 15:53
Does your html has the ng-app attribute somewhere? Like <body ng-app="myApp"> — MikeSW
– MikeSW, Commented Jul 27, 2015 at 15:58
Its only defined once. My project is really small at the moment and I am using angular.js not min.js but no difference. But shouldn't it work with empty brackets as well? I removed custom and just had empty brackets in there and it still didn't work, which means it is something else. — Adam
– Adam, Commented Jul 27, 2015 at 16:00
@MikeSW no ng-app, I use angular.bootstrap(document, ['myApp']); As I mentioned above though, everything works perfectly if I don't have those [] in parameters. — Adam
– Adam, Commented Jul 27, 2015 at 16:03
Whenever you use the [] in the line angular.module('myApp', []) you are defining the module 'myApp'. It doesn't matter if it's empty (no dependencies) or not empty ('custom' as a dependency). So if the code is working without the [] like angular.module(myApp') it means you have defined the module 'myApp' somewhere else on your code. — Denison Luz
– Denison Luz, Commented Jul 27, 2015 at 16:50

Joy · Accepted Answer · 2015-07-27 17:00:44Z

1

angular.module('myApp', []): defines a new app which overrides the previous definition.
angular.module('myApp'): retrieve the existing app.

When you use angular.module('myApp'), it runs well. So there must be somewhere in your code shows: angular.module('myApp', []).

angular.module('myApp', ['custom']) makes the page not working, because this new definition overrides the previous one.

answered Jul 27, 2015 at 17:00

Joy

9,59011 gold badges49 silver badges99 bronze badges

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

1 Comment

I didn't realize that you could define them more than once.