How to inject modules to main Angular app module on the fly

Question

I am not using angular on a single page application however I would like to define the main app module once due to load order issues. At the same time I would like to inject/require modules on a per page basis and not blanket as not all JS files will be loaded on every page.

Can I define the app with no required modules:

app = angular.module("app", [])

and have them injected from a controller or at a later stage?

Answer 1

We can achieve it by using app.requires

//app.js
    var app = angular.module('myngapp',['ngRoute','ngCookies','ui.bootstrap','kendo.directives','pascalprecht.translate','tmh.dynamicLocale']);

    app.config(['$routeProvider', '$httpProvider', '$translateProvider', 'tmhDynamicLocaleProvider', '$compileProvider', function($routeProvider, $httpProvider, $translateProvider, tmhDynamicLocaleProvider, $compileProvider) {
    'use strict';

    $compileProvider.debugInfoEnabled(false);

    $routeProvider.otherwise({
        redirectTo: '/login'
    });
    }]);

In myModule.js

  app.requires.push('app.myModule');

and in your index.html, include the app.js first and myModule.js next. By this way, you can include n number of modules without modifying the app.js.

Include the myModule.js on the fly from app.js

var mainHead = document.getElementsByTagName('HEAD').item(0);
var myScript= document.createElement("script");
myScript.type = "text/javascript";
mainHead.appendChild( myScript);
myScript.src='../myModule.js';
myScript.onload = function(){
     angular.element(document).ready(function() {
                      angular.bootstrap(document, ['myngapp']);
                     });
     }

Note: here we are manually bootstrapping the application so that dynamically loaded modules are also included into our application