AngularJS：未捕獲的錯誤：[$injector:nomod] 模塊 _ 不可用！ | 對模塊的多次引用

Question

我目前正在嘗試在各種指令和服務中引用單個 AngularJS 模塊，如下所示。

模塊.js

(function () {
    'use strict';

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

})();

當我嘗試在一個指令/服務/控制器中引用它時它工作正常，但是當我嘗試在一個指令和一個服務中引用它時，我得到： Uncaught Error: [$injector:nomod] Module 'operations.setup.holidays.calendar' is not available!

directive.js （如果這是唯一引用'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 （添加這樣的東西會導致指定的錯誤）

(function(){
    'use strict';

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

    function Calendar(){

    }
})();

添加類似.module('operations.setup.holiday.calendar',[])可以消除錯誤，但據我所知，這會創建一個新模塊而不是引用舊模塊？

編輯：這是一個JSFiddle

Answer 1

根據這個答案，調用匿名函數並不能保證函數會按順序調用。

也許您可以在一個匿名函數中加載所有代碼：

(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();
    }
  });
})();

如果您將此代碼分隔在許多文件中，請不要使用匿名函數（而是直接調用代碼）