2

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

我正在寻找一种使用约定的加载器 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
4

1 回答 1

0

在这里小心。您说您希望 loaders.js 位于您的公用文件夹中。您想要做的仅适用于服务器端工具，因为您无法从浏览器读取文件系统（没有服务器端帮助）。因此，您不想将 loaders.js 文件公开。

关于模块的事情是，它们可以帮助您为应用程序提供一些结构。当然，您不必使用它（角度方式，尽管如果您想通过单元测试套件支持您的应用程序 * [见下文]，您应该这样做）。如果您只想加载您拥有的所有内容，那么您根本不需要定义任何模块（只需要一个）。但是您仍然可以从您在文件系统中设置的结构中受益。鉴于此，如果您的所有控制器、指令和服务仅属于您将定义的唯一模块“yourApp”就足够了：

angular.module('yourApp', []); // defined once, maybe within an 
                               // inline script tag at the top of your index.html

+（在每个控制器/指令/服务的顶部）：

angular.module('yourApp').controller(.....

在这种情况下，grunt-html-build 将完成这项工作： https ://www.npmjs.org/package/grunt-html-build

当然，由于 grunt 只是一个基于命令行的任务运行器，这将向您的工作流程引入一个build步骤（即，您的应用程序仅通过在 Web 服务器中提供其文件夹的内容将无法工作）。每次添加新文件时，都必须再次运行 grunt-html-build 任务。

你将从 grunt-html-build 中得到什么？您将能够在 index.html 的头部表示一个部分，其中 grunt-html-build 将插入您在配置中指定的所有文件，例如：

grunt.initConfig({
    modulesPath: "modules",

    htmlbuild: {
        dist: {
            src: 'index.html',
            dest: 'public/',
            options: {
                relative: true,
                scripts: {
                    modules: '<%= modulesPath%>/**/*.js'
                }
            }
        }
    }
});

然后在你的 index.html 中，放在你的头顶（在你加载 angular 之后）：

<!-- build:script modules-->
<!-- /build -->

这是modules/将插入下面所有 .js 脚本的部分。

* 只有一个大模块的缺点是，您将在单元测试中加载和实例化许多不必要的服务（即，无论您注入应用程序的运行和配置块中的什么）。它会增加测试运行器浏览器的内存占用，并且测试也会变慢。

于 2014-10-08T18:31:34.647 回答