使用 angularjs 和 requirejs 延迟加载模块

Question

我很长一段时间以来一直在努力解决这个问题，因为有很多文章展示了如何加载指令、服务和其他使用模块来描述它们的角度组件。最后得到一个SEO 的噩梦。

所有的解决方案都非常复杂，使得分割 JS 文件几乎不相关。

有没有人找到一种简单的方法来在需要时将 Angular 模块依赖注入到主模块中？

注意：因为我使用的是 require.js，所以实际的 JS 已经存在（也只是在需要时才延迟加载）。所以真正需要的只是将模块注入到 Angular 中。

这是我的距离：

1. index.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 }); });

Answer 1

你应该看看这个库ocLazyload

借助提供的 $ocLazyLoad 服务，大多数基本用例是加载模块。

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

这个article 是库的作者在启动库时编写的。虽然它现在有点老了，但它是延迟加载模块内部的一个很好的入口点。