Загрузка компонентов и других зависимостей с помощью плагина 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') 
    } 
});