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?

possible duplicate of [AngularJS 1.2 $injector:modulerr](http://stackoverflow.com/questions/18287482/angularjs-1-2-injectormodulerr) — Pio, Sep 28 '15 at 15:38
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, Sep 28 '15 at 15:40
and as suggested in one of the comments in http://stackoverflow.com/questions/18287482/angularjs-1-2-injectormodulerr use the not minified version of angular to see what's the problem. — Pio, Sep 28 '15 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, Sep 28 '15 at 15:44
you don't inject `$http` into a module as dependency either. It is a core service .. only inject within components — charlietfl, Sep 28 '15 at 15:45

score 1 · Accepted Answer · answered Sep 28 '15 at 15:49

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.

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? — hgoebl, Sep 29 '15 at 07:45

score 0 · Answer 2 · answered Apr 21 '16 at 05:04

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:

How to debug this angular js code?

2 Answers2