The problem, as Ifeanyi points out, is that after your AngularJS application has been bootstrapped, you can only define new components using the relevant "providers". Furthermore, you can only gain access to these providers within the config() callbacks executed during the bootstrapping process. As such, you need to save a reference to these providers if you wish to load subsequent components after your AngularJS application has been bootstrapped.
In the following demo, I'm doing just that. Within the config() callback, I'm actually overwriting the original "shorthand" module methods with the provider-driven equivalents that can be used after bootstrapping. This way, the modules that I define after page-load don't have to use any special syntax - they can define components the same way you would pre-bootstrap.
In this demo, I have two subviews that are rendered using the ngSwitch and ngSwitchWhen directives. The "before" subview doesn't require any additional components to run. The "after" subview, on the other hand, relies on a number of components, including a Controller, that are being loaded after bootstrap.
The interweaving of components is overly complicated for this example since I wanted to make sure that Controllers, Services, Factories, Values, and Directives could all be defined post-bootstrap.
When we run the above code, we get the following console output, demonstrating the order of operations that took place:
Config method executed.
Controller instantiated (after bootstrap).
Lazy bindings added to application.
As you can see, the lazy-loaded modules were defined after the app-controller was instantiated. This indicates that they were, indeed, loaded after the application was bootstrapped. Furthermore, the fact that the code runs (see video) shows us that the lazy-loaded modules were made available in the right dependency-injection container.
I think this is pretty cool stuff. Lazy-loading components in AngularJS is one thing; now, I have to figure out the best way to go about managing and loading these components at appropriate times. In his demo, Ifeanyi does this in the route-resolution; however, my routes are much "dumber" and don't know about anything other than request variables. Much more research and development to perform. And, huge thanks to Ifeanyi for paving the way!
Want to use code from this post? Check out the license.
This is great Ben, and a lovely approach from Ifeanyi. I have noticed a few large MVC applications (Angular & Otherwise) that do certainly suffer a performance hit on the initial load which can be very frustrating.
I'd love to see something like this adopted in to the core framework in future, so the implementation can be as tidy as possible, and officially supported. It seems that a lazy-loading is a sensible approach moving forward, as the apps are only going to grow larger and larger.
As a next step, I want to look at using RequireJS to managing some lazy-loading using this technique.
This is pretty cool. I'm guessing the reason it's not supported directly in Angular is because of the dependency chain. If module A depends on module B, and module B lazy loads some of its services then you have a problem.
But if you understand that inherent pitfall then this could really come in handy.
I hacked up an experiment using $rootScope. Not better, just different.
Cool site! Is ng-nuggets yours? Looks like a great collection of information that I'll be digging through!
Yep, ng-nuggets is just a place where I store my Angular notes. I find I remember things better when I write them down.
@Mike - very cool. I'll be leaving that open in a tab :)
I just tried the above demo page with AngularJS version 1.3.0 beta 13, and I get this error:
Error: [$compile:multidir] Multiple directives [ngSwitchWhen, ngInclude] asking for transclusion on: <div ng-switch-when="before" ng-include=" 'before.htm' ">
I'm new to AngularJS, so I have no idea yet where to look for a fix or whatever. I thought I would give you a heads-up that something might have changed.
Like you, I'm very interested in how AngularJS can be made to load additional code and pages, so I found your post a perfect starting point. I'll post back if I do happen across a fix.
Thank you for your code. It helped me solve my problem. What I was facing was that I needed to dynamically add dependencies after bootstrapping. The problem was that they were creating the directives I needed on their own modules. Using your solution, plus overriding the angular.module function, I finally got it.
One more awesome blog (y) . Although, It was very difficult to reach this blog from google. Google was not showing this blog. But I made it to reach here.
I have a query regarding the blog:
Why you are storing controller native method in _controller variable?? although we are not using it?
app._controller = app.controller;
Please let me know, if I have missing something in your blog regarding this..
Hi Ben, you're a life savior! Thank you.
This is a very cool hack. I've followed IFY article and your example and you saved my life on how to load this modules!