Angular - Creating a new module dynamically, and injecting it into main app's dependencies?

Question

So I'm hoping to do some lazy loading in my angular app -- I want to pull down everything I need to render the landing page, and then subsequently pull down the rest.

The problem is, it seems like I have to define all of my angular module dependencies up-front, when I first run the app...

var myApp = angular.module('myApp', []);

// then, after 1st page render:

var myModule = angular.module('myApp.subModule', []);

How do I now inject myApp.subModule into the dependencies of myApp?

Thanks! -Daniel

Answer 1

You can use ocLazyLoad for this purpose. https://github.com/ocombe/ocLazyLoad

The way I understand - you include ocLazyLoad.js in your code. Then, instead of angular.module('app',['module1','module2']) your code becomes angular.module('app',['oc.lazyLoad']).

Then you inject $ocLazyLoad into your controller and use it like $ocLazyLoad.load({name:'module1', files:['js/controllers/module1.js']},{name:'module2',files:['js/controllers/module2']}).

You can check out the examples on the github page.