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

Question

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

我为这个组件创建了一个组件(名为component.js)和控制器(在单独的文件componentCtrl.js中)，然后我有常量，用于控制器(在分隔的文件constants.js中也是如此)。我需要装载这些文件。当我用这样的东西时：

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

我的依赖项加载得很好。但我需要这个组件在更多的视图。然后我不得不一遍又一遍地写这段代码。在使用延迟加载函数之前，我可以定义这个资源数组吗？

当我有模块的时候，很简单

$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')
    }
});