Vandervals Vandervals - 7 months ago 39
Javascript Question

How to debug this angular js code?

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

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.