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

Splitting AngularJS controllers into multiple files

本文关键字：文件 拆分 AngularJS 控制器      更新时间：2023-09-26

我有一个使用Onsen UI和AngularJS构建的跨平台企业应用程序。然而，该应用程序的规模正在快速增长，并且变得令人困惑和难以管理。到目前为止，我已经能够在1个app.js文件中管理所有的应用程序控制器，并且该应用程序运行良好。但我想将我的控制器拆分成不同的.js文件，例如login.js、registration.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
});

我的问题在于新应用程序.js中的['onsen']？但是，我如何将其包含在我试图实现的SO解决方案中？

还有其他方法可以做到这一点。您可以为每个文件制作一个模块，并将它们添加到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
});

other.js

var other = angular.module('otherControllers', []);
other("OtherController", function($scope, $http)
{
    // All the other logic goes here
});

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

您可以将它们转换为模块，如上面提到的@nicous，并将它们导入到需要使用它们的主应用程序.js上，然后您可以使用webpack或任何其他bundler为您生成捆绑包。这样，您就不需要将它们全部添加到html文件中。

相关文章：