我正在为大型AngularJS应用程序使用webpack寻求帮助。我们正在使用基于功能的文件夹结构（每个功能/页面都有一个模块，并且它们具有控制器和指令）。我已经成功配置了webpack使其可以与Grunt一起使用，Grunt可以产生一个捆绑包。我想创建块，因为它将成为一个大型应用程序，我们想异步加载模块（页面/功能）工件。
我会通过一些的WebPack例如使用'code splitting'使用require([deps],fn )语法。但是我无法让这些块延迟加载。首先，我不知道确切的位置，在AngularJS将用户路由到下一页之前，我需要导入这些块。我正在努力寻找明确的责任分离。
有人指出我一个示例AngularJS应用程序，其中使用webpack在每条路由之后异步加载控制器/指令/过滤器吗？
我所关注的链接很少：我应该使用Browserify还是Webpack懒惰地加载angular 1.x中的依赖项吗 ？https://github.com/petehunt/webpack-howto#9-async-loading 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-router。您可以在templateProvider此处指定一个基本上是用于异步加载模板的函数
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句