angularjs - 如何动态地将模块注入(inject)主 Angular 应用程序模块

Question

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

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

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

并让它们从 Controller 或稍后阶段注入(inject)？

Answer 1

我们可以使用 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 的情况下包含 n 个模块.

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

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