Please allow me to explain briefly before requesting your input on this particular matter.
Currently, I have a traditional AngularJS application where a specific div in my body contains the ng-app attribute and all scripts are placed at the bottom of the body.
Solution 1:
<body>
<div ng-app="myApp">
<!--remaining markup of the app will be here-->
</div>
<!--scripts located at the end of the body-->
<script ...></script> <!--app.js/entry point-->
<script ...></script> <!--configs-->
<script ...></script> <!--services-->
<script ...></script> <!--controllers-->
</body>
It is important to note that script order matters, hence the manual arrangement.
My question revolves around how Angular functions during page loading. I am curious whether the following alterations could result in performance issues:
- I removed the ng-app attribute
- I rearranged the scripts without any specific order.
Solution 2:
<body>
<div> <!--No ng-app attribute included-->
<!--mark-up continuation goes here-->
</div>
<!--manually bootstraping-->
<script>
angular.element(document).ready(function() {
angular.bootstrap(document, ['myApp']);
});
</script>
<!--non-ordered scripts at bottom of body-->
<script ...></script>
<script ...></script>
<script ...></script>
<script ...></script>
</body>
The primary objective behind this was to eliminate the need for manual file ordering and bootstrap the Angular app after (by adding ng-app manually upon document load).
Now, please take into consideration the following aspects:
- There is a possibility of numerous script files.
- All these scripts might also be consolidated into one file.
My aim is to comprehend if there are any performance challenges with either solution and which may be more advantageous.