javascript - Angular 脚本加载 : how to include all scripts in just one call

Question

我试图创建一个脚本，其中包含使我的 Angular 应用程序运行所需的所有脚本，但似乎不起作用:

function include(destination) {
    var e = window.document.createElement('script');
    e.setAttribute('src', destination);
    window.document.body.appendChild(e);
}

include('../Scripts/myApp/main.js');
include('../Scripts/myApp/appConfig.js');
include('../Scripts/myApp/MyAppController.js');
include('../Scripts/myApp/Service1.js');
include('../Scripts/myApp/Service2.js');

不幸的是，如果我尝试包含这样的应用程序脚本(顺便说一句，它们可以完美地加载到页面中)，我会收到错误消息，因为 Angular 检测到我的“ng-app='myAppName'”指令但没有找到为其声明的模块(我想是因为 Angular 检查时脚本尚未加载)。如果我然后尝试至少将模块实例化放在由 HTML 页面 (main.js) 直接调用的脚本上，那么它会提示 Controller 、服务等不存在，如果我将它们附加到它们自己的应用程序中文件(app.controller(), app.factory, ...)它不会提示但也不会发生。

看起来以这种方式加载脚本会使 Angular 无法执行它们，因为它们可能加载得太晚或其他原因。唯一的方法是在 HTML 上设置调用脚本的脚本标记。

但我觉得我错过了一些东西，有一种方法可以做到这一点，但我只是没有看到它。

有谁知道如何通过调用其中一个脚本来加载所有必需的脚本？ Angular 应用程序配置中是否有可以设置为执行此操作的内容？

它看起来太脏了，无法进行如此多的调用，而且性能也很差。

我已经检查过有一个叫做 Yeoman 的东西，但它看起来太大了，无法满足我的需求，然后我看到了 RequireJS，但我不确定这是否是我真正想要的，并且再次不确定我是否想安装另一个库只是为了这。最后，我看到在应用程序配置中，您可以设置在哪里可以找到 View ，甚至可以设置加载 Controller 的方式(我想，我不确定现在我的头很晕)所以我在想也许Angular 已经有办法做到这一点，看起来很自然，可以将脚本合二为一？

非常感谢。

Answer 1

这是因为您的脚本是异步加载的，而 Angular 在加载页面时同步编译文档(因为我假设 angular.js 在脚本包含中，因为我在上面没有看到它)。在这种情况下，您将必须手动引导应用程序，就像您在使用 RequireJS 时也必须做的那样。这是一个示例...因为您没有使用像 RequireJS 这样的库，所以我还设置了一个 hacky 计数器来查看您的所有脚本何时加载到回调和引导 Angular ，当所有脚本都已加载时:

function include(destination) {
    var e = window.document.createElement('script');
    e.setAttribute('src', destination);
    //IE detect when script has fully loaded... Increase number of loaded scripts and
    //call bootstrap if all have loaded.
    e.onreadystatechange = function () {
        if (newjs.readyState === "loaded" || newjs.readyState === "complete") {
            e.onreadystatechange = null;
            loadedScripts++;
        }

        if (loadedScripts === numScripts) {
            bootstrapAngular("myAppName");
        }
    }

    //Other browsers. Same logic as above - Increase scripts loaded and call bootstrap when complete
    e.onload = function () {
        loadedScripts++;
        if (loadedScripts === numScripts) {
            bootstrapAngular("myAppName");
        }
    }
    window.document.body.appendChild(e);
}

//5 scripts being loaded
var numScripts = 5;
//0 currently loaded
var loadedScripts = 0;
include('../Scripts/myApp/main.js');
include('../Scripts/myApp/appConfig.js');
include('../Scripts/myApp/MyAppController.js');
include('../Scripts/myApp/Service1.js');
include('../Scripts/myApp/Service2.js');

function bootstrapAngular(appName) {
    //Assuming you are putting ng-app at document level... Change to be your specific element.
    angular.bootstrap(document, [appName]);
}

上面的解决方案有点老套，因为我们要跟踪所有已加载的脚本。这是像 RequireJS 这样的库可以很好地发挥作用的地方，因为它会在加载您想要的脚本时调用您的回调函数。一个例子是:

require(['angular', 'jquery', 'appConfig', 'MyAppController', 'Service1', 'Service2'], function (ng, $) {
    //bootstrap when all is ready
    $(function () {
        ng.bootstrap(document, ["myAppName"]);
    });
});