AngularJS: Uncaught Fehler: [$ injector: nomod] Modul _ ist nicht verfügbar! | Mehrere Verweise auf Modul

Question

Ich versuche derzeit, ein einzelnes AngularJS-Modul innerhalb verschiedener Direktiven und Dienste wie dem folgenden zu referenzieren.

module.js

(function() { 
    'use strict'; 

    angular.module('operations.setup.holidays.calendar', []); 

})(); 

Wenn ich versuche, es zu verweisen in einer Richtlinie/service/Controller es funktioniert gut, aber wenn ich versuche, es in etwa eine Richtlinie zu verweisen und einen Service, den ich erhalten: Uncaught Error: [$injector:nomod] Module 'operations.setup.holidays.calendar' is not available!

directive.js(funktioniert nur, wenn dies die einzige Sache ist, Referenzierung 'operations.setup.holidays.calendar')

(function() { 
    'use strict'; 

    angular 
     .module('operations.setup.holidays.calendar') 
     .directive('yearlyCalendarDirective', yearlyCalendarDirective); 

    function yearlyCalendarDirective(){ 
     return{ 
      template: "<h1>Year Calendar Directive</h1>" 
     }; 
    } 
})(); 

service.js(Zugabe von etwas wie dies bewirkt, dass der angegebene Fehler)

(function(){ 
    'use strict'; 

    angular 
     .module('operations.setup.holiday.calendar') 
     .service('Calendar',Calendar); 

    function Calendar(){ 

    } 
})(); 

Adding something like .module('operations.setup.holiday.calendar',[]) gets rid of the error, but from what I understand this creates a new module instead of referencing the old one?

Edit: Hier ist eine JSFiddle

Answer 1

Nach this answer, ruft anonyme Funktionen garantieren nicht, dass die Funktionen in der aufgerufen werden Auftrag.

vielleicht können Sie den gesamten Code in einer anonymen Funktion laden:

(function() { 
    'use strict'; 
    angular.module('CalendarApp', []); 

    angular.module('CalendarApp').directive('yearlyCalendar', function() { 
    return { 
     restrict: 'E', 
     scope: {}, 
     template: '<span>Here is a YEARLY calendar</span>' 
    } 
    }); 

    angular.module('CalendarApp').directive('monthlyCalendar', function() { 
    return { 
     restrict: 'E', 
     scope: {}, 
     template: '<span>Here is a MONTHLY calendar</span>' 
    } 
    }); 

    angular.module('CalendarApp').service('CalendarData', function() { 
    function CalendarData() { 
     vm = this; 
     vm.today = new Date(); 
     return new CalendarData(); 
    } 
    }); 
})(); 

, wenn Sie diesen Code in vielen Dateien getrennt haben, nicht anonyme Funktionen verwenden (den Code direkt anstatt Aufruf)