代码组织AngularJS巨大控制器

Code organization AngularJS huge controller

本文关键字：巨大 控制器 AngularJS 代码      更新时间：2023-09-26

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

一切都很好，但我需要一个建议和问题的答案：我做对了吗？

这里有一个巨大的控制器：

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行的代码。

谢谢你的建议和帮助！！！

一个拥有10000行代码的控制器尖叫您在代码中多次违反单一责任原则。

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

接下来，研究使用"Controller As"语法，它允许您打破与$scope的联系。使用$scope是一种反模式，因为很难识别直接放置在$scope上的项目的来源、使用和修改。很容易发现一个对象的值不是您想要的值，因为它在其他地方被修改了。来自Angular文档：

•当多个控制器应用于一个元素时，使用控制器as可以清楚地显示您正在模板中访问哪个控制器。

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

•由于绑定中总是有一个.，因此您不必担心原型继承屏蔽基元。

最重要的是，你可能会发现，如果你重构你的代码，而不仅仅是"；将其分解"；，您最终会得到一个更易于管理、可测试和可靠的解决方案。

我建议您在编写代码时使用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
   };
});
相关文章：