current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

Apologies for this newbie question and possibly obvious answer. I have tried to break up my app into smaller files and include them at runtime using angular's module loading syntax. Thank you for your help and again apologies if this question isn't up to snuff.

The error I am getting is:

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)

Here is my web page:

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

And 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: '/'
    });
});

and 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;
});
share|improve this question

2 Answers 2

up vote 1 down vote accepted

Your app is declaring a dependency on the module named eventBus, but you're defining eventBus as a service via factory. Modules only take dependencies on other modules. If you want to require your eventBus as a module dependency this way, you'll need to change your eventBus script to look like this:

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;
});
share|improve this answer
    
Thanks so very much, this distinction escaped me. I appreciate the very rapid response. It would appear that your answer is going to require me to change all the reference like this: $scope.eventBus = eventBus; to $scope.eventBus = eventBusService; ? which is of course a minor change. But I like to observe naming conventions, and your answer implies adding 'Service' to the name as per some convention. –  user3561344 May 13 at 15:15
    
If you want to use separate modules, then yes. If all you're looking to do is put the code in different files (I would recommend using modules but it's up to you), then all you need to do is remove the modules you haven't created from your app's dependencies. Make sense? –  Andrew Church May 13 at 15:17
    
Yes, thank you. I will be using separate modules, which I can do without changing the 'eventBus' littering my code to 'eventBusService' - but I may do that to follow convention. Thanks, Best regards! Brian –  user3561344 May 13 at 15:21
up vote 0 down vote

Your "eventBus" is only a Factory of your "myApp". Not an independent module.

Try this:

eventBus.js

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

Or simply remove the 'eventBus' from the dependencies of your app-module.

share|improve this answer
    
Thank you for your time and expertise! Best regards, Brian –  user3561344 May 13 at 15:22

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.