Question

嗨，我现在在angularjs中完成了一个大项目，我的index.html文件开始很长：

<!DOCTYPE html>
<html class="no-js">

<head>
<title>InTouch</title>

<base href="/">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Bootstrap -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<!-- Utilise LESS -->

<link rel="stylesheet" href="stylesheets/ngprogress-lite.min.css">

</head>

<body ng-app="InTouch">
<!--<div ng-include="" src="'./partials/header.html'"></div>-->
<div ng-view>
</div>
</div>

<!-- <div id="footer">
  <div class="container">
    <div ng-include="" src="'./partials/footer.html'"></div>
  </div>
</div> -->

<!-- Fix for old browsers -->
<script type="text/javascript" src="javascript/less.min.js"></script>
<script type="text/javascript" src="angularLib/angular.js"></script>
<script type="text/javascript" src="angularLib/angular-animate.js">
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script data-require="bootstrap@3.1.1" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script type="text/javascript" src="angularLib/angular-messages.js"> 
</script>
<script type="text/javascript" type="text/javascript" src="angularLib/angular-route.js"></script>
<script type="text/javascript" src="angularLib/angular-strap.js"></script>
<script type="text/javascript" src="angularLib/angular-strap.tpl.js">
</script>
<script type="text/javascript" src="angularLib/ui-bootstrap.js"></script>
<script type="text/javascript" src="angularLib/angular-css.min.js">
</script>

<script type="text/javascript" src="angularLib/angular-cookies.js"></script>
<script type="text/javascript" src="angularLib/http-auth-interceptor.js"></script>
<script type="text/javascript" src="angularLib/angular-resource.js"></script>
<script type="text/javascript" src="angularLib/angular-file-upload.js"></script>
<script type="text/javascript" src="angularLib/ngprogress-lite.js"></script>

<script type="text/javascript" src="angularLib/ngStorage.js"></script>
<script type="text/javascript" src="angularLib/angular-growl-notifications.js"></script>
<script src="angularLib/ui-bootstrap-tpls.js"></script>

<script type="text/javascript" src="app.js"></script>

<script type="text/javascript" src="angularConstant/geolocation_msgs.js"></script>
<script type="text/javascript" src="angularConstant/useragentmsgs.js"></script>
<script type="text/javascript" src="angularConstant/config.js"></script>
<script type="text/javascript" src="angularControllers/NavbarAngCtrl.js">
</script>
<script type="text/javascript" src="angularControllers/AdminNavbarAngCtrl.js">
</script>
<script type="text/javascript" src="angularControllers/MainHeaderAngCtrl.js">
</script>

<script type="text/javascript" src="angularControllers/modal/ModalInstanceAngCtrl.js">
</script>

<script type="text/javascript" src="angularControllers/MainAngCtrl.js">
</script>
<script type="text/javascript" src="angularControllers/AnnouncesAngCtrl.js">
</script>
<script type="text/javascript" src="angularControllers/profile/ProfileAngCtrl.js">
</script>
<script type="text/javascript" src="angularControllers/profile/ActualityAngCtrl.js">
</script>
<script type="text/javascript" src="angularControllers/modal/AboutModalAngCtrl.js">
</script>
<script type="text/javascript" src="angularControllers/profile/HistoricAngCtrl.js">
</script>
<script type="text/javascript" src="angularControllers/profile/MessageAngCtrl.js">
</script>
<script type="text/javascript" src="angularControllers/profile/PictureAngCtrl.js">
</script>
<script type="text/javascript" src="angularControllers/profile/ReputationAngCtrl.js">
</script>
<script type="text/javascript" src="angularControllers/profile/WalletAngCtrl.js">
</script>
<script type="text/javascript" src="angularControllers/admin/AdminAngCtrl.js">
</script>
<script type="text/javascript" src="angularDirectives/compareToValidatorDrct.js">
</script>
<script type="text/javascript" src="angularDirectives/fmRatingDrct.js"></script>
<script type="text/javascript" src="angularDirectives/onBlurDrct.js"></script>
<script type="text/javascript" src="angularDirectives/onFocusDrct.js"></script>
<script type="text/javascript" src="angularDirectives/emailAvailableValidatorDrct.js"></script>
<script type="text/javascript" src="angularDirectives/userFilterDrct.js"></script>
<script type="text/javascript" src="angularDirectives/fmCheckboxListDrct.js"></script>
<script type="text/javascript" src="angularDirectives/usernameAvailableValidatorDrct.js"></script>

<script type="text/javascript" src="angularDirectives/paginationDrct.js"></script>
<script type="text/javascript" src="angularDirectives/fileUploadDrct.js"></script>
<script type="text/javascript" src="angularDirectives/headerDrct.js"></script>
<script type="text/javascript" src="angularDirectives/adminHeaderDrct.js"></script>
<script type="text/javascript" src="angularFactories/GeolocalisationFctr.js"></script>
<script type="text/javascript" src="angularFactories/UserAgentFctr.js"></script>
<script type="text/javascript" src="angularFactories/AuthFctr.js"></script>
<script type="text/javascript" src="angularFactories/SessionFctr.js"></script>
<script type="text/javascript" src="angularFactories/UserFctr.js"></script>
<script type="text/javascript" src="angularFactories/AnnouncesFctr.js"></script>
<script type="text/javascript" src="angularFactories/AnnouncesFromUserFctr.js"></script>
<script type="text/javascript" src="angularFactories/CommentsFctr.js"></script>
<script type="text/javascript" src="angularFactories/FriendsFctr.js"></script>
<script type="text/javascript" src="angularFactories/MessagesFctr.js"></script>
<script type="text/javascript" src="angularFactories/RoomsFctr.js"></script>
<script type="text/javascript" src="angularFactories/SocketFctr.js"></script>
<script type="text/javascript" src="angularFactories/ProfileFctr.js"></script>
<script type="text/javascript" src="angularFilters/starsFltr.js"></script>
<script type="text/javascript" src="angularFilters/cutFltr.js"></script>

</body>

</html>

将此文件分成不同文件的方法是什么？拥有这么长的文件是个问题吗？它不会有任何装载问题吗？

Answer 1

@felix，如您所示，拥有一个长索引文件不是问题。考虑例如ng-include的标记，您可能想要取消注释并将其用作资源。

<!--<div ng-include="" src="'./partials/header.html'"></div>-->

这将在初始加载后异步获取html。 https://docs.angularjs.org/api/ng/directive/ngInclude

现在考虑一下app.js，它将注册您项目正在使用的模块。这些模块将异步加载。因此，列出与您一样多的脚本标签并不是一件可怕的事情。

<script type="text/javascript" src="app.js"></script>

当你为生产构建它时，我建议缩小和连接你的脚本，这样可以减少对服务器的请求数量。

AngularJS Yeoman项目有关于如何做到这一点的例子。 https://github.com/yeoman/generator-angular

Answer 2

对于开发，你拥有的很好。但是，在部署到生产环境时，您需要将所有JavaScript文件合并为一个，以便拥有单个脚本。这个问题：Combine and Minify Multiple CSS / JS Files给出了一些关于如何做到这一点的好建议。最受欢迎的工具是minify。

以下是将文件组合起来是个好主意的一些原因：

它更快。一次下载比许多小型下载更有效。（见这个问题：Is it better to load many small JavaScript files or one large JavaScript file?）
SEO。许多搜索引擎蜘蛛仅索引到一定数量的字节。您需要使head尽可能简洁，以便引擎能够获得真实内容。

我可以将index.html文件分成angularjs中的不同文件

2 个答案: