12

我没有在单页应用程序上使用角度，但是由于加载顺序问题，我想定义一次主应用程序模块。同时，我想在每页的基础上注入/需要模块，而不是一概而论，因为并非所有 JS 文件都会在每个页面上加载。

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

app = angular.module("app", [])

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

4

6 回答 6

24

在阅读您的问题后，我想到了一个可能的解决方案/黑客。

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

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

老实说，我并没有真正考虑过这种方法可能暗示的任何影响/并发症，并且在我这样做之前我不能真正保证这一点（为什么对脚本文件的调用和缓存对您的用例有好处？ )

于 2013-07-30T10:30:24.467 回答
8

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

于 2013-07-30T07:55:37.370 回答
7

我们可以通过使用来实现它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下一个。通过这种方式，您可以在不修改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']);
                     });
     }

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

于 2016-06-20T16:55:49.203 回答
6

使用 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，所以我合并依赖项以获得一组唯一值 - 我的一些模块使用与.app.jsngRoute

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

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

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

奇迹般有效！

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

于 2013-12-20T09:45:43.663 回答
0

我知道这不是很漂亮，但是如何做以下事情：

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

编辑：请注意，如果您想在应用程序不需要知道它们的情况下注入模块（例如用于日志记录、监控、安全等），但如果您想在应用程序启动后注入它们，则这很有用。

于 2014-09-12T13:22:55.540 回答
0

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

在其 github https://github.com/ocombe/ocLazyLoad你可以找到：

  1. 注入的唯一应用程序是应用程序https://github.com/ocombe/ocLazyLoad/blob/master/examples/example1/index.html#L2
  2. 应用程序正在加载AppCtrl.js https://github.com/ocombe/ocLazyLoad/blob/master/examples/example1/js/app.js#L24
  3. AppCtrl.js稍后在运行时（和异步）加载网格https://github.com/ocombe/ocLazyLoad/blob/master/examples/example1/js/AppCtrl.js#L28！瞧

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

于 2014-09-19T20:26:17.633 回答