带有 angularjs 和 requirejs 的延迟加载模块

Lazy loading modules with angularjs and requirejs

本文关键字：延迟加载 模块 requirejs angularjs 带有      更新时间：2023-09-26
我已经解决了这个问题很长时间，

因为有很多文章展示了如何加载指令、服务和其他使用模块这个词来描述它们的角度组件......最终导致了一场 SEO 噩梦。

所有解决方案都非常复杂，使得划分JS文件几乎无关紧要。

有没有人找到一种简单的方法，在需要时将角度模块依赖项注入主模块？

注意：由于我使用的是require.js因此实际的JS已经存在（在需要时也延迟加载）。因此，真正需要的只是将模块注入到角度上。

这是我接近的程度：

  1. 索引中的窗口函数.html加载辅助.js文件

    <script type="text/javascript">
    var hasBackLoaded = false;
function loadBackOfficeJs (cb) {
    console.log("loadBackOfficeJs");
    if(!hasBackLoaded){
        var newScript = document.createElement('script');
        newScript.type = 'text/javascript';
        newScript.src = '<%=dist_cdn%>/scripts/back.js';
        newScript.onload = backLoaded;
        document.body.appendChild(newScript);
        function backLoaded(){
            console.log("back loaded")
            hasBackLoaded = true;
            cb();
        }
    } else {
        cb();
    }
}

  2. 调用前面的函数并尝试将 angular 模块加载到 angular 中

    loadBackOfficeJs(function(){ require(['back'], function(){ //angular modules should be injected here.. somehow }); });

你应该看看这个lib ocLazyload

最基本的用例是通过提供的$ocLazyLoad服务加载模块。

$ocLazyLoad.load('yourModule.js');

这篇文章是由库的作者在创建库时写的。虽然现在有点旧了，但它是延迟加载模块内部的一个很好的切入点。

相关文章：