Require controller, factory, service and directive files with Browserify

Question

In my gulp-browserify setup I'm writing a new AngularJS application. Because I know it's gonna be a very big application I want my base structure as clean and clear as possible.

In my main entry javascript file for browserify I setup my main angular module and define the routes with ui-router in my app.config event.

Now I don't want a single require() statement for every single controller/factory/directive in my application.

I was hoping I could require all the files in a directory like this:

require('./dashboard/*.js');
require('./users/*.js');
require('./settings/*.js')

But apperantly you can't.

What would be the cleanest way to require all my app files in my app's main entry point?

Answer 1

After some more research I found a module which did exactly what I wanted: Bulkify

1) Install Bulkify with NPM:

npm install bulkify

2) Require Bulkify in your Browserify task:

var bulkify      = require('bulkify');

3) Just before your browserify.bundle() add the bulkify transform:

var bundle = function() {
    return b.transform(bulkify)
        .bundle()
};

4) In your javascript files use the bulk function:

require('bulk-require')(__dirname, ['./*/*.js']);

This will require every javascript file in any of the curren file's subfolders.

Answer 2

I would suggest to look at approach described in article

Main idea of it put to each folder like controller or service their own index.js. In this case in your app.js should be some kind of require:

var angular = require('angular');
var app = angular.module('todoApp', []);

// one require statement per sub directory instead of one per file
require('./service');
require('./controller');

and index.js in controller folder looks like

var app = require('angular').module('todoApp');

app.controller('EditTodoCtrl', require('./edit_todo'));
app.controller('FooterCtrl', require('./footer'));
app.controller('TodoCtrl', require('./todo'));
app.controller('TodoListCtrl', require('./todo_list'));
app.controller('ImprintCtrl', require('./imprint'));

and example of controller declaration - todo.js

module.exports = function($scope, TodoService) {
    // ...
};

For more details please look original article.