Using the <script async> tag with Angular.js
angularjs, asynchronous, javascript, performance
Solution
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.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.
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.
Problem
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/