我正在尝试使用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));
});
这可以很好地解析json文件，但是cannot find module当尝试从文件中读取路径时出现错误。
是否有更好的方法使用Browserify将可变数量的AngularJS文件加载到应用程序中？
我最终提出了一个我现在很满意的解决方案。它包括具有每个类型的主模块：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));
});
这一切对我来说都很好，并且是相对模块化的！
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句