如何在AngularJS中将单个控制器拆分为多个JS文件

Question

我正在将一款大型应用程序从Silverlight重写为AngularJS，但在此过程中，我意识到我的每个控制器JS文件都涵盖了2000-3000行的代码。我的所有代码都严重依赖于作用域变量。想知道是否有机会将单个控制器JS文件拆分成多个JS文件？任何指针将不胜感激。

- Mothupally

---

服务和工厂应该是你的朋友。你还提到有很多作用域变量依赖于事物。如果某些东西没有绑定到DOM，我会尽量避免将其挂在作用域上。 - Mark Meyer

Pramod，尽管代码跨度为2-3K，但它是模块化的；然而，在单个文件中有2-3K的JavaScript会成为维护的噩梦，因此这就是问题所在。如果有一种将控制器拆分为多个文件并共享作用域的方法，请告诉我。 - Mothupally

Answer 1

使用多个控制器来处理页面中的任务。如果无法避免使用一个大型控制器，则可以通过将作用域传递给另一个方法并在那里定义其余的方法来将定义拆分为多个文件。

第一个文件中：

app.controller('CtrlA', function($scope){
app.expandControllerA($scope);

});

在第二个文件中

app.expandControllerA = function($scope)
{

}

您可以将任何变量或依赖项传递给 expandControllerA 函数。

- Alborz

---

第二个文件应该在第一个文件之前加载。app也应在第二个文件中定义。 - Shorn Jacob

Answer 2

您可以创建一个基本控制器，并使用$controller服务来创建派生控制器。

例如：

function BaseCtrl($scope, options) {
    var vm = this;

    // code
    return vm;
}

function ChildCtrl($controller, $scope) {
    var vm = $controller('BaseCtrl', {
        $scope: $scope,
        options: { }
    });

    // extend view model
    vm.name = '';

    return vm
}

有其他的方法可以将控制器拆分成不同的文件，可以查看这个ng-conf 视频。

- Aman Mahajan

Answer 3

您可以在Angular模块中使用App.factory或app.service，它们更像是继承代码片段中的数据。这样，您就可以在主控制器之外分配部分数据，并在控制器中继承分配的变量。

    app.factory('name of the factory',function(){
return (data)
   )
app.controller('$scope','name of the factory', function(scope, name of the factopry

$scope.new = data;
))

- vinod bazari