How to debug this angular js code?

Question

When errors happen inside of angular, debugging seems impossible for me. I have this code:

<script>
    var my_app = angular.module("campaign_listing", ['$http']);
    var controllers = {};
    controllers.campaign_list_controller = function($http){
        var filters = {};
        var campaigns = {};
        this.update_fields = function(){
            console.log("update!");
        }
    }
    my_app.controller(controllers);
</script>

And it throws this error:

    angular.js:38Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.6/$injector/modulerr?p0=campaign_listing&p1…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.4.6%2Fangular.min.js%3A19%3A463)

And without the minified version:

Uncaught Error: [$injector:modulerr] Failed to instantiate module campaign_listing due to:
Error: [$injector:modulerr] Failed to instantiate module $http due to:
Error: [$injector:nomod] Module '$http' 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.6/$injector/nomod?p0=%24http

I'm not using routing, so that link actually confuses me. Can someone tell me what the problem is and how to debbug this in the future?

This is a dependency injection error. The $injector:modulerr usually pops up when the module is not declared properly, or declared at more than one place w.r.t the dependencies. Check your module declaration and initialization. In future, any error that starts with $injector will indicate something bad with the dependency injection. — akhurad
– akhurad, Commented Sep 28, 2015 at 15:40
and as suggested in one of the comments in stackoverflow.com/questions/18287482/… use the not minified version of angular to see what's the problem. — Pio
– Pio, Commented Sep 28, 2015 at 15:40
The problem is that you are adding as dependency the service $http. Just remove it as follow: var my_app = angular.module("campaign_listing", []); — Alessio Minichiello
– Alessio Minichiello, Commented Sep 28, 2015 at 15:44
you don't inject $http into a module as dependency either. It is a core service .. only inject within components — charlietfl
– charlietfl, Commented Sep 28, 2015 at 15:45

hgoebl · Accepted Answer · 2015-09-28 15:49:22Z

1

You could create a breakpoint in the line of my_app.controller() and step into the Angular code (good luck, that's hard for beginners).

Only from reading your code, I suggest to try this:

<script>
    var my_app = angular.module("campaign_listing", []);
    var campaign_list_controller = function($http){
        var filters = {};
        var campaigns = {};
        this.update_fields = function(){
            console.log("update!");
        }
    }
    my_app.controller('campaign_list_controller', campaign_list_controller);
</script>

I suppose you might get even more problems later, because this all doesn't look much like typical Angular code. My advise: try to exercise with the Tutorial first.

answered Sep 28, 2015 at 15:49

hgoebl

13.1k9 gold badges51 silver badges75 bronze badges

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

2 Comments

Vandervals Over a year ago

why do you delete the $http from the array?

hgoebl Over a year ago

As @charlietfl said, $http is a core module, so your application doesn't have to (and must not) add it as a dependency. Your controller can use this dependency as many other core services like e.g. $timeout. Does your code work now?

grepit · Accepted Answer · 2016-04-21 05:04:33Z

0

The previous answer is correct but this is can also happen when you do NOT include a Controller file. Example below shows at line 60 I had commented out the controller file but at line 13 I was actually referencing a AppCtrl. If I uncomment the line 60 the error goes away.

Here is what you would get on console:

answered Apr 21, 2016 at 5:04

grepit

22.6k6 gold badges110 silver badges82 bronze badges

Collectives™ on Stack Overflow

How to debug this angular js code?

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related