Using the following, I can get the scripts start downloading in the correct order. But I believe that because some are larger than the others file size wise, you could have one start running out of order.
<script defer="defer" src="http://priatek-console/bower_components/highcharts/highcharts.js"></script>
<script defer="defer" src="http://priatek-console/libs/angular.js"></script>
<script defer="defer" src="http://priatek-console/apps/home/executive.js"></script>
So based on the above, I assume that executive.js
(just a few lines, dependent on angular) finishes downloading before angular.js
(combination of angular, animate, and ui bootstrap) and I end up getting this error AT RANDOM TIMES:
Uncaught Error: [$injector:modulerr] Failed to instantiate module executiveHome due to:
Error: [$injector:nomod] Module 'executiveHome' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
Therefore, my final understanding is that defer
will begin loading the scripts in order after the page itself loads, but it won't guarantee the order they will run in since some finish downloading before others.
Is there a simple way to fix this outside of concatenating the files or using something like require.js
? I am using John Papa's style guide for my angular
code and I haven't seen anything regarding this. Nor does it recommend using angular.bootstrap