AngularJS和Webpack集成 [英] AngularJS and Webpack Integration
问题描述
我正在寻找一些帮助,使用 webpack 获取大型AngularJS应用程序。我们正在使用基于功能的文件夹结构(每个功能/页面都有一个模块,它们有控制器,指令)。我已成功配置webpack以使其与Grunt一起工作,Grunt生成一个单独的捆绑包。我想创建一个块,因为它将成为一个大型应用程序,我们想异步加载模块(页面/功能)工件。
I am looking for some help with using webpack for a large AngularJS application. We are using folder structure based on feature (each feature/page has a module and they have controllers, directives). I have successfully configured webpack to get it working with Grunt, which produces one single bundle. I want to create chunks as its going to be a large app, we would like to load modules (page/feature) artifacts asynchronously.
我正在通过一些webpack示例使用'代码拆分'
使用 require([deps],fn)
语法。但是我无法让懒人装满块。首先,我不知道究竟在哪里,我需要在AngularJS将用户路由到下一页之前导入这些块。我正在努力寻找明确的责任分离。
I am going through some of the webpack example to use 'code splitting'
using require([deps],fn )
syntax. However I couldn't get the chunks lazy-loaded. First of all, I don't know where exactly, I would need to import these chunks before AngularJS would route the user to next page. I am struggling to find a clear separation of responsibility.
是否有人向我指出一个示例AngularJS应用程序,其中webpack用于在每个路由后异步加载控制器/指令/过滤器?
Did someone point me to an example AngularJS application where webpack is used to load controllers/directives/filters asynchronously after each route?
我关注的链接很少:
我应该使用Browserify或Webpack来延迟加载角度为1.x的依赖项
https://github.com/petehunt/webpack-howto#9-async-loading
http://dontkry.com/ posts / code / single-page-modules-with-webpack.html
Few of the links I am following: Should I use Browserify or Webpack for lazy loading of dependancies in 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写了一个有用的<关于代码拆分的href =http://www.sagarganatra.com/2014/08/lazy-loading-angularjs-components-using-providers.html>博文。
Sagar Ganatra wrote a helpful blog post about code splitting.
令人惊讶的是,angular的模块系统并不支持代码拆分。但是,有一种方法可以通过在配置阶段保存对angular的特殊提供程序的引用来实现代码拆分。
Suprisingly code splitting isn't really supported by angular's module system. However, there is a way to achieve code splitting by saving a reference to angular's special providers during the config-phase.
[...当Angular初始化或引导应用程序,功能 - 控制器,服务等时。在模块实例上可用。在这里,我们延迟加载组件,稍后无法使用这些功能;因此,我们必须使用各种提供程序函数并注册这些组件。提供程序仅在config方法中可用,因此在初始化应用程序时,我们必须在config函数中存储这些提供程序的引用。
[...] when Angular initializes or bootstraps the application, functions - controller, service etc,. are available on the module instance. Here, we are lazy loading the components and the functions are not available at a later point; therefore we must use the various provider functions and register these components. The providers are available only in the config method and hence we will have to store a reference of these providers in the config function when the application is initialized.
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');
懒洋洋地定义你的新控制器。
to define your new controller lazily.
如果您想延迟加载模板,我建议使用 ui-router 。在那里你可以指定一个 templateProvider
这是基本上是一个函数加载模板异步
If you want to lazy-load your templates too I recommend to use the ui-router. There you can specify a templateProvider
which is basically a function to load templates async
这篇关于AngularJS和Webpack集成的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!