如何编写AngularJS的commonjs模式模块

Question

全部：

我对 browserify 和 commonjs 模式还很陌生。当我尝试 broserify 如何与 Angular 一起工作时，我使用了一个非常简单的示例：

//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 模式下工作。

一个 post 我发现谈论这个：http://ardeibert.com/modularizing-an-angularjs-app-with-browserify/ 但是它的方法只是导出所有控制器功能，我仍然需要在main.js中注册它们，如果是这样，我想知道如何在controller.js中使用其他service/factory比如依赖注入？

我认为使用browserify的原因是它可以帮助弄清楚依赖结构，但我想知道我如何才能知道应用程序模块和主控制器之间的关系？

谢谢

Answer 1

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

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

就个人而言，随着我的项目越来越大，我喜欢将每个文件做成一个模块，这样它们就可以包含多个提供程序和指令。然后 export/require 模式变得略有不同。

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

Answer 2

Angular 1.x 本身对 commonjs 模块不是很友好 - 它有自己的模块系统，并且与它们的 DI 容器有点混合。

我发现将它与 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构建的，但大体结构是一样的

如何编写AngularJS的commonjs模式模块

How to write commonjs pattern module of AngularJS

commonjs

angularjs

browserify