代码组织AngularJS巨大的控制器

use*_*453 9 javascript code-organization angularjs

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

一切都很好,但我需要一个建议和问题的答案:我做得对吗?

这是一个巨大的控制器:

function controller($scope, $http) { 
  //code
  someFunction($scope, boolA, function1, function2);
  //code
}
Run Code Online (Sandbox Code Playgroud)

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

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
  }
}
Run Code Online (Sandbox Code Playgroud)

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

现在我看到这不好,不对,但我需要拆分主控制器,因为它中有超过10k行的代码.

感谢您的建议和帮助!

Cla*_*ies 19

具有10,000行代码的控制器尖叫您在代码中多次违反单一责任原则.

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

接下来,使用' Controller As '语法,它可以让你打破你的联系$scope.使用$scope是一种反模式,因为很难确定直接放置的项目$scope来源,使用和修改的位置.很容易发现一个对象的值不是你想要的,因为它在其他地方被修改了.来自Angular文档:

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

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

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

最重要的是,您可能会发现,如果您重构代码而不是"分解"代码,那么您最终将获得更易于管理,可测试且可靠的解决方案.