Привет, у меня есть большой проект, сделанный в 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>
Каким способом разделить этот файл на разные? Это проблема иметь такой длинный файл? Не было бы проблем с загрузкой?
2 ответа
@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
Для развития то, что у вас есть, подходит. Однако при развертывании в производственной среде вы захотите объединить все файлы JavaScript в один, чтобы у вас был один сценарий. Этот вопрос SO: Объединить и минимизировать несколько файлов CSS / JS дает некоторые хорошие предложения, как это сделать. Инструмент, получивший наибольшее количество голосов, - это minify.
Вот несколько причин, по которым было бы неплохо объединить файлы:
- Это быстрее. Одна загрузка более эффективна, чем несколько небольших загрузок. (См. Этот вопрос: Что лучше: загрузить много маленьких файлов JavaScript или один большой файл JavaScript?)
- SEO. Многие пауки поисковых систем индексируют только определенное количество байтов. Вам нужно сделать
headкак можно более лаконичным, чтобы позволить движку добраться до реального содержания.
Похожие вопросы
Связанные вопросы
Новые вопросы
html
HTML (язык гипертекстовой разметки) — это язык разметки для создания веб-страниц и другой информации, отображаемой в веб-браузере. Вопросы относительно HTML должны включать минимальный воспроизводимый пример и некоторое представление о том, чего вы пытаетесь достичь. Этот тег редко используется отдельно и часто в паре с [CSS] и [JavaScript].