javascript - 在前端加载一堆angular指令和其他js文件

Question

angular 是否有最佳实践来拥有外部 javascript 文件的通用列表并将该列表导入不同的模板 HTML 文件？我的想法是我可以拥有一个全局脚本列表，我只需将其导入到任何模板中。

所以基本上我想要的是一个包含所有 js 脚本的 html 文件。该文件可能包含 Angular 依赖的指令，即

<script src="my_script.html">
<script src="another_script.html">
<script src="angular_directive.html">
...

然后我想将它们导入 angular_template.html 和 another_angular_template.html。有没有在前端执行此操作的好方法？我发现的主要问题是我想在此全局文件中包含 Angular 指令，但如果您这样做，则 Angular 无法首先初始化，因为该应用程序所依赖的文件中可能存在指令。因此，像 ng-include 这样的东西并不能解决问题。

如果有必要，我愿意使用普通的旧 javascript 或 jquery。我将如何做到这一点？

Answer 1

如果它是您想要的脚本，请尝试 RequireJS - http://requirejs.org/docs/start.html

它不仅会在单个包含之后为您处理所有这些，而且还会只加载您需要的内容，并且会并行加载脚本。有多种这样的解决方案，但我建议深入研究这个解决方案，看看它是如何完美解决的。

您最终将在您的 html 文件中只有一个脚本 -- 如下所示:

<script data-main="scripts/main" src="scripts/require.js"></script>

然后您将拥有一个脚本(在本例中为 main.js)，该脚本将保存您想要提供的脚本的配置，以及您想要保留的任何相互依赖性。您的脚本看起来像这样:

define(['angular.js','myscript.js'], function() {
   ...your dependent script goes here...
});

此外，它有一个很好的配置系统，因此您可以在一个地方手动设置依赖项。然后你几乎可以省去我上面写的模块用语。但是模块已经存在了一段时间，拥有它是一件好事。

或者，$script 做完全相同的事情。功能不全，但很小 -- http://www.dustindiaz.com/scriptjs