re-open and add dependencies to an already bootstr

Is there a way to inject a late dependency to an already bootstrapped angular module? Here's what I mean:

Say that I have a site-wide angular app, defined as:

// in app.js
var App = angular.module("App", []);

And in every page:

<html ng-app="App">

Later on, I'm reopening the app to add logic based on the needs of the current page:

// in reports.js
var App = angular.module("App")
App.controller("ReportsController", ['$scope', function($scope) {
  // .. reports controller code
}])

Now, say that one of those on-demand bits of logic also requires their own dependencies (like ngTouch, ngAnimate, ngResource, etc). How can I attach them to the base App? This doesn't seem to work:

// in reports.js
var App = angular.module("App", ['ui.event', 'ngResource']); // <-- raise error when App was already bootstrapped

I realize I can do everything in advance, i.e -

// in app.js
var App = angular.module("App", ['ui.event', 'ngResource', 'ngAnimate', ...]);

Or define every module on its own and then inject everything into the main app (see here for more):

// in reports.js
angular.module("Reports", ['ui.event', 'ngResource'])
.controller("ReportsController", ['$scope', function($scope) {
  // .. reports controller code
}])

// in home.js
angular.module("Home", ['ngAnimate'])
.controller("HomeController", ['$scope', '$http', function($scope, $http){
  // ...
}])

// in app.js, loaded last into the page (different for every page that varies in dependencies)
var App = angular.module("App", ['Reports', 'Home'])

But this will require I initialize the App everytime with the current page's dependencies.

I prefer to include the basic app.js in every page and simply introduce the required extensions to each page (reports.js, home.js, etc), without having to revise the bootstrapping logic everytime I add or remove something.

Is there a way to introduce dependencies when the App is already bootstrapped? What is considered the idiomatic way (or ways) to do this? I'm leaning towards the latter solution, but wanted to see if the way I described could also be done. thanks.

标签： angularjs dependency-injection bootstrapping

5条回答

混吃等死

2楼-- · 2019-01-13 01:31

According to this proposal on the Angular JS google group this functionality does not exist as of this moment. Hopefully the core team decides to add this functionality, could use it myself.

0人赞添加讨论(0) 举报

仙女界的扛把子

3楼-- · 2019-01-13 01:31

I realize that this is an old question, however, no working answer has yet been provided, so I decided to share how I solved it.

The solution requires forking Angular, so you can't use CDN anymore. However the modification is very small, so I am surprised why this feature doesn't exist in Angular.

I followed the link to google groups that was provided in one of the other answers to this question. There I found the following code, which solved the issue:

instanceInjector.loadNewModules = function (mods) {
  forEach(loadModules(mods), function(fn) { instanceInjector.invoke(fn || noop); });
};

When I added this code to line 4414 in the angular 1.5.0 source code (inside the createInjector function, before the return instanceInjector; statement), it enabled me to add dependencies after bootstrapping like this $injector.loadNewModules(['ngCookies']);.

0人赞添加讨论(0) 举报

神经病院院长

4楼-- · 2019-01-13 01:33

If you wish to add multiple dependencies at once, you can pass them in push as follows:

<script>
    var app = angular.module('appName');
    app.requires.push('dependencyCtrl1', 'dependencyService1');
</script>

0人赞添加讨论(0) 举报

Juvenile、少年°

5楼-- · 2019-01-13 01:36

Simple... Get an instance of the module using the getter like this: var app = angular.module("App");

Then add to the "requires" collection like this: app.requires[app.requires.length] = "ngResource";

Anyway, this worked for me. GOOD LUCK!

0人赞添加讨论(0) 举报

祖国的老花朵

6楼-- · 2019-01-13 01:40

I solved it like this:

reference the app again:

var app = angular.module('app');

then push your new requirements to the requirements array:

app.requires.push('newDependency');

0人赞添加讨论(0) 举报

re-open and add dependencies to an already bootstr

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间