Why is my javascript file not loading?
I'm new to both JavaScript & 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.
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:
'use strict';
console.log('Loading angular-dygraphs.js');
angular.module('dygraphs', []);
angular.module('dygraphs').directive('mrhDygraph', function ($parse) {
return {
...etc ...
};
});
And then the main file 'app.js':
'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);
});
The html looks like this:
<html lang="en" ng-app="JaceMod">
<head>
<meta charset="utf-8">
<title>AngularJACE</title>
<style type="text/css">
body {font-family: Trebuchet MS,Helvetica,Arial,sans-serif; }
</style>
</head>
<body ng-controller="myCtrl">
<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;"/>
<script src="dygraph-combined.js"></script>
<script src="angular.js"></script>
<script src="angular-dygraphs.js"/>
<script src="app.js"></script>
</body>
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 app.js. 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.
If I copy the code from angular-dygraphs.js into app.js, leaving the directive in its own module, it works.
Why is this happening? Is it not possible to put modules in their own files, or something? The documents haven't been much help...
EDITED TO ADD
The html & js files are all in the same directory, including the dygraphs & angular libraries. I'm loading the html from file, no server involved.
UPDATE
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.
Answer
Your angular-dygraphs.js script tag isn't closed so it never reads app.js. Script tags cannot be self-closing:
<script src="angular-dygraphs.js"/>
should be
<script src="angular-dygraphs.js"></script>