Module not found in angularjs

Question

I want to wrap this https://gist.github.com/nblumoe/3052052 in a module. I just changed the code from TokenHandler to UserHandler, because on every api request I want to send the user ID.

However I get module UserHandler not found in firebug console. Here is my full code: http://dpaste.com/1076408/

The relevent part:

angular.module('UserHandler').factory('UserHandler', function() {
    var userHandler = {};
    var user = 0;

    /...

    return userHandler;
});

angular.module('TicketService', ['ngResource', 'UserHandler'])
       .factory('Ticket', ['$resource', 'UserHandler',
                function($resource, userHandler){

    var Ticket = $resource('/api/tickets/:id1/:action/:id2',
    {
        id1:'@id'
    }, 

    { 
        list: {
            method: 'GET'
        }
    }); 

    Ticket = userHandler.wrapActions( Ticket, ["open", "close"] );

    return Ticket;
}]); 

Any idea why this happens? How to fix it?

Answer 1

Many has fallen into the same trap. Me included.

The following does not define a new module. It will try to retrieve a module named UserHandler which isn't defined yet.

angular.module('UserHandler')

Providing a (empty) array of dependencies as the second argument will define your module.

angular.module('UserHandler', [])

Answer 2

I am new to javascript and have spent a couple of hours to discover my issue. The module initialization function can be ignored. To avoid this, do not forget to add empty parenthesis to the end of a function:

(function() {
    "use strict";
    var app = angular.module("app", []);
    })(); //<<---Here

Answer 3

Also, don't forget to add the new module in your index.html:

<script src="app/auxiliary/test.module.js"></script>
<script src="app/auxiliary/test.route.js"></script>
<script src="app/auxiliary/test.controller.js"></script>