代码组织AngularJS巨大的控制器答案

【问题标题】：Code organization AngularJS huge controller代码组织AngularJS巨大的控制器
【发布时间】：2015-02-07 21:57:41
【问题描述】：

我有一个巨大的控制器，我将它拆分为子控制器，我根据它们的功能将它们放入其他文件中。

一切正常，但我需要关于我的问题的建议和答案：我做对了吗？

这是一个巨大的控制器：

function controller($scope, $http) { 
  //code
  someFunction($scope, boolA, function1, function2);
  //code
}

这是我的子控制器在其他文件中的代码，我在前端控制器之后加载：

function someFunction($scope, boolA, function1, function2) {
  //code where I use all the parametrs of function
  function someFunctionSubcontoller() {
    //here is used another function from other subcontroller
  }
}

可以将函数作为参数发送吗？是否可以不从子控制器返回任何内容，因为 $scope 会监视所有内容？我在另一个中使用控制器的某些功能可以吗？

现在我看到这不好和不对，但我需要拆分主控制器，因为其中有超过 10k 行代码。

感谢您的建议和帮助！！！

【问题讨论】：

与其创建子控制器，不如重新组织代码并提供服务。
这可能比你想象的要多，但如果你想要一个模式来更好地组织你的代码，请查看 DCI：fulloo.info/Documents/CommSenseCurrentDraft.pdf

标签： javascript angularjs code-organization

【解决方案1】：

一个有 10,000 行代码的控制器尖叫，您在代码中多次破坏 Single Responsibility Principle。

您应该考虑首先重构代码并将可重用的代码段移动到服务中，而不是制作“子控制器”。然后，在 UI 中寻找可以转换为指令的通用组件，并使用隔离范围将一些逻辑移动到这些指令的控制器中。您会发现，当这些元素自己负责时，控制和测试这些元素会容易得多。

接下来，研究使用“Controller As”语法，它可以让您打破与$scope 的联系。使用$scope 是一个anti-pattern，因为很难确定直接放置在$scope 上的项目的来源、使用和修改的位置。很容易发现一个对象的值与您预期的不同，因为它在其他地方被修改了。来自Angular Documentation：

•当多个控制器应用于一个元素时，使用控制器 as 可以让您在模板中访问哪个控制器一目了然。

•如果您将控制器编写为类，您可以更轻松地从控制器代码内部访问属性和方法，这些属性和方法将出现在作用域上。

•由于绑定中始终存在.，因此您不必担心原型继承掩码原语。

归根结底，您可能会发现，如果您重构代码而不是仅仅“分解”它，您最终会得到一个更易于管理、可测试和可靠的解决方案。

【讨论】：

“使用 $scope 是一种反模式”是什么意思？
@Richard 我试着在这里尽可能地解释它，一年后我仍然坚持这一点。添加了“Controller As”语法作为将控制器直接别名到 UI 的机制，而不是在 $scope 上使用“半全局”对象。在大多数较新的文档中不鼓励使用 $scope，并且 $scope 已从 angular 2.0 中完全删除。 $scope 在小型项目/样板中很方便，但对于大型项目来说是不可持续的。

【解决方案2】：

我建议您在编写代码时使用 angular.module()。我将以良好和模块化的方式分离您的代码。

您可以使用$controller 依赖创建一个子控制器并将其注入到您的主控制器中。

var app = angular.module('myApp',[]);

app.controller('subCtrl', function(){
   $scope.test3 = function(){
     //code
   };
   $scope.test4 = function(){
     //code
   };
});

app.controller('ParentCtrl', function($scope, $controller){
   //injecting subCtrl scope inside ParentCtrl
   $controller('subCtrl', {$scope: $scope});
   //after this line method and $scope variables of subCtrl will be available.
   $scope.test = function(){
     //code
   };
   $scope.test2 = function($scope){
     //code
   };
});

【讨论】：