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

Question

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

在我用于 browserify 的主要条目 javascript 文件中，我设置了我的主要 angular 模块，并在我的 app.config 事件中使用 ui-router 定义了路由。

现在我不希望我的应用程序中的每个 controller/factory/directive 都有一个 require() 语句。

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

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

但显然你不能。

在我的应用程序的主入口点请求ui重新我的所有应用程序文件的最干净的方法是什么？

Answer 1

我建议查看 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');

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

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。

Answer 2

经过更多研究，我发现了一个完全符合我要求的模块：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 文件。

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

Require controller, factory, service and directive files with Browserify

javascript

angularjs

node.js

gulp

browserify