如何编写AngularJS的commonjs模块模块

所有:

我是browserify和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");但没有运气.

我想知道如何将控制器.js添加为commonjs所需的模块并对其进行浏览,或者无论如何(如果我们不需要添加它),只需使它在commonjs模式下工作即可.

我找到一篇文章谈到这个:http://ardeibert.com/modularizing-an-angularjs-app-with-browserify/ 但它的方式只是导出所有控制器函数,我仍然需要在main.js中注册它们,如果所以,我想知道如何在controller.js中使用其他服务/工厂,如依赖注入？

我认为使用browserify的原因是它可以帮助找出依赖结构,但我想知道如何让它知道app模块和主控制器之间的关系？

谢谢

您的控制器文件应该在您需要时导出您希望可用的值.在这种情况下,您可以导出控制器功能.

// 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
  });