AngularJS与Webpack集成

Question

我正在寻找一些关于使用webpack的帮助，用于一个大型AngularJS应用程序。我们使用基于特性的文件夹结构（每个特性/页面都有一个模块，它们有控制器、指令）。我已经成功地配置了webpack，使其能够与Grunt一起工作，生成一个包。我想创建块，因为它将是一个大的应用程序，我们想要加载模块（页面/特征）工件异步。

我将通过一些webpack示例使用require([deps],fn)语法使用“code splitting”。然而，我不能得到块懒惰加载。首先，我不知道具体在哪里，我需要在AngularJS将用户路由到下一个页面之前导入这些块。我正在努力找到一个明确的责任分工。

有人给我指出了一个示例AngularJS应用程序，其中webpack用于在每条路由之后异步加载控制器/指令/html" target="_blank">过滤器？

下面的几个链接是：我应该使用Browserify还是Webpack来惰性加载angular 1.x中的依赖项https://github.com/petehunt/webpack-howto#9-async-loading http://dontkry.com/posts/code/single-page-module-with-webpack.html

Answer 1

Sagar Ganatra写了一篇关于代码拆分的有帮助的博客文章。

令人惊讶的是，Angular的模块系统并不真正支持代码拆分。但是，有一种方法可以通过在配置阶段保存对Angular的特殊提供程序的引用来实现代码拆分。

[...]当Angular初始化或引导应用程序时，函数-控制器、服务等。在模块实例上可用。在这里，我们是懒惰地加载组件，功能在稍后的时间不可用；因此，我们必须使用各种提供程序函数并注册这些组件。提供程序仅在config方法中可用，因此当应用程序初始化时，我们必须在config函数中存储这些提供程序的引用。

window.app.config([
    '$routeProvider',
    '$controllerProvider',
    '$compileProvider',
    '$filterProvider',
    '$provide',
    function ($routeProvider, $controllerProvider, $compileProvider, $filterProvider, $provide) {

        $routeProvider.when('/login', {
            templateUrl: 'components/login/partials/login.html',
            resolve: {
                load: ['$q', '$rootScope', function ($q, $rootScope) {

                    var deferred = $q.defer();

                    // lazy load controllers, etc.
                    require ([
                        'components/login/controllers/loginController',
                        'components/login/services/loginService'
                    ], function () {

                        $rootScope.$apply(function () {
                            deferred.resolve();
                        });

                    });

                    return deferred.promise;
                }]
            }
        });


        //store a reference to various provider functions
        window.app.components = {
            controller: $controllerProvider.register,
            service: $provide.service
        };

    }
]);

app.components.controller('loginController');