【发布时间】:2013-06-16 14:13:47
【问题描述】:
我是 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 时,我看到我的控制台消息“正在加载 angular-dygraphs.js”,然后是一个错误“错误:无模块:JaceMod”。我从未在app.js 中看到日志消息。如果我切换最后 2 个 javascript 文件的加载顺序,我会看到 app.js 加载并且错误消息是“错误:无模块:dygraphs”。列出的第二个文件似乎永远不会加载。
如果我将代码从 angular-dygraphs.js 复制到 app.js 中,将指令留在它自己的模块中,它就可以工作。
为什么会这样?不能将模块放在自己的文件中吗?文件没有太大帮助...
编辑添加
html 和 js 文件都在同一个目录下,包括 dygraphs 和 angular 库。我正在从文件中加载 html,不涉及服务器。
更新
我将 angular-dygraphs.js 中的所有内容复制到 app.js 中,并注释掉了整个 angular-dygraphs.js:仍然出现问题,app.js 无法加载。
【问题讨论】:
-
你确定 app.js 的某个地方没有错误吗?你见过
Loading app.js消息吗?你能创建一个显示问题的 plunker 吗? -
据我所知,app.js 中没有错误。我从首先加载的任何文件中看到“正在加载”消息,如果我将 angular-dygraphs.js 的内容复制并粘贴到 app.js 中,我会看到两个加载消息并且它按预期工作 - 图表显示并更新为接收实时数据。就像我说的,我是 Javascript 新手,我不知道如何创建一个 plunker :-( 不过我会研究一下。
标签: javascript html angularjs angularjs-module