使用Browserify可變地加載AngularJS模塊

Question

我正在嘗試使用AngularJS，Browserify和Gulp構建樣板。 我的所有Gulp任務以及Browserify都能正常工作。 我現在正在嘗試找出為Angular應用程序加載所有必需文件的最佳方法。

我僅使用以下三行代碼創建應用程序：

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

然后，我添加路由器邏輯：

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

而且一切正常。 但是，對於Angular應用程序所需的其余文件（控制器，服務，指令等），可能必須包含任意數量的文件。 這很容易用以下方法進行硬編碼：

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

但我不想為需要添加到應用程序中的每個文件而對這些行進行硬編碼。 我首先研究了使用fs解析每個目錄並以這種方式加載文件，但是沒有運氣。 我現在正在嘗試使用以下格式的controllers/index.js文件：

'use strict';

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

module.exports = controllers;

然后我嘗試解析並加載文件：

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

這cannot find module很好地解析json文件，但是當它嘗試從文件中讀取路徑時，我cannot find module錯誤。

是否有更好的方法使用Browserify將可變數量的AngularJS文件加載到應用程序中？

Answer 1

我最終提出了一個我現在很滿意的解決方案。 它涉及為每種類型都有一個主要模塊： app.controllers ， app.services等。這些看起來像這樣：

var angular = require('angular');

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

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

其中./example.js是以下格式的控制器：

'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文件的Gulp任務如下所示：

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

});

這一切對我來說都很好，並且是相對模塊化的！