Lazy loading Angular modules with ocLazyLoad

Lecturer: [00:00] This video is going to cover using ocLazyLoad for lazy loading in AngularJS. If you want to jump ahead, you can jump straight into his examples, and look at how he uses it and those scenarios.

[00:09] We're going to stick with the basics in this video, and then, grow up to those examples. If you need to install it, just go ahead and do bower install ocLAzyLoad, or grab it some other way. I have a super basic application here where if I click this button it's going to call app.click, which is going to say, "Console log clicked." I'll refresh here.

[00:32] I'll show the console, click the button, and it shows, "Clicked."

[00:36] Now, for lazy loading, I'm going to load this store module later on, after the bootstrapping process. For example, if I load the store module into my demo module right now, and I use the injector I can say "$injector.get" and I can get a service or anything off of my module that's loaded.

$[01:02] injector.get ["cart"] , when I refresh and I click you can see that I get that service back. It has that buy function on it and everything ready to go. If I don't load this module here, if I don't load the store module and I refresh you'll see that when I try to use the injector to get the cart that it's an unknown provider. That cart is not there to use it.

[01:26] Lazy loading is going to solve that problem. I'm going to use the oc.lazyLoad module, capital L right here. I already included this script here. When I click I'm going to say, "I'm going to use the oc.LazyLoad service so that when I click I'll say, "$ocLazyLoad.load," and then, I can say the name of the module that I want to load, "Name" and I want to load the store module. I'm loading in this guy.

[02:05] It's not defined up here. It's just defined down here. Then, this does return a promise. When it's done, on success I'm going to use the injector to get the cart again. I'll just move this guy up and then save this, refresh, and click.

[02:26] This time I can get that cart service one more time, because the injector can find the cart because ocLazyLoad loaded the store module after my app had already started up.

[02:38] Again, if I were to try this outside of this click, meaning out of the ocLazyLoad loading that in and refresh, it shows that that provider is unknown. It's not ready. But if I move it back into after ocLazyLoad has had a chance to load that store and I refresh you can see that it's there for me.

[02:59] What makes this much more powerful is if I create another script here. I'll just call this store. I'll move the store outside of my demo.js. I'll save it here. Just going to leave that code alone.

[03:16] You'll see that I have my demo. I'm going to try and load it here. It's going to fail, because when I say, "Click me," it didn't successfully load. I'd actually have to put another function in here and say, "console.log [failed to load module] " refresh, and say, "Click me." You see it failed to load that module. It couldn't find store.

[03:38] I'm just going to get rid of this error handler. I'm not going to use it again. And then, instead of just passing in a name I can also pass in a set of files that are associated with that module.

[03:51] The files for this one are going to be store.js, meaning, I want to load in this JavaScript file and it will attach it to my project to load this guy into my project. And then, it will grab the store module off of that file. When I refresh and say, "Click me," you can see I get my store service again.

[04:16] If I check my network, I'll clear out my entire network, refresh, we'll clear out again. You'll see I hit, "Click me," and it actually loads in a store.js after I've clicked. This was just a quick intro. This isn't the typical use case. Usually, you would put this in a routing solution where you navigate to a new page and on that new page you'd want to load in new modules and new features.

[04:40] We'll cover that in other videos but one thing I really want to note is that lazy loading is more for projects that are huge with many people working on it, and you have tons and tons of files. Instead of concatenating every JavaScript file into a few megabytes loaded up front, it would make more sense to lazy load them.

[05:01] But if you're just working on a small project it makes more sense just to concatenate everything and serve up one giant JavaScript file up front. That way you don't have to worry about files failing to load later on and things like that.

[05:16] It's really a call on your end you have to make as to whether you need to lazy load or not. Typically I'd say you don't need to and you don't have to but if you're working on a large project and it's a huge load up front then lazy loading is something you should look into.