index.html 中的多个脚本链接答案

【问题标题】：Multiple script links in index.htmlindex.html 中的多个脚本链接
【发布时间】：2015-03-16 15:37:54
【问题描述】：

我在 Angular 中有一个小项目。我试图以单一职责的方式保持一切，并且我对我的应用程序结构非常满意。唯一觉得不好看的就是index.html。所有 js 文件都包含在文件的底部，我不喜欢它的外观。我正在添加更多文件（控制器、服务等）和列表可以长得很长。

所以我的问题是：索引文件包含所有这些是否正常，或者是否有办法将所有这些移动到一个文件中并在 index.html 中引用？

<html>
<head>
    ...
</head>
<body>
    ...

    ...


<script src="assets/js/angular.js"></script>
<script src="assets/js/angular-route.js"></script>
<script src="assets/js/angular-touch.js"></script>
<script src="assets/js/angular-sanitize.js"></script>
<script src="assets/js/angular-animate.min.js"></script>
<script src="assets/js/jquery-2.1.3.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>

<script src="app/app.js"></script>
<script src="app/app.routes.js"></script>
<script src="controllers/controllerOne.js"></script>
<script src="controllers/controllerTwo.js"></script>
<script src="controllers/controllerThree.js"></script>
<script src="directives/directiveOne.js"></script>
<script src="directives/directiveTwo.js"></script>
<script src="services/serviceOne.js"></script>
<script src="services/serviceTwo.js"></script>
<script src="services/serviceThree.js"></script>

</body>
</html>

2015 年 7 月 4 日更新

我最终使用 Gulp。对于任何在这方面寻求帮助的人，我都遵循了这个小教程：https://medium.com/@dickeyxxx/best-practices-for-building-angular-js-apps-266c1a4a6917

【问题讨论】：

vidriduch，我的回答解决了你的问题吗？
我会用它作为提示...我会暂时搁置这个问题。我想进一步研究 Grunt、Gulp 和 require.js，试一试，我会相应地更新。
当然，欢迎您在研究后发表您的结论。祝你好运！

标签： html angularjs gulp

【解决方案1】：

据我所知，很少有可能的解决方案会自动为 index.html 注入脚本标签：

使用Gulp - 任务/构建运行器。您可以使用Gulp-Inject，即：

样式表、javascript 和 web 组件引用注入插件大口大口的
Grunt - JavaScript 任务运行器您可以将Grunt-Injector 用于：

将对文件的引用注入到其他文件中（将脚本和样式表考虑到 html 文件中）
另一个我没有使用的选项是RequireJS。见-http://www.startersquad.com/blog/angularjs-requirejs/

你可以找到很多关于 Gulp 和 Grunt 的讨论，两者都会让你的生活更轻松并解决你的问题。

见：

Grunt vs Gulp

Another Grunt vs Gulp

【讨论】：

【解决方案2】：

我的建议是使用某种任务运行器来连接所有文件，并将它们构建成单个“app.js”文件。

我个人的偏好是 gulp，但另一种流行的选择是 grunt。 Here 是一个很好的介绍使用 gulp 和 angular，我建议检查一下。

【讨论】：

【解决方案3】：

使用 require.js ，您可以在一行中管理所有标签

【讨论】：

【解决方案4】：

这种方法对于开发阶段来说是完全正常的，因为它有助于调试。你不应该担心它的外观。

但是，在将您的应用程序发布到生产环境时，您应该将所有脚本连接到一个文件中，因为这会显着延长您的引导时间。实现这一目标有不同的方法，通常它们涉及使用前端构建工具，如 Grunt 或 Gulp。由您决定哪种工具最适合您。

此外，require.js 具有内置的模块化和易于使用的连接工具，但有人认为 Angular 可以从使用它中受益，因为 Angular 有它自己的模块化。 require.js 的主要优点是不需要注意文件连接的顺序，因为它是工具的责任。不幸的是，它需要大量的样板代码。

【讨论】：

【解决方案5】：

作为一个简单的解决方案，在 HTML5 中你可以这样做

<link rel="import" href="header.html">

把你所有的

<script src="libs/....js"></script>
<script src="libs/....js"></script>
<script src="libs/....js"></script>

在 header.html 中

【讨论】：

浏览器不支持html5怎么办？
"HTML Imports 已弃用，将于 2019 年 3 月左右在 M73 中删除。请改用 ES 模块"

【解决方案6】：

没关系。将不同的脚本分成不同的文件是代码样式的基本建议的一部分。

最好的方法是在工作中使用 Google Style 推荐。这 2 个用于 html&css 和 javascript：

https://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml

https://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml

【讨论】：