文章/答案/技术大牛

发布

社区首页 >问答首页 >我可以在angularjs中将index.html文件划分为不同的文件吗？

问我可以在angularjs中将index.html文件划分为不同的文件吗？
EN

Stack Overflow用户

提问于 2015-03-01 22:06:51

回答 2查看 3.1K关注 0票数 3

嗨，我现在有一个用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>

将这个文件分成不同的文件的方法是什么？有这么长的文件有问题吗？装船不会有什么问题吗？

html

angularjs

回答 2

Stack Overflow用户

回答已采纳

发布于 2015-03-01 22:15:34

@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约曼项目有关于如何做到这一点的例子。https://github.com/yeoman/generator-angular

票数 2

Stack Overflow用户

发布于 2015-03-01 22:14:28

对于发展来说，你拥有的一切都是好的。但是，当您部署到生产中时，您将希望将所有JavaScript文件合并到一个文件中，这样您就有了一个脚本。这个问题是这样的：合并和缩小多个CSS / JS文件就如何做到这一点给出了一些好的建议。最受欢迎的工具是缩小。

以下是合并这些文件的一些原因：

更快。一次下载比许多小下载更有效率。(参见这个问题：加载多个小JavaScript文件还是一个大JavaScript文件更好？)
西奥。许多搜索引擎蜘蛛只索引到一定数量的字节。您将希望使您的head尽可能简洁，以便使引擎能够获得真正的内容。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/28799719

复制

相似问题

问我可以在angularjs中将index.html文件划分为不同的文件吗？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我可以在angularjs中将index.html文件划分为不同的文件吗？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我可以在angularjs中将index.html文件划分为不同的文件吗？
EN