使用 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']
  }]
});

但是我没有专门的模块来实现这个 component.It 可以使用这个插件吗？

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

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

Loading components and other dependencies with ocLazyLoad plugin

javascript

angularjs

components

lazy-loading

oclazyload