Question

我希望CodeMirror加载ocLazyLoad。由于xml.min.js，htmlmixed.min.js，css.min.js等都需要在codemirror.min.js之前加载serie: true。我尝试使用$ocLazyLoadProvider.config({ debug: true, serie: true, modules: [{ name : 'codeMirror1', files: [ "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/codemirror.min.css", "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/codemirror.min.js" ]},{ name : 'codeMirror2', files: [ "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/mode/xml/xml.min.js", "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/mode/htmlmixed/htmlmixed.min.js", "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/mode/css/css.min.js", "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/mode/javascript/javascript.min.js", "https://cdnjs.cloudflare.com/ajax/libs/angular-ui-codemirror/0.3.0/ui-codemirror.min.js" ]}] }); $stateProvider .state('site', { abstract: true, template: '<ui-view/>', resolve: { loadSiteCtrl: ['$ocLazyLoad', function ($ocLazyLoad) { return $ocLazyLoad.load(['codeMirror1', 'codeMirror2']) }] }, })来确保加载顺序：

angular.js:13920 ocLazyLoad.fileLoaded https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/codemirror.min.css
xml.min.js:1 Uncaught ReferenceError: CodeMirror is not defined
    at xml.min.js:1
    at xml.min.js:1
(anonymous) @ xml.min.js:1
(anonymous) @ xml.min.js:1
angular.js:13920 ocLazyLoad.fileLoaded https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/mode/xml/xml.min.js
htmlmixed.min.js:1 Uncaught ReferenceError: CodeMirror is not defined
    at htmlmixed.min.js:1
    at htmlmixed.min.js:1
(anonymous) @ htmlmixed.min.js:1
(anonymous) @ htmlmixed.min.js:1
angular.js:13920 ocLazyLoad.fileLoaded https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/mode/htmlmixed/htmlmixed.min.js
css.min.js:1 Uncaught ReferenceError: CodeMirror is not defined
    at css.min.js:1
    at css.min.js:1
(anonymous) @ css.min.js:1
(anonymous) @ css.min.js:1
angular.js:13920 ocLazyLoad.fileLoaded https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/mode/css/css.min.js
javascript.min.js:1 Uncaught ReferenceError: CodeMirror is not defined
    at javascript.min.js:1
    at javascript.min.js:1
(anonymous) @ javascript.min.js:1
(anonymous) @ javascript.min.js:1
angular.js:13920 ocLazyLoad.fileLoaded https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/mode/javascript/javascript.min.js
angular.js:13920 ocLazyLoad.fileLoaded https://cdnjs.cloudflare.com/ajax/libs/angular-ui-codemirror/0.3.0/ui-codemirror.min.js
angular.js:13920 ocLazyLoad.componentLoaded (3) ["ui.codemirror", "constant", "uiCodemirrorConfig"]
angular.js:13920 ocLazyLoad.componentLoaded (3) ["ui.codemirror", "directive", "uiCodemirror"]
angular.js:13920 ocLazyLoad.moduleLoaded ui.codemirror
angular.js:13920 ocLazyLoad.fileLoaded https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/codemirror.min.js

但是，上面的代码仍会返回：

Row row = RowFactory.create(new String[][] {s.split(",")});

有谁知道什么是错的？

Answer 1

问题是您要将serie选项添加到提供程序配置对象which is ignored，因为它将获取每个模块的配置并将其并行加载。基本上该选项需要出现在每个模块上，需要按顺序加载脚本。

快速解决方案是使用promises来确保按顺序加载模块。由于load()调用返回一个promise，我们可以在那之后执行第二次加载：

$ocLazyLoadProvider.config({
    debug: true,
    modules: [{ 
        name : 'codeMirror1', 
        files: [
            "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/codemirror.min.css",
            "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/codemirror.min.js"
    ]},{
        name : 'codeMirror2',
        files: [
            "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/mode/xml/xml.min.js",
            "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/mode/htmlmixed/htmlmixed.min.js",
            ...
    ]}]
});

...
loadSiteCtrl: ['$ocLazyLoad', function ($ocLazyLoad) {
    return $ocLazyLoad.load(['codeMirror1']).then(function() {
      return $ocLazyLoad.load(['codeMirror2'])
    });
}]
...

检查this plunker以获取相关的工作示例。

或者，由于CodeMirror supports module loaders和ocLazyLoad plays nicely with requireJS您可能会对尝试它感兴趣。您可以将requireJS设置为ocLazyLoad上的模块的加载程序，并在加载依赖的模块时加载 CodeMirror，它会确保它们已经加载（意味着你不需要连续完成任务）。

Answer 2

不是为不同的库创建模块，而是尝试使用此方法并查看它是否有效，因为它对我运行正常：

resolve: {
  plugins: ['$ocLazyLoad', function($ocLazyLoad) {
    return $ocLazyLoad.load([
      "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/codemirror.min.css",
      "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/codemirror.min.js",
      "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/mode/xml/xml.min.js",
      "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/mode/htmlmixed/htmlmixed.min.js",
      "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/mode/css/css.min.js",
      "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/mode/javascript/javascript.min.js",
      "https://cdnjs.cloudflare.com/ajax/libs/angular-ui-codemirror/0.3.0/ui-codemirror.min.js"
    ]);
  }]
}

`serie：true`无法确保模块的加载顺序

2 个答案: