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 .