Javascript 是否有AngularJS的动态模块加载器使用约定优先于配置?
我能找到的大多数动态模块都不是真正的动态模块,实际上是惰性加载程序,因为它们主要要求您在配置文件和寄存器中注册您想要加载的内容 我正在寻找一个加载js的方式使用公约,只是自动加载文件夹下的任何东西为我的一页应用程序 比如:Javascript 是否有AngularJS的动态模块加载器使用约定优先于配置?,javascript,angularjs,module,lazy-loading,convention-over-configur,Javascript,Angularjs,Module,Lazy Loading,Convention Over Configur,我能找到的大多数动态模块都不是真正的动态模块,实际上是惰性加载程序,因为它们主要要求您在配置文件和寄存器中注册您想要加载的内容 我正在寻找一个加载js的方式使用公约,只是自动加载文件夹下的任何东西为我的一页应用程序 比如: app public loader.js <-- no need to register anything manually modules module1 cont
app
public
loader.js <-- no need to register anything manually
modules
module1
controllers
controller1.js
controller2.js
directives
directive1.js
directive2.js
services
service1.js
service2.js
views
view1.js
view2.js
app
公众的
loader.js注意这里。
您说希望loaders.js位于公用文件夹中。您想做的事情只适用于服务器端工具,因为您无法从浏览器读取文件系统(没有服务器端协助)。因此,您不想向公众公开loaders.js文件
关于模块的一点是,它们可以帮助您为应用程序提供一些结构。当然,你不必使用这个(角度的方式,尽管如果你想用单元测试套件来支持你的应用程序*[见下文]),你应该这样做。如果您只想加载所有的模块,那么您根本不需要定义任何模块(只需定义一个)。但您仍然可以从文件系统中设置的结构中获益。有鉴于此,如果您的所有控制器、指令和服务都只属于“yourApp”,这是您将定义的唯一模块,这就足够了:
angular.module('yourApp', []); // defined once, maybe within an
// inline script tag at the top of your index.html
+(位于每个控制器/指令/服务的顶部):
在这种情况下,grunt html build将完成以下工作:
当然,由于grunt只是一个基于命令行的任务运行程序,因此这将在您的工作流中引入一个构建
步骤(即,您的应用程序将不会仅通过在web服务器中提供其文件夹的内容来工作)。每次添加新文件时,都必须再次运行grunt html构建任务
您将从grunt html构建中得到什么?
您将能够在index.html的头部表示一个部分,grunt html build将在其中插入您在配置中指定的所有文件,例如:
grunt.initConfig({
modulesPath: "modules",
htmlbuild: {
dist: {
src: 'index.html',
dest: 'public/',
options: {
relative: true,
scripts: {
modules: '<%= modulesPath%>/**/*.js'
}
}
}
}
});
grunt.initConfig({
模块路径:“模块”,
htmlbuild:{
地区:{
src:'index.html',
dest:“public/”,
选项:{
亲戚:对,,
脚本:{
模块:'/***.js'
}
}
}
}
});
然后在index.html中,将以下内容放在头顶(在加载angular后):
在这一部分中,将插入下面的所有.js脚本modules/
*只有一个大模块的缺点是,您将在单元测试中加载和实例化大量不必要的服务(即,无论您向应用程序的运行和配置块中注入什么)。这会增加测试运行程序浏览器的内存足迹,测试也会变慢。如果您想要自动加载的脚本列表,使用任务运行程序来维护单个concat&uglify脚本不是更好吗?仍然需要维护。我也可以用这个。但是我的项目越来越大,我想把它拆分并完全动态地自动加载,所以要添加一个新的控制器,我只需要将一个新文件放到模块下的controllers文件夹中。
grunt.initConfig({
modulesPath: "modules",
htmlbuild: {
dist: {
src: 'index.html',
dest: 'public/',
options: {
relative: true,
scripts: {
modules: '<%= modulesPath%>/**/*.js'
}
}
}
}
});
<!-- build:script modules-->
<!-- /build -->