Simple Lazy Loaded Angular Module Syntax with ocLazyLoad
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.
[00:00] 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.
[00:27] 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.
[01:03] 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.
[01:30] 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.
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).