Question

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

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

这是一个巨大的控制器：

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

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

Answer 1

拥有10,000行代码尖叫的控制器，您在代码中多次违反Single Responsibility Principle。

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

接下来，请查看使用“Controller As”语法，它可以让您与$scope断绝关系。使用$scope是anti-pattern，因为很难确定直接放在$scope上的项目来自，使用和修改的位置。很容易发现一个对象的值不是你想要的，因为它在其他地方被修改了。来自Angular Documentation：

•当多个控制器应用于元素时，使用控制器可以明显地在模板中访问哪个控制器。

•如果您将控制器编写为类，则可以从控制器代码内部更轻松地访问将显示在范围内的属性和方法。

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

总而言之，您可能会发现，如果您重构代码而不是“分解”代码，那么您最终将获得更易于管理，可测试且可靠的解决方案。

Answer 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
   };
});

代码组织AngularJS巨大的控制器

2 个答案: