如何分离文件中的角度模块和需要使用Browserify

How to separate angular modules in files and require with Browserify?

本文关键字：模块 Browserify 何分离 分离 文件      更新时间：2023-09-26

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

对于组织，我希望每个文件单独一个模块，所有控制器都是一个文件到，文件结构示例：

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

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

对于控制器，我是module.exports控制器的唯一内容，类似于：

// 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时，这是未定义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的正确方法是什么？

试试这个：

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

这种方式是将angular与browserfy一起使用的最干净的方式之一，导出module1对象并不有用，因为你不想重用它，你只需要它的名称。

相关文章：