title: Can i divide index.html file into different files in angularjs
body: <p>Hi i have now a big project done in angularjs and my index.html file starts to be very long :</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html class="no-js"&gt;
  
  &lt;head&gt;
  &lt;title&gt;InTouch&lt;/title&gt;
  
  &lt;base href="/"&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  
  &lt;!-- Bootstrap --&gt;
  &lt;link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"&gt;
  &lt;!-- Utilise LESS --&gt;
  
  &lt;link rel="stylesheet" href="stylesheets/ngprogress-lite.min.css"&gt;
  
  &lt;/head&gt;
  
  &lt;body ng-app="InTouch"&gt;
  &lt;!--&lt;div ng-include="" src="'./partials/header.html'"&gt;&lt;/div&gt;--&gt;
  &lt;div ng-view&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;!-- &lt;div id="footer"&gt;
    &lt;div class="container"&gt;
      &lt;div ng-include="" src="'./partials/footer.html'"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt; --&gt;
  
  &lt;!-- Fix for old browsers --&gt;
  &lt;script type="text/javascript" src="javascript/less.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="angularLib/angular.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="angularLib/angular-animate.js"&gt;
  &lt;/script&gt;
  
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script data-require="bootstrap@3.1.1" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="/socket.io/socket.io.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="angularLib/angular-messages.js"&gt; 
  &lt;/script&gt;
  &lt;script type="text/javascript" type="text/javascript" src="angularLib/angular-route.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="angularLib/angular-strap.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="angularLib/angular-strap.tpl.js"&gt;
  &lt;/script&gt;
  &lt;script type="text/javascript" src="angularLib/ui-bootstrap.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="angularLib/angular-css.min.js"&gt;
  &lt;/script&gt;
  
  &lt;script type="text/javascript" src="angularLib/angular-cookies.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="angularLib/http-auth-interceptor.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="angularLib/angular-resource.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="angularLib/angular-file-upload.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="angularLib/ngprogress-lite.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript" src="angularLib/ngStorage.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="angularLib/angular-growl-notifications.js"&gt;&lt;/script&gt;
  &lt;script src="angularLib/ui-bootstrap-tpls.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript" src="app.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript" src="angularConstant/geolocation_msgs.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="angularConstant/useragentmsgs.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="angularConstant/config.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="angularControllers/NavbarAngCtrl.js"&gt;
  &lt;/script&gt;
  &lt;script type="text/javascript" src="angularControllers/AdminNavbarAngCtrl.js"&gt;
  &lt;/script&gt;
  &lt;script type="text/javascript" src="angularControllers/MainHeaderAngCtrl.js"&gt;
  &lt;/script&gt;
  
  &lt;script type="text/javascript" src="angularControllers/modal/ModalInstanceAngCtrl.js"&gt;
  &lt;/script&gt;
  
  &lt;script type="text/javascript" src="angularControllers/MainAngCtrl.js"&gt;
  &lt;/script&gt;
  &lt;script type="text/javascript" src="angularControllers/AnnouncesAngCtrl.js"&gt;
  &lt;/script&gt;
  &lt;script type="text/javascript" src="angularControllers/profile/ProfileAngCtrl.js"&gt;
  &lt;/script&gt;
  &lt;script type="text/javascript" src="angularControllers/profile/ActualityAngCtrl.js"&gt;
  &lt;/script&gt;
  &lt;script type="text/javascript" src="angularControllers/modal/AboutModalAngCtrl.js"&gt;
  &lt;/script&gt;
  &lt;script type="text/javascript" src="angularControllers/profile/HistoricAngCtrl.js"&gt;
  &lt;/script&gt;
  &lt;script type="text/javascript" src="angularControllers/profile/MessageAngCtrl.js"&gt;
  &lt;/script&gt;
  &lt;script type="text/javascript" src="angularControllers/profile/PictureAngCtrl.js"&gt;
  &lt;/script&gt;
  &lt;script type="text/javascript" src="angularControllers/profile/ReputationAngCtrl.js"&gt;
  &lt;/script&gt;
  &lt;script type="text/javascript" src="angularControllers/profile/WalletAngCtrl.js"&gt;
  &lt;/script&gt;
  &lt;script type="text/javascript" src="angularControllers/admin/AdminAngCtrl.js"&gt;
  &lt;/script&gt;
  &lt;script type="text/javascript" src="angularDirectives/compareToValidatorDrct.js"&gt;
  &lt;/script&gt;
  &lt;script type="text/javascript" src="angularDirectives/fmRatingDrct.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="angularDirectives/onBlurDrct.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="angularDirectives/onFocusDrct.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="angularDirectives/emailAvailableValidatorDrct.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="angularDirectives/userFilterDrct.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="angularDirectives/fmCheckboxListDrct.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="angularDirectives/usernameAvailableValidatorDrct.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript" src="angularDirectives/paginationDrct.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="angularDirectives/fileUploadDrct.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="angularDirectives/headerDrct.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="angularDirectives/adminHeaderDrct.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="angularFactories/GeolocalisationFctr.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="angularFactories/UserAgentFctr.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="angularFactories/AuthFctr.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="angularFactories/SessionFctr.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="angularFactories/UserFctr.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="angularFactories/AnnouncesFctr.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="angularFactories/AnnouncesFromUserFctr.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="angularFactories/CommentsFctr.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="angularFactories/FriendsFctr.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="angularFactories/MessagesFctr.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="angularFactories/RoomsFctr.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="angularFactories/SocketFctr.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="angularFactories/ProfileFctr.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="angularFilters/starsFltr.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="angularFilters/cutFltr.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>What is the method to divide this file into different ones ? Is it a problem to have such a long file ? Would'nt it have any problem of loading ?</p>