Javascript 使用Browserify可变加载AngularJS模块

我正在尝试使用AngularJS、Browserify和Gulp构建一个样板。我所有的吞咽任务都正常工作，还有Browserify。我现在正试图找出加载角度应用程序所需的所有文件的最佳方法

我使用以下三行代码创建应用程序：

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

然后，我将路由器逻辑添加到：

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

这一切都很好。但是，对于角度应用程序所需的其余文件（控制器、服务、指令等），可能需要包含任意数量的文件。这很容易实现硬编码，例如：

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

但我不想为我需要添加到应用程序中的每个文件编写这样的硬代码行。我首先研究了使用

fs

解析每个目录并以这种方式加载文件，但运气不好。我现在尝试创建一个

controllers/index.js

文件，其格式如下：

'use strict';

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

module.exports = controllers;

'use strict';

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

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

  // ViewModel
  var vm = this;

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

}

controllersModule.controller('ExampleCtrl', ExampleCtrl);

然后我尝试解析并加载这些文件：

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

这可以很好地解析json文件，但是当它试图从文件中读取路径时，我发现

找不到module

错误

---

有没有更好的方法可以使用Browserify将数量可变的AngularJS文件加载到应用程序中？

我最终找到了一个目前满意的解决方案。每种类型都有一个主模块：

app.controller

，

app.services

，等等。这些模块如下所示：

var angular = require('angular');

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

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

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));

});

其中

/example.js

是以下格式的控制器：

'use strict';

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

module.exports = controllers;

'use strict';

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

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

  // ViewModel
  var vm = this;

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

}

controllersModule.controller('ExampleCtrl', ExampleCtrl);

对所有控制器、服务、指令等重复此过程，然后加载到

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']);

});

现在，我的Javascript文件的吞咽任务如下所示：

var angular = require('angular');

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

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

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));

});

这一切对我来说都很好，而且是相对模块化的