index.html 中的多个脚本链接

Question

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

更新 07/04/2015

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

Answer 1

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

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

此外，require.js 具有内置模块化和易于使用的串联工具，不过，有人认为 Angular 使用它的好处与 Angular 一样自己的模块化。 require.js 的主要优点是无需注意文件的连接顺序，因为这是该工具的责任。不幸的是，它花费了大量的样板代码。

Answer 2

我的建议是使用某种任务运行程序来连接所有文件，并将它们构建成类似于单个 'app.js' 文件的文件。

我个人的偏好是 gulp，但另一个流行的选择是 grunt。 Here 很好地介绍了如何将 gulp 与 angular 结合使用，我建议您查看。

Answer 3

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

Answer 4

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

最好的方法是在工作中使用 Google 风格建议。这 2 个用于 html&css 和 javascript:

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

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

Answer 5

据我所知，很少有可能的解决方案会自动为 index.html:

注入您的脚本标签

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

a stylesheet, javascript and webcomponent reference injection plugin for gulp
Grunt - JavaScript 任务运行程序您可以将 Grunt-Injector 用于：

Inject references to files into other files (think scripts and stylesheets into an html file)
另一个我没有使用的选项是RequireJS。参见 - http://www.startersquad.com/blog/angularjs-requirejs/

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

参见：

Grunt vs Gulp

Another Grunt vs Gulp

Answer 6

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

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

并把你所有的

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

在header.html

index.html 中的多个脚本链接

Multiple script links in index.html

html

angularjs

gulp