89

有没有办法将后期依赖注入已经引导的角度模块？这就是我的意思：

假设我有一个站点范围的角度应用程序，定义为：

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

在每一页中：

<html ng-app="App">

稍后，我将重新打开应用程序以根据当前页面的需要添加逻辑：

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

现在，假设其中一个按需逻辑位也需要它们自己的依赖项（如ngTouch、ngAnimate、ngResource等）。如何将它们附加到基本应用程序？这似乎不起作用：

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

我意识到我可以提前做所有事情，即-

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

或者自己定义每个模块，然后将所有内容注入主应用程序（更多信息请参见此处）：

// 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'])

但这需要我每次都使用当前页面的依赖项初始化应用程序。

我更喜欢app.js在每个页面中包含基本内容，并简单地为每个页面引入所需的扩展（reports.js、home.js等），而无需在每次添加或删除某些内容时修改引导逻辑。

当应用程序已经启动时，有没有办法引入依赖项？什么被认为是惯用的方式（或方式）来做到这一点？我倾向于后一种解决方案，但想看看我描述的方式是否也可以完成。谢谢。

4

6 回答 6

115

我是这样解决的：

再次引用该应用程序：

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

然后将您的新需求推送到需求数组：

app.requires.push('newDependency');
于 2015-02-04T07:20:42.383 回答
12

简单...使用 getter 获取模块的实例，如下所示： var app = angular.module("App");

然后像这样添加到“requires”集合中：app.requires[app.requires.length] = "ngResource";

无论如何，这对我有用。祝你好运！

于 2015-01-04T17:27:47.457 回答
9

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.

于 2013-11-01T02:16:22.917 回答
4

如果您希望一次添加多个依赖项，可以按如下方式在 push 中传递它们：

<script>
    var app = angular.module('appName');
    app.requires.push('dependencyCtrl1', 'dependencyService1');
</script>
于 2015-06-21T10:51:50.417 回答
4

我意识到这是一个老问题，但是，还没有提供有效的答案，所以我决定分享我是如何解决它的。

该解决方案需要分叉 Angular，因此您不能再使用 CDN。但是修改非常小，所以我很惊讶为什么 Angular 中不存在这个功能。

我点击了该问题的其他答案之一中提供的谷歌群组链接。在那里我找到了以下代码，它解决了这个问题：

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

当我将此代码添加到 angular 1.5.0 源代码中的第 4414 行时（在createInjector函数内部，return instanceInjector;语句之前），它使我能够像这样在引导后添加依赖项$injector.loadNewModules(['ngCookies']);。

于 2016-06-18T22:35:26.350 回答
1

从 1.6.7 版本开始，现在可以在使用$injector.loadNewModules([modules]). 以下是取自 AngularJS 文档的示例：

app.factory('loadModule', function($injector) {
   return function loadModule(moduleName, bundleUrl) {
     return getScript(bundleUrl).then(function() { $injector.loadNewModules([moduleName]); });
   };
})

请阅读有关 loadNewModules 的完整文档，因为它周围有一些陷阱。

omkadiri还提供了一个非常好的示例应用程序，将其与 ui-router 一起使用。

于 2019-04-20T19:05:47.280 回答