为什么我的 javascript 文件没有加载？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17201494/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why is my javascript file not loading?
提问by Max
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.
我是 JavaScript 和 AngularJS 的新手。我正在构建一个与建筑管理系统对话的应用程序：它有一个名为“JaceMod”的模块，其中包含一个用于联系 BMS 并从中检索数据的服务。我正在使用 Dygraphs 为图形数据添加功能，并且我创建了一个指令来实例化图形并用数据填充它。
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:
我想将我的 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 ...
};
});
And then the main file 'app.js':
然后是主文件“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 看起来像这样：
<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 (oC)', 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.
但是当我加载这个 html 时，我看到我的控制台消息“正在加载 angular-dygraphs.js”，然后是一个错误“错误：没有模块：JaceMod”。我从未在app.js. 如果我切换最后 2 个 javascript 文件的加载顺序，我会看到 app.js 加载并且错误消息是“错误：无模块：dygraphs”。第二个列出的文件似乎永远不会被加载。
If I copy the code from angular-dygraphs.js into app.js, leaving the directive in its own module, it works.
如果我将 angular-dygraphs.js 中的代码复制到 app.js 中，将指令保留在其自己的模块中，则它可以工作。
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.
html 和 js 文件都在同一个目录中，包括 dygraphs 和 angular 库。我正在从文件加载 html，不涉及服务器。
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.
我将 angular-dygraphs.js 中的所有内容复制到 app.js 中，并注释掉了整个 angular-dygraphs.js：问题仍然存在，app.js 无法加载。
回答by Jason Goemaat
Your angular-dygraphs.js script tag isn't closed so it never reads app.js. Script tags cannot be self-closing:
你的 angular-dygraphs.js 脚本标签没有关闭，所以它永远不会读取 app.js。脚本标签不能自闭合：
<script src="angular-dygraphs.js"/>
should be
应该
<script src="angular-dygraphs.js"></script>
