重新打开并向已经引导的应用程序添加依赖项

问题描述 投票:89回答:6

有没有办法为已经引导的角度模块注入延迟依赖?这就是我的意思:

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

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

现在,假设其中一个按需逻辑位也需要它们自己的依赖(如ngTouchngAnimatengResource等)。如何将它们附加到基础应用程序?这似乎不起作用:

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

或者自己定义每个模块,然后将所有内容注入主应用程序(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'])

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

我更喜欢在每个页面中包含基本的app.js,并简单地向每个页面引入所需的扩展(reports.jshome.js等),而不必在每次添加或删除某些内容时修改引导逻辑。

有没有办法在App已经引导时引入依赖项?什么是惯用的方式(或方法)来做到这一点?我倾向于后一种解决方案,但想看看我描述的方式是否也可以完成。谢谢。

angularjs dependency-injection bootstrapping
6个回答
115
投票

我这样解决了:

再次引用该应用:

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

然后将新需求推送到需求数组:

app.requires.push('newDependency');

12
投票

简单...使用getter获取模块的实例,如下所示:var app = angular.module(“App”);

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

无论如何,这对我有用。祝好运!


9
投票

根据this proposal on the Angular JS google group,此功能目前尚不存在。希望核心团队决定添加此功能,可以自己使用它。


4
投票

如果您希望一次添加多个依赖项,可以按如下方式传递它们:

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

4
投票

我意识到这是一个老问题,然而,还没有提供工作答案,所以我决定分享我是如何解决它的。

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

我跟随the link to google groups提供的one of the other answers来回答这个问题。在那里我找到了以下代码,它解决了这个问题:

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

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


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]); });
   };
})

请阅读full documentation about loadNewModules,因为周围有一些问题。

还有一个非常好的sample app by omkadiri使用ui-router。

© www.soinside.com 2019 - 2024. All rights reserved.