AngularJS and Webpack Integration

AngularJS and Webpack Integration

本文关键字：Integration Webpack and AngularJS      更新时间：2023-09-26

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

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

有人给我举了一个AngularJS应用程序的例子吗？在这个应用程序中，webpack用于在每条路由后异步加载控制器/指令/过滤器？

我关注的链接很少：我应该使用Browserify或Webpack在angular 1.x中延迟加载依赖关系吗https://github.com/petehunt/webpack-howto#9-异步加载http://dontkry.com/posts/code/single-page-modules-with-webpack.html

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路由器。在那里，您可以指定一个templateProvider，它基本上是一个加载模板异步的函数

这是https://github.com/webpack/webpack/issues/150

webpack是一个模块打包程序，而不是javascript加载程序。它从本地磁盘打包文件，不从web加载文件（除了它自己的块）。

使用javascript加载程序，即script.js

var $script = require("scriptjs");
$script("//ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js", function() {
  // ...
});
相关文章：