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?

Answer 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.