Using the <script async> tag with Angular.js
If there's something useful you can show without angular (e.g., a pre-generated content using a headless browser) AND nothing but your script depends on it1, then there can be a solution:
- load
angular.jsusingasync - encapsulate you code in a function body
- add a loop checking if
angularis defined- and sleeping for a few milliseconds if not
- otherwise, executing your code and breaking out of the loop
This sort of busy waiting is ugly, but I can't see how to get called back when the loading finishes. It may work or not, I haven't tried it yet.
It's quite possible that I'm doing nothing but a primitive version of what the frameworks do.
If you don't need it to work in all browsers, then there's the defer tag. To me, defer looks like async done right.
1 So I guess, users of angular-route.js or alike are out of luck. This is just a guess as I've never tried to load the two out of order.
You may want to merge all dependent JS files into one before using async.Use Grunt, Gulp, Broccoli or another task runner for this.
If the script is modular and does not rely on any scripts then use async.
DON'T USE async attribute with Angular.js script tag.
It seems that using async attribute is harmful. Without it, expressions are evaluated on DOMContentLoaded event, but with the async attribute, there are evaluated on window load event, that is much later. Tested for Angular.js 1.0 and 1.4 in latest version of Firefox, Chrome and IE11.