Can i divide index.html file into different files in angularjs

Question

Hi i have now a big project done in angularjs and my index.html file starts to be very long :

<!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="[email protected]" 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>

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 ?

Now the real question is, do you have a basic arithmetic jQuery plugin? — Shahar
– Shahar, Commented Mar 1, 2015 at 22:10

Jack Shultz · Accepted Answer · 2015-03-01 22:15:34Z

2

@felix, this is not a problem to have a long index file as you have presented. Consider the tag for instance ng-include, you may want to uncomment and use this as a resource.

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

This will fetch html asynchronously after initial load. https://docs.angularjs.org/api/ng/directive/ngInclude

Now consider your app.js, it will register as many modules that your project is using. These modules will be loaded asynchronously. So it is not such a terrible thing having as many script tags listed as you do.

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

When you build this for production, I would recommend minifying and concatenating your scripts however, that will reduce the number of requests to the server.

The AngularJS Yeoman project has examples on how to do that. https://github.com/yeoman/generator-angular

answered Mar 1, 2015 at 22:15

Jack Shultz

2,1312 gold badges31 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nephilim Over a year ago

It can be a problem as the project grows though. For example my Chromium tabs straight up freeze if I'm trying to open my app if it's not minified. It's an annoying issue and I have no idea how to fix it.

Community · Accepted Answer · 2017-05-23 10:26:49Z

1

For development, what you have is fine. However when you deploy to production, you will want to combine all of the JavaScript files into one so that you have a single script. This SO question: Combine and Minify Multiple CSS / JS Files gives some good suggestions on how to do this. The most upvoted tool is minify.

Here are some reasons why combining the files would be a good idea:

It's faster. One single download is more efficient than many small downloads. (See this question: Is it better to load many small JavaScript files or one large JavaScript file?)
SEO. Many search engine spiders only index up to a certain number of bytes. You will want to make your head as succinct as possible in order to allow the engine to get to the real content.

edited May 23, 2017 at 10:26

CommunityBot

11 silver badge

answered Mar 1, 2015 at 22:14

Sumner Evans

9,2055 gold badges32 silver badges48 bronze badges

1 Comment

Nephilim Over a year ago

Warning: It can get too big, and your Chrome tabs will freeze when you try to develop locally.

Collectives™ on Stack Overflow

Can i divide index.html file into different files in angularjs

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related