javascript - 使用 ocLazyLoad 插件加载组件和其他依赖项

Question

我正在使用 AngularJS 和 ocLazyLoad 插件。我找不到解决我的问题的方法。

我创建了一个组件(名为 component.js)和该组件的 Controller (在单独的文件 componentCtrl.js 中)，然后我有常量，我在 Controller 中使用(它也在单独的文件 constants.js 中)。我需要加载这些文件。当我使用这样的东西时:

loadPlugin: function ($ocLazyLoad) {
                    return $ocLazyLoad.load(
                        {
                            files: ['../componentCtrl.js','../constants.js',../,'component.js']
                        },...

我的依赖项加载正常。但我需要在更多 View 中使用这个组件。然后我必须一遍又一遍地编写这段代码。我可以在延迟加载函数中使用之前定义这个资源数组吗？

当我有模块时，这很简单

$ocLazyLoadProvider.config({
  modules: [{
    name: 'TestModule',
    files: ['source1', 'source2',..., 'sourceN']
  }]
});

但是我没有这个组件的特殊模块。这个插件可以吗？

Answer 1

您可以定义一些常量或全局变量，然后将所有组件文件添加到其中，如下所示:

angular.module('app')
        .constant('SIMPLE_COMPONENTS', {
            comp1: ['../componentCtrl.js', '../constants.js', 'component.js'],
            comp2: ['../componentCtrl2.js', '../constants2.js', 'component2.js'],
            compfoo: ['../componentfoo.js', '../constantsbar.js', 'componentfoo.js']
        });

然后在状态配置中定义一个函数，例如:

function getMeFoo(src) {
    return ['$ocLazyLoad', 'SIMPLE_COMPONENTS', function ($ocLazyLoad, SIMPLE_COMPONENTS) {
        if (SIMPLE_COMPONENTS[src]) {
            return $ocLazyLoad.load(SIMPLE_COMPONENTS[src]);
        }
    }]
}

现在只需在您的状态配置中使用它们即可:

.state('app.foo', {
    url: '/foo',
    templateUrl: 'views/foo.html',
    resolve: {
        dep1: getMeFoo('comp1')
    }
})

.state('app.bar', {
    url: '/bar',
    templateUrl: 'views/bar.html',
    resolve: {
        dep1: getMeFoo('comp1'),
        dep2: getMeFoo('comp2')
    }
});