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?
Off the top of my head, upon reading your question, I can think of a possible solution/hack.
The idea would be to define an array of dependencies before any modules are included, and add to it within each module:
// before anything else
window.loadedDependencies = [];
// at the end of each module file:
window.loadedDependencies.push('moduleName')
// after all that, at the app definition:
app = angular.module("app", loadedDependencies)
In all honesty, I haven't really considered any implications/complications that this method may imply, and I can't really vouch for this until I do (why aren't fewer calls for script files and caching good for your use case?)
No, this is not officially supported at the moment. All the modules must be loaded in a browser (and declared as a dependency of a main application module) before AngularJS application is bootstrapped.
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
Using Tiago's great idea (upvote him!), I have the following in my module:
window.dependencies = _.union(window.dependencies || [], [
"ngRoute",
"app.mymodule1"
]);
angular
.module("app.mymodule1", [])
.config(["$routeProvider", function ($routeProvider) {
// more code
}]);
and this in my app.js:
var app;
window.dependencies = _.union(window.dependencies || [], [
"ngRoute",
"app.anothermodule"
]);
window.app = app = angular.module("app", window.dependencies);
I use LoDash, so I union the dependencies to get an array of unique values - some of my modules use the same dependencies as the app.js, e.g. ngRoute.
My script includes at the bottom of the body tag look like this:
<!-- scripts from other pages/modules included here -->
<script src="/js/anothermodule/anothermodule.js"></script>
<script src="/js/app.js"></script>
Works like a charm!
My pages share a "master" page, but I have the module definitions in their own files, so I needed something like this.
I know it's not very beautiful but what about doing the following:
var injectedDependencies = [.....];
angular.prevmodule = angular.module;
angular.module = function(name, params){
if(params){
params.push(injectedDependencies);
}
return angular.prevmodule.apply(angular, arguments);
}
edit: note that this is useful if you want to inject modules without the app having to know them (for exapmple for logging, monitorization, security, etc) but not if you want to inject'em after the application has been bootstraped.
I am struggling with the same problem. I think http://blog.getelementsbyidea.com/load-a-module-on-demand-with-angularjs/ may do what you wanted.
On its github https://github.com/ocombe/ocLazyLoad you can find:
AppCtrl.js https://github.com/ocombe/ocLazyLoad/blob/master/examples/example1/js/app.js#L24AppCtrl.js later loads grid https://github.com/ocombe/ocLazyLoad/blob/master/examples/example1/js/AppCtrl.js#L28 in runtime (and asynchrously)! voi'laThis might look a little complicated, but if you are really interested in loading them at runtime this might be the only one solution, except manually modyfing _invokeQueue manually.
