Привет, у меня есть большой проект, сделанный в 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>

Каким способом разделить этот файл на разные? Это проблема иметь такой длинный файл? Не было бы проблем с загрузкой?

3
felix 2 Мар 2015 в 01:06

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

2
Jack Shultz 1 Мар 2015 в 22:15

Для развития то, что у вас есть, подходит. Однако при развертывании в производственной среде вы захотите объединить все файлы JavaScript в один, чтобы у вас был один сценарий. Этот вопрос SO: Объединить и минимизировать несколько файлов CSS / JS дает некоторые хорошие предложения, как это сделать. Инструмент, получивший наибольшее количество голосов, - это minify.

Вот несколько причин, по которым было бы неплохо объединить файлы:

  1. Это быстрее. Одна загрузка более эффективна, чем несколько небольших загрузок. (См. Этот вопрос: Что лучше: загрузить много маленьких файлов JavaScript или один большой файл JavaScript?)
  2. SEO. Многие пауки поисковых систем индексируют только определенное количество байтов. Вам нужно сделать head как можно более лаконичным, чтобы позволить движку добраться до реального содержания.
1
Community 23 Май 2017 в 10:26