Is there a dynamic module loader for AngularJS that uses convention over configuration?

Question

Most dynamic modules that I can find are not really dynamic and are actually lazy loaders, as they mostly require you to register what you want loaded in config files and registers.

I am looking for a loader js way of using convention and just auto loading anything under folders for my one page app.

Something like:

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

Answer 1

Careful here. You say you want loaders.js to be in your public folder. What you want to do only works with server side tools, as you can't read your filesystem from a browser (without server side assistance). Therefore you don't want to expose the loaders.js file to the public.

The thing about modules is, that they help you give your application some structure. Of course, you don't have to use this (the angular way, although you should if you want to support your app with a unit test suite * [see below]). If you just want to load everything you have, then you don't have to define any modules at all (but one). But you can still benefit from the structure you setup in your file system. Given that, it's sufficient if you have all your controllers, directives and services belong just to "yourApp" which is the only module you will have defined:

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

+ (at the top of each of your controllers / directives / services):

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

In this case, grunt-html-build will do the job: https://www.npmjs.org/package/grunt-html-build

Of course, as grunt is just a command line based task runner, this will introduce a build step (ie your app will not work by just serving the contents of its folder in a web server) to your workflow. Every time you add a new file you have to run the grunt-html-build task again.

What will you get from grunt-html-build? You will be able to denote a section in the head of your index.html, where grunt-html-build will insert all the files you specify in the configuration, eg like this:

grunt.initConfig({
    modulesPath: "modules",

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

Then in your index.html, put at the top of your head (after you've loaded angular):

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

This is the part where all your .js scripts below modules/ will be inserted into.

* The downside of having just one big module is, that you will load and instantiate lots of unnecessary services in your unit tests (ie whatever you inject into your app's run and config blocks). It'll increase the memory foot print of your test runner's browser and the tests will be slower, too.