Question

对这个新手问题道歉，可能是明显的答案。我试图将我的应用程序分解为更小的文件，并使用角度模块加载语法在运行时包含它们。感谢您的帮助，如果这个问题不适合鼻烟，请再次道歉。

我得到的错误是：

Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:modulerr] Failed to instantiate module eventBus due to:
Error: [$injector:nomod] Module 'eventBus' is not available! You either misspelled the modu...<omitted>...1)

这是我的网页：

<html>
<head>
...
  </head>
  <body ng-app="myApp">

    <!-- Add your site or application content here -->
    <div id="m" class="section app-viewport" bn-document-click="handleClick( $event )" ng-view="" ng-controller="MainController" ng-keydown="keyPress($event);"></div>

    </script>
    <!--[if lt IE 9]>
    <script src="bower_components/es5-shim/es5-shim.js"></script>
    <script src="bower_components/json3/lib/json3.min.js"></script>
    <![endif]-->

    <!-- build:js scripts/vendor.js -->
    <!-- bower:js -->
    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
    <script src="bower_components/angular-resource/angular-resource.js"></script>
    <script src="bower_components/angular-cookies/angular-cookies.js"></script>
    <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>
    <script src="bower_components/matchmedia/matchMedia.js"></script>
    <script src="bower_components/matchmedia-ng/matchmedia-ng.js"></script>
    <!-- endbower -->
    <!-- endbuild -->

        <!-- build:js({.tmp,app}) scripts/scripts.js -->
        <script src="scripts/app.js"></script>
        <script src="scripts/services/eventBus.js"></script>
        <script src="scripts/services/gameState.js"></script>
        <script src="scripts/controllers/mainController.js"></script>
        <script src="scripts/controllers/challengeControllers.js"></script>
        <script src="scripts/controllers/optionControllers.js"></script>
        <script src="scripts/controllers/rescueControllers.js"></script>
        <script src="scripts/controllers/dayListControllers.js"></script>
        <script src="scripts/controllers/bankBalanceControllers.js"></script>
        <script src="scripts/controllers/canvasControllers.js"></script>
        <script src="scripts/controllers/playerControllers.js"></script>
        <script src="scripts/directives/layoutManagerDirectives.js"></script>
        <!-- endbuild -->

</body>
</html>

app.js：

'use strict';

var myApp = angular.module('myApp', [
    'matchmedia-ng',
    'ngCookies',
    'ngResource',
    'ngSanitize',
    'ngRoute',
    'eventBus',
    'gameState',
    // controllers
    'mainController',
    'challengeControllers',
    'optionControllers',
    'rescueControllers',
    'bankBalanceControllers',
    'canvasControllers',
    'dayListControllers',
    'playerControllers',
    // directives
    'layoutManagerDirectives'
    // services

  ]);



myApp.config(function ($routeProvider) {
  $routeProvider
    .when('/', {
      templateUrl: 'views/main.html',
      controller: 'MainController'
    })
    .otherwise({
      redirectTo: '/'
    });
});

和eventBus.js：

var myApp = angular.module('myApp');

myApp.factory("eventBus", function ($rootScope) {
  var eventBus = {};
  eventBus.message = '';

  eventBus.prepForBroadcast = function(msg) {
    this.message = msg;
    this.broadcastItem(msg);
  };

  eventBus.broadcastItem = function(msg) {
    console.log('eventBus message: ' + eventBus.message);
    $rootScope.$broadcast('handleBroadcast', msg );
  };

  return eventBus;
});

Answer 1

您的应用声明了对名为eventBus的模块的依赖关系，但您通过工厂将eventBus定义为服务。模块仅依赖于其他模块。如果您希望以这种方式将eventBus作为模块依赖项，那么您需要将eventBus脚本更改为如下所示：

var myEventBusModule = angular.module('eventBus', []);

myEventBusModule.factory("eventBusService", function ($rootScope) {
  var eventBus = {};
  eventBus.message = '';

  eventBus.prepForBroadcast = function(msg) {
    this.message = msg;
    this.broadcastItem(msg);
  };

  eventBus.broadcastItem = function(msg) {
    console.log('eventBus message: ' + eventBus.message);
    $rootScope.$broadcast('handleBroadcast', msg );
  };

  return eventBus;
});

Answer 2

您的＆＃34; eventBus＆＃34;只是你的＆＃34; myApp＆＃34;的工厂。不是一个独立的模块。

试试这个：

eventBus.js

var module = angular.module('eventBus', []);
module.factory('eventBus', ["$rootScope", function($rootScope){
   // Content of your factory...
}]);

或者只是删除＆＃39; eventBus＆＃39;来自app-module的依赖项。

angularjs分布式模块无法加载

2 个答案: