Angularjs: ocLazyLoad vs Requirejs

Question

I'm working on a big angluar project and obviously we need a way to lazy load our scripts.

I've worked with require.js before and it's quite good, but the problem is that after we concatenating and minifying our files, we got a 1.5M js file.

So i just encountered OcLazyload and it looks promising but i saw a lot of examples on the web that use both require and ocLazyLoad, I'm a bit confused as to why you would want to use both. Aren't they both doing the same thing?

Answer 1

You can use RequireJS with ocLazyLoad but I don't recommend it, it's just possible because people asked me to do it and it was easy to integrate. You don't need RequireJS because ocLazyLoad includes its own loaders for js/css/templates files, and it can load any kind of files, not just angular modules.

If you want to lazy load Angular modules you will need a lib to register them with Angular (or wait Angular 1.5 that will allow you to do it).

Bottom line is: you can use RequireJS with ocLazyLoad, or just ocLazyLoad (recommended), but you can't use just RequireJS

Answer 2

You need both ocLazyLoad and RequireJS because with you now deal with two separate module concepts - your javascript modules and the angular internal modules.

After the initial bootstrap, angularjs doesn't allow registering new modules and components like directives and controllers anymore (at least not using the standard way).

RequireJS only loads javascript files but it doesn't register the new angular modules and components in this new code

What ocLazyLoad does is to allow you to load your additional files using a third party module loader like RequireJS and the more important thing - it registers in angular the new modules and components in the lazily loaded code.

In summary - you can lazily load code using only RequireJS, but you can't load angular modules and components only using RequireJS. There is a need for extra work, like this performed by ocLazyLoad.