admin管理员组

文章数量:1361583

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-bined.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 mented out the entirety of angular-dygraphs.js: still getting the problem, app.js does not load.

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-bined.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 mented out the entirety of angular-dygraphs.js: still getting the problem, app.js does not load.

Share Improve this question edited Jun 20, 2013 at 19:58 Jason Goemaat 29.2k15 gold badges88 silver badges119 bronze badges asked Jun 19, 2013 at 21:15 MaxMax 2,1313 gold badges16 silver badges20 bronze badges 2
  • Are you sure there's not an error in app.js somewhere? Do you ever see the Loading app.js message? Can you create a plunker showing the problem? – Jason Goemaat Commented Jun 19, 2013 at 23:12
  • As far as I can tell there is no error in app.js. I see the 'loading' message from whichever file is loaded first, and if I copy & paste the contents of angular-dygraphs.js into app.js I see both loading messages and it works as expected - the graph is shown and updates as live data is received. Like I said, I'm new to Javascript & I have no idea how to create a plunker :-( I'll look into it though. – Max Commented Jun 20, 2013 at 6:52
Add a ment  | 

1 Answer 1

Reset to default 6

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>

本文标签: htmlWhy is my javascript file not loadingStack Overflow