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

【问题标题】：Loading components and other dependencies with ocLazyLoad plugin使用 ocLazyLoad 插件加载组件和其他依赖项
【发布时间】：2016-10-29 01:00:57
【问题描述】：

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

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

【问题讨论】：

标签： javascript angularjs components lazy-loading oclazyload

【解决方案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')
    }
});

【讨论】：