Lazy loading AngularJS modules with RequireJS

Question

Thanks to the great article from Dan Wahlin, I managed to implement lazy loading of Angular\'s controllers and services. However, there does not seem to be a clean way to l

Answer 1

Take a look at my project in GitHub: angular-require-lazy

This project is intended to demonstrate an idea and motivate discussions. But is does what you want (check expenses-view.js, it loads ng-grid lazily).

I am very interested in comments, ideas etc.

---

(EDIT) The ng-grid Angular module is lazy loaded as follows:

1. expenses-view.js is loaded lazily, when the /expenses route is activated
2. expenses-view.js specifies ng-grid as a dependency, so RequireJs loads ng-grid first
3. ng-grid is the one that calls angular.module(...)

In order to accomplish this, I replaced (proxied actually) the real angular.module method with my own, that supports laziness. See bootstrap.js and route-config.js (the functions initLazyModules() and callRunBlocks()).

This implementation has its drawbacks that you should be aware of:

1. Config functions are not implemented (yet). I do not know if it is possible to lazily provide config-time dependencies.
2. Order matters in definitions. If service A depends on B but A is defined after B in your module, DI wil fail. This is because the lazyAngular proxy executes definitions immediately, unlike real Angular that makes sure dependencies are resolved before executing the definitions.