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

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

在我的主要条目browsefile的JavaScript文件我安装我的主angular模块,并在我的app.config事件定义路由与ui路由器。

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

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

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

但显然你不能。

在我的应用程序的主要入口点需要所有我的应用程序文件的最干净的方式是什么?

经过一些更多的研究,我find了一个完全按照我想要的模块: Bulkify

1)使用NPM安装Bulkify

 npm install bulkify 

2)在您的Browserify任务中需要Bulkify:

 var bulkify = require('bulkify'); 

3)在browserify.bundle()之前添加bulkify变换:

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

4)在你的javascript文件中使用批量函数:

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

这将需要任何curren文件的子文件夹中的每个JavaScript文件。

我会build议看看文章中描述的方法

它把主要的想法放在每个文件夹像controllerservice自己的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) { // ... }; 

更多细节请看原文。