Lazy Loading modules with ui-router and ocLazyLoad
We've looked at lazy loading with ocLazyLoad previously, but what if we are using ui-router and want to lazy load modules when we change states?
[00:00] I'm going to refactor this really simple UI router demo to use lazy loading, so that when it changes state it loads in a module. Because you can see right now I have to require store up front. In my index, I have to require the store's script.
[00:16] Once that's all set up and you can see, once I click on this and I tell this state to go to the store state, which uses the store template and the store controller, I'll click this and you see it loads in this store template. I'm the store template and a message from the store controller.
[00:33] The first step in refactoring is simply replacing this store, which I'm including in here with lazy loads. Just use my live template there to use lazy load from a CDN. Going to go in to my demo here and instead of store, I'll use oc.lazyload and now I've excluded everything, the store script and the store module from my angular application. This should break completely when I try and use it, because it doesn't have that store module to use the store controller on it.
[01:07] The way that we're going to lazy load this is by using resolve and I have other videos on resolve you can go back and check out. To say briefly, that resolve takes an object with some properties that are functions and those functions return promises that must resolve before the state changes.
[01:28] Say return and we're going to need to inject oc.lazyload. So oc.lazyload, we're going to return a load, which is a promise, and this guy takes another object with a name. This is the name of the module, the module's name is store. If you look over here, this matches him and we also need to say that we're going to load that module.
[01:58] The files that we need for that module are store/store.js, so it's going to be this file. That's the one that has the store module in it.
[02:10] Once all of that is done, we can refresh, click me, and you can see everything worked out just fine. To inspect this, you can see, once I refresh and you check out the network, there's no mention of a store.js loaded in here. Once I hit click me, you can see it loads in store.js and also the template.
[02:33] That's how you refactor in to a lazy loading when you change states or changing URLs, Works the same way.
Lazy loading helps make your initial page load faster (because you load less JS/CSS/etc when you first open the website).
This is usually only applicable to really huge apps (think teams of 10+ developers working on dozens of modules).
I enjoyed the video but I would have been more excited if it were taken to the point of real world, insofar as dynamic states.
Although it is widely recognized that Lazy Loading accommodates faster loading of resources especially for those in a mobile environment, I think another, equally, if not more important benefit would be security related.
If I have resources that are available to respective roles, I do not want to download all these resources to everyone at page init. Some maybe nefarious.
That is why I like dynamic routers, ui-routers to be exact because of their nestability.
How much more attractive would a tutorial be if Lazy Loading were shown in a dynamic route environment for those of use wanting the best of both worlds, JIT resources and security !
A very useful real world pattern for this is to use Lazy Loading for Online only modules - specifically when using the appcache for web apps offline.
E.g. I am using google-maps module, which requires the google maps js file loaded prior to being configured. And importantly the google maps js file error's when app not online (so its no good as a cache file) - which means the module fails to load - so angular breaks.
Hence through lazy load my app only brings maps down if online, via a subsequent resolve. This allows our app to run in offline mode without errors. And enable google maps if online.
So I find this a very useful pattern in a Cloud API centric world....
Hope you can see the benefit in this "on-demand" approach for online resources.
Hi
It would be really useful if sometimes you state the use of doing these patterns in real world. Most of the time its easy to see the practical use of your lessons directly into my work but there are times (like this lazyLoad) i do not understand the clear benefit.
Thank you so much for your to-the-point no-nonsense webcasts, I'm huge fan of Egghead since I started working on Angular @ work accidentally :) few months back
Guru