Code organization AngularJS huge controller

Question

I have a huge controller, I have split it into subcontrollers, which I put into other files according to their functionality.

Everything works fine, but I need an advice and the answer on my question: have I done 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 other file, which 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 ok to send functions as parametrs? Is it okay whether I don't return anything from subcontrollers, because $scope watches everything? Is it okay whether I use some functions of contoller in another one?

Now I see that's not good and not right, but I need to split main contoller because there are more than 10k rows of code in it.

thanks for your advice and help !!!

instead of making as you call it subcontrollers you should reorganize your code and make services. — lujcon
– lujcon, Commented Feb 7, 2015 at 22:00
This is probably more info than you bargained for, but if you want a pattern to better organize your code in general, check out DCI: fulloo.info/Documents/CommSenseCurrentDraft.pdf — Matt Browne
– Matt Browne, Commented Feb 7, 2015 at 22:08

Community · Accepted Answer · 2020-06-20 09:12:55Z

19

A Controller with 10,000 lines of code screams that you are breaking the Single Responsibility Principle multiple times in your code.

Instead of making "sub-controllers", you should consider first refactoring your code and moving reusable code segments into Services. Then, look for common components in your UI which you can convert to Directives, and move some logic into a Controller for those Directives, using isolate scopes. You will find that it's much easier to control and test these elements when they are responsible for themselves.

Next, look into using the 'Controller As' Syntax, which allows you to break your ties with $scope. Using $scope is an anti-pattern, since it is very difficult to identify where items placed directly on $scope originate from, are used, and are modified. It is very easy to find that an object has a value other than what you intended because it was modified somewhere else. From the Angular Documentation:

•Using controller as makes it obvious which controller you are accessing in the template when multiple controllers apply to an element.

•If you are writing your controllers as classes you have easier access to the properties and methods, which will appear on the scope, from inside the controller code.

•Since there is always a . in the bindings, you don't have to worry about prototypal inheritance masking primitives.

Bottom line, you will probably find that if you refactor your code instead of just "breaking it up", you will end up with a much more manageable, testable, and reliable solution.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Feb 7, 2015 at 22:13

Claies

22.4k4 gold badges56 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

richardaum Over a year ago

What do you mean with "using $scope is an anti-pattern"?

Claies Over a year ago

@Richard I tried to explain it here as well as I could, and I still stand by this a year later. the 'Controller As' Syntax was added as a mechanism to alias the controller directly to the UI, instead of using "semi global" objects on $scope. the use of $scope is discouraged in most of the newer documentation, and $scope was removed completely from angular 2.0. $scope is convenient in small projects / boilerplates, but it is not sustainable for large scale projects.

Brendorien · Accepted Answer · 2016-08-14 10:33:42Z

3

I would suggest you to use angular.module() while writing code. I will separate your code in good & modularize way.

You can create a sub controller and inject it inside your main controller using $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
   };
});

edited Aug 14, 2016 at 10:33

Brendorien

636 bronze badges

answered Feb 7, 2015 at 22:06

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Collectives™ on Stack Overflow

Code organization AngularJS huge controller

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related