Module not found in angularjs

All we need is an easy explanation of the problem, so here it is.

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?

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 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', [])

Method 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

Method 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>

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply