Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 959 of the free egghead.io lessons, plus get Angular 1.x content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Simple Lazy Loaded Angular Module Syntax with ocLazyLoad

1:49 Angular 1.x lesson by

ocLazyLoad offers several ways to lazy load your AngularJS modules. This lesson looks at the syntax for lazy loading dependencies declared in the module definition.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

ocLazyLoad offers several ways to lazy load your AngularJS modules. This lesson looks at the syntax for lazy loading dependencies declared in the module definition.

Avatar
Olivier

Just be aware that this syntax will only work on lazy loaded modules (because ocLazyLoad will be able to parse the dependencies and act accordingly).
It won't work if you use this syntax in a normal module that you load at bootstrap (without using ocLazyLoad to load it).

So in this scenario, when we click on this button, we go to the store state and the store state loads up these store files and the store module. I'll click that and everything will load in, the store template, and the store but what if I need the cart service and the list service off the cart module inside of my store and that's in a completely different file.

You can actually load that as another file here in the list of files but an awesome convenience here is that I can put an object in the list of dependencies where I can say, name is cart and then files is the list of files, so just cart/cart.js here. Then, I can inject my list service and show my list.items.

I'll save this. I'll come over here and refresh. I'll say click me and now it's showing my list of items from cart module. Again, this is simply an object that I'm passing into the list of dependencies where you typically load modules and this is a custom syntax for this OC lazy load library. You say name of the module. Again, the files, just like you would if you were loading in from a resolve statement.

Then, you can use the regular injection-like list to get the list service off of that cart module. Nothing fancy going on here. The only fancy thing is this great little short and sweet syntax of loading in a file that's not in my current file and then using a module and the services off of it.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?