Question

ZI正在构建一个基于用户首选项/配置的应用程序，我将在页面中加载不同的模块。

为了实现这一点，当页面加载时，我运行一个脚本来构建脚本标签列表，并将所有这些标签添加到页面主体。我还构建了一个依赖注入器列表，并在加载应用程序时包含依赖项。

我推迟使用

延迟app app

window.name = "NG_DEFER_BOOTSTRAP!";

然后在添加脚本标记后，我运行

angular.element(document).ready(function () {
      setTimeout(function(){
          angular.resumeBootstrap();
      },1000);
});

我有两个问题。首先，由于某种原因，如果我在配置文件中包含angular.js，我会收到错误，指的是找不到angular。

我可以看到角度正被下载到浏览器，但我猜这是一个时间问题，因为角度下载的时间比许多其他文件要长。

我只是将角度放在常规脚本标签中，但后来我发现我加载的其中一个模块需要jQuery和jQuery UI，两者都要在angular之前加载，这意味着更多的文件作为脚本加载，并且可能不需要该用户。

我查看了使用require.js并将config参数传递给

requirejs.config.paths = //the custom built list from the users configuration file

但是，据我所知，这也意味着我需要将所有模块包装在

中

requirejs(['jquery', 'angular', 'otherModule'],
function   ($, angular, otherModule) {
    // my module stuff here
});

有关如何完成此操作的任何其他建议？有没有比require.js更好的AMD？我在这里发布了我的所有代码，但我不认为它会有所帮助，因为问题来自浏览器在文档准备好后下载文件。

Answer 1

据我所知，RequireJs是最好的AMD实现。

如果你想指定你的模块，你最好将你的模块包装在define个电话中：

define(['jquery', 'angular', 'otherModule'],
function   ($, angular, otherModule) {
    // DO NOT FORGET TO RETURN YOUR MODULE!
});

另外，为什么不在domReady上开始申请？您可以使用this requirejs plugin。

以下是针对您的案例的基本requirejs配置：

requirejs.config({
   paths : {
      jquery : 'libs/jquery',
      jqueryUi : 'libs/jqueryui',
      angular : 'libs/angular'
   },
   shim : {
      angular : {exports : 'angular', deps : ['jquery']},
      jqueryUI: {exports : '$', deps : ['jquery']}
   },
   map : {
      '*' : {
         domReady : 'require-plugins/domReady'
      }
   }
});


requirejs(['domReady!', 'angular'], function(document, angular) {
  //Thank to domReady!, this callback executes on domReady events. And no need in jquery or angular:)
});

动态地将角色标签添加到角度应用

1 个答案: