AngularJS和Webpack集成

Question

我正在寻找一些帮助使用webpack的大型AngularJS应用程序.我们正在使用基于功能的文件夹结构(每个功能/页面都有一个模块,它们有控制器,指令).我已成功配置webpack以使其与Grunt一起工作,Grunt生成一个单独的捆绑包.我想创建一个块作为一个大型应用程序,我们想异步加载模块(页面/功能)工件.

我正在浏览一些'code splitting'使用require([deps],fn )语法的webpack示例.但是我无法得到懒散的块.首先,我不知道究竟在哪里,我需要在AngularJS将用户路由到下一页之前导入这些块.我正在努力寻找明确的责任分离.

是否有人向我指出一个示例AngularJS应用程序,其中webpack用于在每个路由后异步加载控制器/指令/过滤器？

我关注的链接很少: 我应该使用Browserify或Webpack来延迟加载1.x https://github.com/petehunt/webpack-howto#9-async-loading http://dontkry.com中的依赖项/posts/code/single-page-modules-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
        };

    }
]);

现在在你loginController的内部,你写

app.components.controller('loginController');

懒洋洋地定义你的新控制器.

如果您想延迟加载模板,我建议使用ui-router.在那里,你可以指定templateProvider它基本上加载模板异步函数