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

如果您将此代码分隔在许多文件中，请不要使用匿名函数（而是直接调用代码）