全部：
我对浏览和commonjs模式还很陌生。当我尝试如何使用Angular进行broserify时，我使用了一个非常简单的示例：
//main.js
require("angular");
var app = angular.module("app", []);
和：
// controller.js
require("angular");
angular.module("app");
.controller("main", function($scope){
$scope.message = "Hello";
});
对于Gulp，我使用：
// gulpfile.js
var gulp = require("gulp");
var browserify = require('browserify');
var source = require('vinyl-source-stream');
gulp.task('browserify', function() {
// Grabs the app.js file
return browserify('./app/main.js')
// bundles it and creates a file called main.js
.bundle()
.pipe(source('bundle.js'))
// saves it the dest/ directory
.pipe(gulp.dest('./dest/'));
})
但这不起作用（我当然知道，但不知道如何实现），我尝试添加require("./controller");，但没有成功。
我想知道我如何将controller.js添加为commonjs所需的模块并浏览它们，或者无论如何（如果我们不需要添加它）让它在commonjs模式中工作。
我发现有一篇帖子在谈论这件事：http://ardeibert.com/modularizing-an-angularjs-app-with-browserify/但它的方法是只导出所有的控制器函数，我仍然需要在main.js中注册它们，如果是这样，我想知道如何在controller.js中使用其他服务/工厂，比如依赖注入
我认为使用browserfy的原因是它可以帮助弄清楚依赖结构，但我想知道如何让它知道应用程序模块和主控制器之间的关系？
感谢
您的控制器文件应该导出您希望在需要时可用的值。在这种情况下，您可以导出控制器函数。
// controller.js
module.exports = function($scope){
$scope.message = "Hello";
}
然后在主应用程序文件中要求它。
//main.js
var angular = require("angular");
var MainController = require("./controller");
var app = angular.module("app", []);
app.controller("main", MainController);
就我个人而言，随着我的项目越来越大，我喜欢将每个文件作为一个模块，这样它们就可以包括多个提供者和指令。然后，导出/需求模式略有不同。
// my-module.js
var angular = require('angular');
angular.module('MyModule', [])
.service('MyService', function() { ... })
.directive('MyDirective', function() { ... });
然后，您需要该模块并将其注入到应用程序的主模块中。
// main.js
var angular = require('angular');
require('./my-module');
angular.module('MyApp', ['MyModule'])
.controller('MyController', function(MyService) {
// injected service from MyModule
});
我发现将其与commonjs或其他模块系统一起用于angular 1.x的最佳方法如下：
- 每个模块声明都应导出模块名称
- 所有对angular模块的调用都应该放在模块声明文件（
.controller、.factory等）中 - 所有服务实现都应该在单独的文件中（每个控制器、指令或服务都应该放在独立的文件中），并且应该只导出一个实现
关于控制器，在控制器文件中，您将导出控制器构造函数，并将其导入到您的模块文件中，如下所示：
// MainController.js
module.exports = function(service1){...}
// service1.js
module.exports = function(...){}
和模块文件：
// module.js
var angular = require('angular');
angular.module('app', [require('some-angular-module'), ....])
.service('service1', require('./service1.js'))
.controller('MainController', require('./MainController.js'));
module.exports = 'app';
你可以在这里看到应用程序结构的例子：http://github.com/zxbodya/angular-webpack-seed
它是用webpack构建的，但通常结构是相同的