Question

在我的gulp-browserify设置中，我正在编写一个新的AngularJS应用程序。因为我知道这将是一个非常大的应用程序，我希望我的基础结构尽可能干净清晰。

在我的浏览器的主条目javascript文件中，我设置了我的主角度模块，并在我的app.config事件中使用ui-router定义路由。

现在，我不希望在我的应用程序中为每个控制器/工厂/指令提供一个require()语句。

我希望我可以要求像这样的目录中的所有文件：

require('./dashboard/*.js');
require('./users/*.js');
require('./settings/*.js')

但显然你不能。

在我应用的主要切入点中要求所有应用文件的最简洁方法是什么？

Answer 1

经过一些研究后，我找到了一个完全符合我要求的模块：Bulkify

1）使用NPM安装Bulkify ：

npm install bulkify

2）在您的Browserify任务中需要Bulkify

var bulkify      = require('bulkify');

3）在您的browserify.bundle（）之前添加批量化转换：

var bundle = function() {
    return b.transform(bulkify)
        .bundle()
};

4）在您的javascript文件中使用批量函数：

require('bulk-require')(__dirname, ['./*/*.js']);

这将需要任何当前文件的子文件夹中的每个javascript文件。

Answer 2

我建议查看article

中描述的方法

它的主要思想是放在每个文件夹中，例如controller或service他们自己的index.js。在这种情况下，您的app.js应该是某种要求：

var angular = require('angular');
var app = angular.module('todoApp', []);

// one require statement per sub directory instead of one per file
require('./service');
require('./controller');

和index.js文件夹中的controller看起来像

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

以及controller声明的示例 - todo.js

module.exports = function($scope, TodoService) {
    // ...
};

有关详细信息，请查看原始article。

使用Browserify需要控制器，工厂，服务和指令文件

2 个答案: