1

I'm working with AngularJS and ocLazyLoad plugin. And I can't find a solution for my problem.

I have created one component (named as component.js) and controller for this component (in separate file componentCtrl.js) and then I have constants, which I use in controller(it's too in separated file constants.js). And I need to load these files. When I use something like this:

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

My dependencies is loaded fine. But I need this component in more views. Then I have to write this code again and again. Can I define this array of resources before using in lazy load function?

When I have module, It's simple

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

But I don't have special module for this component.It's possible with this plugin ?

4

1 回答 1

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')
    }
});
于 2016-10-29T03:48:33.297 回答