将 AngularJS 控制器拆分为多个文件

Posted 2023-03-31

【中文标题】将 AngularJS 控制器拆分为多个文件

【英文标题】：Splitting AngularJS controllers into multiple files

【发布时间】：2016-05-11 14:45:34

【问题描述】：

我有一个使用 Onsen UI 和 AngularJS 构建的跨平台企业应用程序。但是，该应用程序的大小正在快速增长，并且变得混乱且难以管理。到目前为止，我已经能够在 1 个 app.js 文件中管理所有应用程序控制器，并且该应用程序运行良好。但我想将我的控制器拆分为不同的 .js 文件，例如登录.js，注册.js。随着应用的发展，使其更易于管理。

我在 SO（标记的答案）上找到了 THIS 解决方案，但我在实施它时遇到了麻烦。同样，@jason328 在链接上的回答看起来非常优雅，但我再次陷入了用我的代码实现它的困境。

在我的主要新 app.js 文件中，我的模块如下：

angular.module('myApp.controllers', ['onsen']);

然后在例如login.js 我的模块设置如下：

angular.module('myApp.controllers').controller('LoginController', ['$scope', '$http', function($scope, $http)

    // All the login logic goes here
]);

这不起作用，因为没有显示任何页面。但是，当我在原始 app.js 文件中进行此设置时，该应用程序运行良好（原始代码如下）。

var app = angular.module("myApp", ['onsen']);
// Manages the state of the login.html screen
app.controller("LoginController", function($scope, $http)

    // All the login logic goes here
);

我的问题在于我假设的新 app.js 中的 ['onsen']？但是如何将它包含在我正在尝试实施的 SO 解决方案中？

【问题讨论】：

您是否在 index.html 文件的脚本标签中包含了所有新的 .js 文件？是否有任何错误输出到控制台？

是的，我在 index.html 文件中包含了新文件。我在

我会单步执行代码，看看它有多远。这可能只是一个路径或拼写问题。

我得到的错误显示为 - 未捕获的错误：[$injector:modulerr]

AngularJS 控制器文件可能会变得混乱。您也可以尝试使用 requirejs 并动态加载文件，然后在加载后通过 id 实例化应用程序，而不是使用 ng-app=""。

【参考方案1】：

还有另一种方法可以做到这一点。您可以为每个文件创建一个模块并将它们添加到 myApp 模块中，如下所示：

app.js

var app = angular.module("myApp", ['onsen', 'loginControllers', 'otherController']);

login.js

var login = angular.module("loginControllers", []);
login.controller("LoginController", function($scope, $http)

    // All the login logic goes here
);

其他.js

var other = angular.module('otherControllers', []);
other("OtherController", function($scope, $http)

    // All the other logic goes here
);

确保您已将所有脚本添加到您的 index.html。

【讨论】：

> 确保已将所有脚本添加到 index.html。有什么方法可以避免这种情况（其他方法是使用新的 Angular :)？

【参考方案2】：

您可以将它们转换为模块，就像提到的 @nicous 一样，并将它们导入到主 app.js 中，无论您需要使用它们的任何地方，然后您都可以使用 webpack 或任何其他捆绑器为您生成捆绑包。这样您就不需要将它们全部添加到 html 文件中。

【讨论】：

你应该提到答案的完整步骤。