有没有办法为已经引导的角度模块注入延迟依赖?这就是我的意思:
假设我有一个站点范围的角度应用程序,定义为:
// 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', ...]);
或者自己定义每个模块,然后将所有内容注入主应用程序(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.js
,home.js
等),而不必在每次添加或删除某些内容时修改引导逻辑。
有没有办法在App已经引导时引入依赖项?什么是惯用的方式(或方法)来做到这一点?我倾向于后一种解决方案,但想看看我描述的方式是否也可以完成。谢谢。
我这样解决了:
再次引用该应用:
var app = angular.module('app');
然后将新需求推送到需求数组:
app.requires.push('newDependency');
简单...使用getter获取模块的实例,如下所示:var app = angular.module(“App”);
然后像这样添加到“requires”集合:app.requires [app.requires.length] =“ngResource”;
无论如何,这对我有用。祝好运!
根据this proposal on the Angular JS google group,此功能目前尚不存在。希望核心团队决定添加此功能,可以自己使用它。
如果您希望一次添加多个依赖项,可以按如下方式传递它们:
<script>
var app = angular.module('appName');
app.requires.push('dependencyCtrl1', 'dependencyService1');
</script>
我意识到这是一个老问题,然而,还没有提供工作答案,所以我决定分享我是如何解决它的。
解决方案需要分支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.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。