使用 ocLazyLoad 插件加载组件和其他依赖项
Loading components and other dependencies with ocLazyLoad plugin
我正在使用 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 可以使用这个插件吗?
您可以定义一些常量或全局变量,然后像这样添加所有组件文件:
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')
}
});
我正在使用 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 可以使用这个插件吗?
您可以定义一些常量或全局变量,然后像这样添加所有组件文件:
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')
}
});