Question

我在Angular有一个小项目。我试图以一种单一的责任方式保持一切我非常满意我的app结构。我觉得唯一不太好看的是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年4月4日

我最终使用了Gulp。对于那些在此寻求帮助的人，我已经按照这个小教程：https://medium.com/@dickeyxxx/best-practices-for-building-angular-js-apps-266c1a4a6917

Answer 1

我知道几种可能的解决方案会自动为index.html注入脚本标记：

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

样式表，javascript和webcomponent引用注入插件为了gulp
Grunt - JavaScript Task Runner 您可以使用Grunt-Injector：

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

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

请参阅：

Grunt vs Gulp

Another Grunt vs Gulp

Answer 2

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

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

Answer 3

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

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

此外，require.js具有内置模块性和易于使用的连接工具，但是，有人认为Angular使用它作为Angular有其自身的模块性。 require.js的主要优点是没有必要注意文件连接的顺序，因为它是工具的责任。不幸的是，它花费了很多样板代码。

Answer 4

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

Answer 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中的

Answer 6

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

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

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

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

index.html中有多个脚本链接

6 个答案: