Angularjs 使用oclazyload和webpack以角度加载资源
我有一个模块化的应用程序,有多个供应商插件,我只需要在每个视图中加载必要的插件 这是我的路线:Angularjs 使用oclazyload和webpack以角度加载资源,angularjs,angular-ui-router,webpack-2,oclazyload,Angularjs,Angular Ui Router,Webpack 2,Oclazyload,我有一个模块化的应用程序,有多个供应商插件,我只需要在每个视图中加载必要的插件 这是我的路线: (function() { 'use strict'; angular.module('app.empresas').config(config); function config($stateProvider, $ocLazyLoadProvider) { $stateProvider .state('app.empresas',
(function() {
'use strict';
angular.module('app.empresas').config(config);
function config($stateProvider, $ocLazyLoadProvider) {
$stateProvider
.state('app.empresas', {
url: '/empresas?Filter',
views: {
'main@': {
template: require('./empresas/empresas.html'),
controller: "AppController as App"
}
},
Params: {
title: 'Empresas',
bodyClass: '',
requiredLogin: true
}
})
.state('app.empresas.view', {
url: '/empresas/:ItemId',
views: {
'main@': {
template: require('./empresas.view/empresas.view.html'),
controller: "AppController as App"
}
},
Params: {
title: 'Empresa',
bodyClass: '',
requiredLogin: true
}
})
}
})();
我知道如何在没有webpack的情况下包含oclazyload资源,但现在我需要为每个视图包含特定的资源。?如何做到这一点?我用这个片段解决了这个问题: 这是一个州的样本
.state('app.empresas.view', {
url: '/empresas/:ItemId',
views: {
'main@': {
templateUrl: '/app/main/apps/empresas/empresas.view/empresas.view.html',
controller: "AppController as App"
}
},
Params: {
title: 'Empresa',
bodyClass: '',
requiredLogin: true
},
resolve: ['$q', '$ocLazyLoad', function ($q, $ocLazyLoad) {
var deferred = $q.defer();
var mod = importAll(require.context('./empresas.view/', true, /\.*$/));
$ocLazyLoad.load({
name: 'app.empresas.view'
});
deferred.resolve(mod);
return deferred.promise;
}]
})
我使用此函数与require一起使用oclazyload加载整个文件夹,并使用webpack在一个单独的文件包中编译:
function importAll (r) {r.keys().forEach(r);}
我可以在一个视图中加载css、html、js文件,而不需要逐个加载文件