title: Why is my javascript file not loading?
body: <p>I'm new to both JavaScript &amp; AngularJS. I'm building an app which talks to a building management system: it has a module called 'JaceMod' containing a service to contact the BMS and retrieve data from it. I'm adding functionality to graph data using Dygraphs, and I've created a directive to instantiate a graph and populate it with data.</p>
  
  <p>I would like to put my Dygraphs directive into a module called 'dygraphs', in a separate file 'angular-dygraphs.js', so I can re-use it later, and require this module as a dependency in 'JaceMod'. Like this: </p>
  
  <pre><code>'use strict';
  console.log('Loading angular-dygraphs.js');
  angular.module('dygraphs', []);
  
  angular.module('dygraphs').directive('mrhDygraph', function ($parse) {
      return {
  ...etc ...
      };
  });
  </code></pre>
  
  <p>And then the main file 'app.js':</p>
  
  <pre><code>'use strict';
  console.log('Loading app.js');
  
  angular.module('JaceMod', ['dygraphs']);
  
  angular.module('JaceMod').factory('JaceData', function ($http, $timeout) {
      var JaceDataService = {};
  ...etc ...
      return JaceDataService;
  });
  
  angular.module('JaceMod').controller('myCtrl', function myCtrl($scope, JaceData) {
      JaceData.initialise($scope);
      JaceData.subscribe($scope);
  });
  </code></pre>
  
  <p>The html looks like this:</p>
  
  <pre><code>&lt;html lang="en" ng-app="JaceMod"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;AngularJACE&lt;/title&gt;
      &lt;style type="text/css"&gt;
          body {font-family:  Trebuchet MS,Helvetica,Arial,sans-serif; }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body ng-controller="myCtrl"&gt;
      &lt;div mrh-dygraph="graphData"
           mrh-dygraph-options="{xlabel: 'Local Time', legend: 'always',
                                showRangeSelector: true, labels: ['Time', 'Outside'],
                                ylabel: 'Temperature (ºC)', height: 420}"
           style="width: 100%; height 420px;"/&gt;
      &lt;script src="dygraph-combined.js"&gt;&lt;/script&gt;
      &lt;script src="angular.js"&gt;&lt;/script&gt;
      &lt;script src="angular-dygraphs.js"/&gt;
      &lt;script src="app.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>But when I load this html, I see my console message 'Loading angular-dygraphs.js', followed by an eror 'Error: No module: JaceMod'.  I never see the log message in <code>app.js</code>.  If I switch the load order of the last 2 javascript files round, I see that app.js loads and the error message is 'Error: No module: dygraphs'. The second listed file seems never to be loaded.</p>
  
  <p>If I copy the code from angular-dygraphs.js into app.js, leaving the directive in its own module, it works.</p>
  
  <p>Why is this happening? Is it not possible to put modules in their own files, or something? The documents haven't been much help...</p>
  
  <p><strong>EDITED TO ADD</strong></p>
  
  <p>The html &amp; js files are all in the same directory, including the dygraphs &amp; angular libraries. I'm loading the html from file, no server involved.</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I copied everything from angular-dygraphs.js into app.js, and commented out the entirety of angular-dygraphs.js: still getting the problem, app.js does not load.</p>