Using the <script async> tag with Angular.js

Question

Ilya Grigorik recommends the use of the <script async> tag where possible.

Is there a clean, preferred way to load an Angular.js app using the tag, without using tools like require.js or the $script.js tool recommended by the angular-seed?

The obvious issue is execution order. e.g. preventing:

Uncaught ReferenceError: angular is not defined

https://www.igvita.com/2014/05/20/script-injected-async-scripts-considered-harmful/

Answer 1

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 it¹, then there can be a solution:

• load angular.js using async
• encapsulate you code in a function body
• add a loop checking if angular is 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.

---

¹ 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.