AngularJS code organization is a huge controller

Question

I have a huge controller, I divided it into subcontrollers, which I put in other files in accordance with their functionality.

Everything works fine, but I need advice and an answer to my question: Did I do it right?

here is a huge controller:

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

here is the code of my subcontroller in another file that I load after the front controller:

 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 } } 

Is it possible to send functions as parameters? Everything is in order, am I not returning anything from the subcontrollers because $ scope is watching everything? Am I using some contoller functions in another?

Now I see that it’s neither good nor right , but I need to separate the main controller, because it contains more than 10 thousand lines of code.

Thanks for the advice and help !!!

Answer 1

A controller with 10,000 lines of code yells that you violate the principle of shared responsibility several times in your code.

Instead of creating “subcontrollers,” you should first review your code and move the reuse segments to services. Then find common components in the user interface that you can convert to directives, and move some logic to the controller for these directives using isolation areas. You will find it much easier to control and test these elements when they are responsible for themselves.

Next, consider using Controller As , which allows you to break your ties with $scope . Using $scope is an anti-pattern , since it is very difficult to determine where the elements located directly on the $scope from which they originate and are used are used. It is very easy to find that an object has a value other than what you intended because it was modified elsewhere. From the Angular Documentation :

• Use of the controller, as it makes it clear which controller you are viewing in the template when several controllers are applied to the controller.

• If you write your controllers as classes, you have easier access to properties and methods that appear in the scope, from within the controller code.

• Since there are always bindings . , you don’t need to worry about prototype inheritance masking primitives.

On the bottom line, you will probably find that if you reorganize your code instead of just “breaking it”, you will get a much more manageable, verifiable and reliable solution.

Answer 2

I suggest you use angular.module () when writing code. I separate your code in a nice and modular way.

You can create a helper controller and inject it into your main controller using the $controller dependency.

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