javascript - 如何使用 Browserify 分离文件中的 Angular 模块和 require ？

Question

我正在使用 Angular 进行前端使用，并且我正在尝试按模块分离我的应用程序。

对于组织，我希望每个文件单独一个模块，并且所有 Controller 都是一个文件，文件结构示例:

- module1 (paste)
    - controllers (paste)
        - controller1.js
        - controller2.js
    - module.js

其中module1.js需要controller1.js和controller2.js，并且主javascript文件需要所有模块文件。

对于 Controller ，我只是 module.exports Controller 的内容，例如:

// controller1.js
module.exports = ["$scope", function(scope) {
  // some code here
}];

在我的模块文件中，我需要这样:

//module1.js
var app = angular.module("module1", []);

app.service("service1", function() {});

app.controller("controller1", require("./controllers/controller1.js");
module.exports = app;

到目前为止，一切都还好。

但是当我尝试将 module1.js 请求到 module2.js 来使用 service1 时，这是 return service1 > 未定义。

//module2.js
require('../module1/module.js');

var app = angular.module("module2", ['module1']);
app.controller('controller2-1', ["$scope", "service1", function(scope, service1) {
    // some code
});

分隔每个文件的模块并使用 Browserify 要求它的正确方法是什么？

Answer 1

试试这个:

//child module
var angular = require('angular');
var moduleName = 'moduleChild';
var moduleDependencies = [...];

app.module(moduleName, moduleDependencies)
   .controller('foobarctrl', [function(){}]);

module.exports = moduleName;

//parent module
var angular = require('angular');
var moduleChild = require('/path/to/file');
var moduleName = 'moduleChild';
var moduleDependencies = [moduleChild];

app.module(moduleName, moduleDependencies)
   .controller('foobarbazctrl', [function(){}]);

module.exports = moduleName;

这种方式是在 browserify 中使用 Angular 的最简洁的方式之一，导出 module1 对象没有用，因为你不想重用它，你只需要那里的名称。