使用 oclazyload 和 webpack 以角度加载资源答案

【问题标题】：Load resources in angular with oclazyload and webpack使用 oclazyload 和 webpack 以角度加载资源
【发布时间】：2017-04-29 15:03:17
【问题描述】：

我有一个模块化应用程序，它有多个供应商插件，我只需要在每个视图中加载必要的内容。

这是我的路线：

(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 资源，但现在我需要为每个视图包含特定资源。 ¿ 怎么能做到这一点？

【问题讨论】：

标签： angularjs angular-ui-router webpack-2 oclazyload

【解决方案1】：

我用这个 sn-p 解决了它：

这是一个州的样本

.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文件而不需要一个一个的文件

【讨论】：