Javascript 是否有AngularJS的动态模块加载器使用约定优先于配置?

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

我能找到的大多数动态模块都不是真正的动态模块,实际上是惰性加载程序,因为它们主要要求您在配置文件和寄存器中注册您想要加载的内容

我正在寻找一个加载js的方式使用公约,只是自动加载文件夹下的任何东西为我的一页应用程序

比如:

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 -->