使用Browserify可变地加载AngularJS模块

Question

I'm attempting to build a boilerplate using AngularJS, Browserify, and Gulp. I have all the Gulp tasks working correctly, along with Browserify. I'm now trying to figure out the best way to load all the necessary files for an Angular application.

I'm creating the application with just these three lines of code:

var angular = require('angular');
require('angular-ui-router');
angular.module('myApp', ['ui.router']);

I then add my router logic with:

angular.module('myApp').config(['$stateProvider', '$locationProvider', '$urlRouterProvider', require('./routes')]);

and that all works fine. However, for the rest of the files necessary for an Angular application (controllers, services, directives, etc.), there could be any number of files that have to be included. This is easy enough to hard-code, with something like:

angular.module('myApp').controller('IndexCtrl', require('./controllers/index'))

but I don't want to have to hard-code lines like that for every file I need to add to the application. I first looked into using fs to parse each directory and load the files that way, but no luck. I'm now trying to have a controllers/index.js file of the format:

'use strict';

var controllers = [
  {
    'name': 'HomeCtrl',
    'path': './controllers/home'
  }
];

module.exports = controllers;

which I'm then attempting to parse and load the files:

require('./controllers/index').forEach(function(controller) {
  angular.module('myApp').controller(controller.name, require(controller.path));
});

this parses the json file fine, but I get cannot find module errors when it tries to read the path from the file.

Are there any better approaches to loading a variable number of AngularJS files into an application using Browserify?

Answer 1

I ended up coming with a solution that I'm happy with for now. It involves having a main module for each type: app.controllers , app.services , etc. Those look like this:

var angular = require('angular');

module.exports = angular.module('app.controllers', []);

// Define the list of controllers here
require('./example.js');

where ./example.js is a controller of the format:

'use strict';

var controllersModule = require('./_index');

/**
 * @ngInject
 */
function ExampleCtrl() {

  // ViewModel
  var vm = this;

  vm.title = 'Test Title';
  vm.number = 1234;

}

controllersModule.controller('ExampleCtrl', ExampleCtrl);

This process is repeated for all controllers, services, directives, etc. and are then loaded onto the app inside main.js :

'use strict';

var angular = require('angular');

// angular modules
require('angular-ui-router');
require('./controllers/_index');
require('./services/_index');
require('./directives/_index');

// create and bootstrap application
angular.element(document).ready(function() {

  var requires = [
    'ui.router',
    'app.controllers',
    'app.services',
    'app.directives'
  ];

  angular.module('app', requires);

  angular.module('app').config(require('./routes'));

  angular.bootstrap(document, ['app']);

});

And the Gulp task for my Javascript files now looks like this:

gulp.task('browserify', function() {

  var b = browserify({
    basedir: '.',
    entries: './app/js/main.js',
    debug: true,
    insertGlobals: true
  });

  b.transform({
    global: true
  }, ngAnnotate);

  b.transform({
    global: true
  }, uglifyify);

  b.bundle()
    .pipe(source('main.js'))
    .pipe(streamify(rename({suffix: '.min'})))
    .pipe(gulp.dest('build/js'))
    .pipe(refresh(lrserver));

});

This all works well for me, and is relatively modular!