Question

Some of my routes needs functionality from external JS. I don’t want to load them all at once since those JS are needed only in certain routes (e.g. /upload needs some JS for photo uploading, /photos needs another JS for lightbox, /funny needs JS for animation stuff, etc).

What’s the best practice for lazily loading those external JavaScripts?

Those routes can be accessed multiple times (e.g. user can go to /upload then /photos then /upload again)

Answer 1

The only way I know to handle cases like this is using the “resolve” method of a route. This method can be used to define a dependency to be loaded before the route’s controller is instantiated. One of the different possible return types of this method is a promise. Thus you might use this to start loading your external JavaScript code asynchronously and return a promise that is resolved as soon as your external scripts are loaded.

The documentation for this can be found here: https://docs.angularjs.org/api/ngRoute/provider/$routeProvider in the “when” section.