Embedding modules conditionally in an AngularJS application

Question

My Angular application structure is as follows:

App.js

angular.module('RateRequestApp', [ 'RateRequestApp.services', 'RateRequestApp.controllers', 'ui.bootstrap', 'angular-loading-bar', 'textAngular', 'angularFileUpload' ]); 

I use different HTML files for different pages, and I do not use Angular $route , but still I want to use the same application on all pages with different controllers.

As you can see, I am inserting third-party modules into my application. The problem is that on some pages I do not need some of these modules, how can I avoid them where I do not need them?

Answer 1

Yes, you can do it something like this:

 var myApp = angular.module('RateRequestApp', [ 'RateRequestApp.services', 'RateRequestApp.controllers', 'ui.bootstrap', 'angular-loading-bar' ]); var lazyModules = ['textAngular', 'angularFileUpload']; angular.forEach(lazyModules, function(dependency) { myApp.requires.push(dependency); }); 

In this case, you can enter the modules conditionally. (But note that lazy loading of some modules may not work where some configuration is required.)