Question

我没有在单页应用程序上使用角度，但是由于加载顺序问题，我想定义主应用程序模块一次。同时我想在每页上注入/要求模块而不是毯子，因为不是所有的JS文件都会被加载到每一页上。

我可以定义没有必需模块的应用程序：

app = angular.module（“app”，[]）

并从控制器或稍后阶段注入？

Answer 1

在我的头顶上，在阅读你的问题后，我可以想到一个可能的解决方案/黑客。

我们的想法是在包含任何模块之前定义一个依赖项数组，并在每个模块中添加它：

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

老实说，我并没有真正考虑过这种方法可能带来的任何影响/复杂性，而且在我这样做之前我无法保证这一点（为什么对脚本文件和缓存的调用不是很少）用例？）

Answer 2

不，目前尚未获得官方支持。在引导AngularJS应用程序之前，必须在浏览器中加载所有模块（并声明为主应用程序模块的依赖项）。

Answer 3

使用Tiago的好主意（赞成他！），我的模块中有以下内容：

window.dependencies = _.union(window.dependencies || [], [
    "ngRoute",
    "app.mymodule1"
]);

angular
    .module("app.mymodule1", [])
    .config(["$routeProvider", function ($routeProvider) {
        // more code
    }]);

这是我的app.js：

var app;

window.dependencies = _.union(window.dependencies || [], [
    "ngRoute",
    "app.anothermodule"
]);

window.app = app = angular.module("app", window.dependencies);

我使用LoDash，因此我union依赖关系来获取一组唯一值 - 我的一些模块使用与app.js相同的依赖关系，例如ngRoute。

我的脚本包含在body标记的底部，如下所示：

<!-- scripts from other pages/modules included here -->

<script src="/js/anothermodule/anothermodule.js"></script>
<script src="/js/app.js"></script>

像魅力一样！

我的页面共享一个“主”页面，但我在自己的文件中有模块定义，所以我需要这样的东西。

Answer 4

我们可以使用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'
    });
    }]);

在myModule.js

中

  app.requires.push('app.myModule');

并在index.html中，首先添加app.js，然后添加myModule.js。通过这种方式，您可以包含n个模块而无需修改app.js。

从app.js

动态包含myModule.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']);
                     });
     }

注意：这里我们手动引导应用程序，以便动态加载的模块也包含在我们的应用程序中

Answer 5

我知道它不是很漂亮但是要做到以下几点：

var injectedDependencies = [.....];
angular.prevmodule = angular.module;
angular.module = function(name, params){
    if(params){
        params.push(injectedDependencies);
    }
    return angular.prevmodule.apply(angular, arguments);
}

编辑：请注意，如果您想要在不需要知道应用程序的情况下注入模块（例如，用于记录，监控，安全性等），这很有用，但如果您想在应用程序引导后注入'em，则不行

Answer 6

我正在努力解决同样的问题。我认为http://blog.getelementsbyidea.com/load-a-module-on-demand-with-angularjs/可能会做你想要的。

在它的github https://github.com/ocombe/ocLazyLoad上你可以找到：

注入的唯一应用是应用https://github.com/ocombe/ocLazyLoad/blob/master/examples/example1/index.html#L2
应用正在加载AppCtrl.js https://github.com/ocombe/ocLazyLoad/blob/master/examples/example1/js/app.js#L24
AppCtrl.js稍后在运行时加载网格https://github.com/ocombe/ocLazyLoad/blob/master/examples/example1/js/AppCtrl.js#L28（并且异步）！的 VOI＆＃39; LA

这可能看起来有点复杂，但如果您真的对在运行时加载它们感兴趣，这可能是唯一的解决方案，除了手动modyfing _invokeQueue。

如何动态地将模块注入主Angular应用程序模块

6 个答案: