为什么我的javascript文件没有加载?

时间:2013-06-19 21:15:37

标签: javascript html angularjs angularjs-module

我是JavaScript& AngularJS。我正在构建一个与楼宇管理系统对话的应用程序:它有一个名为“JaceMod”的模块,其中包含一个与BMS联系并从中检索数据的服务。我正在使用Dygraphs为图形数据添加功能,并且我已经创建了一个指令来实例化图形并用数据填充它。

我想把我的Dygraphs指令放在一个名为'dygraphs'的模块中,在一个单独的文件'angular-dygraphs.js'中,所以我可以在以后再使用它,并且需要这个模块作为'JaceMod中的依赖项”。像这样:

'use strict';
console.log('Loading angular-dygraphs.js');
angular.module('dygraphs', []);

angular.module('dygraphs').directive('mrhDygraph', function ($parse) {
    return {
...etc ...
    };
});

然后是主文件'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);
});

html看起来像这样:

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

但是当我加载这个html时,我看到我的控制台消息'Loading angular-dygraphs.js',然后是一个错误'错误:没有模块:JaceMod'。我从未在app.js中看到日志消息。如果我切换最后2个javascript文件的加载顺序,我看到app.js加载,错误消息是'错误:没有模块:dygraphs'。似乎永远不会加载第二个列出的文件。

如果我将angular-dygraphs.js中的代码复制到app.js中,将该指令保留在自己的模块中,则可以正常工作。

为什么会这样?是不是可以将模块放在自己的文件中,还是什么?文件没有多大帮助...

已添加

html&amp; js文件都在同一个目录中,包括dygraphs&amp;角度库。我正在从文件加载html,没有涉及服务器。

更新

我将angular-dygraphs.js中的所有内容复制到app.js中,并注释掉了整个angular-dygraphs.js:仍然遇到问题,app.js无法加载。

1 个答案:

答案 0 :(得分:6)

您的angular-dygraphs.js脚本标记未关闭,因此它永远不会读取app.js.脚本标签不能自动关闭:

<script src="angular-dygraphs.js"/>

应该是

<script src="angular-dygraphs.js"></script>