Question

我遇到system.js使用angular应用程序的情况，我需要能够在每页的基础上包含特定的System.import(f)语句，但必须全部包括之前角度完成引导并加载其模块。

我在这个问题上花了很长时间，最终这就是我设计的解决方法;

在我的 config.js 中，我这样做......

config.js

// .... configuration ... //

Promise.all([
    System.import('jquery'),
    System.import('angular'),
    System.import('angular.ng'),
    System.import('bootstrap')
]).then(function() {
    $(document).on('angular', function() {
        angular.bootstrap(document, ['module-name']); $('body').removeClass('cloak');
    });
});

然后我有一个名为css的{{1}}类。我试过.cloak但发现它没有完成这项工作（我怀疑是因为我推迟了角度自举）

ng-cloak

然后在我的个人页面上，我使用这种代码来破坏我的页面特定的导入并最终完成该过程。

.cloak { visibility: hidden; }

这是基本的想法;在通过 <script src="assets/js/system.js"></script> <script src="config.js"></script> <script> System.import('app/main').then(function (e) { Promise.all([ System.import('app/controllers/index'), System.import('app/controllers/read'), System.import('app/controllers/edit/article'), System.import('scripts/lib/init') ]).then(function (m) { $(document).trigger('angular'); }); }); </script>导入所有内容之前，我不允许angular完成其模块的连接。目前，这个似乎工作正常。

我的问题是我不是一个非常优秀的程序员，我也不是很聪明。这似乎是system.js设计方式带来的一个非常标准的正常问题，我发现是一个更好的，内置的解决方案，我缺少或还没有找到。

在此之前有没有其他人可以提供一些建议呢？

我需要推迟模块接线的原因是因为我有各种角度控制器和模型等，我不希望它们所有加载到每个页面上。（我的意思是，将脚本缩减到只有当前需要的脚本是模块加载器的一个要点，除了依赖解析之外）。

尝试使用system.js指令经常导致麻烦 - 因为角度会在所有内容完成并加载之前尝试加载，因此在某些页面上找不到像某些控制器之类的东西。

我需要替代方案的最大原因是这种方法不能很好地用于缩小打字稿。

Answer 1

这是ng-cloak的一个非常标准的问题。也许是一种更好的方法，但是自从我开始使用角度以来，我只是在我的index.html文件的标题中定义了ng-cloak，如下所示：

<style>
[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak {
    display: none !important;
}
</style>

并添加了class =＆＃34; ng-cloak＆＃34;到我页面的body标签。它效果很好，当Angular完成加载时，它的内部ng-cloak样式有效地覆盖了我的。

似乎将内联脚本基本上按原样移动到外部文件，仍然允许它完全按照您的方式运行然后缩小，这样就可以了。

听起来您还没有在这里创建SPA，因为如果我理解正确，您就会从每个页面调用config.jss。您可能想重新考虑并使用SPA。您可能最终会预先加载所有内容，但您只需加载一次。

处理systemjs加载时间和顺序 - 必须有更好的方法

config.js

1 个答案: