0

I just recently build a web based app with angular. I really love how angular handle Model-View-Controller, so I build my controller to handle button click event, datepicker changed event, etc while business logic is being controlled by the model. The problem is: the more button or control I put into my view, the larger my controller script is .

For example: If I have 2 buttons, my controller would be look like this:

$scope.onBtn1Clicked = function(){}
$scope.onBtn2Clicked = function(){}

So, what if I have 10 more buttons ? 10 more function ? I'm well aware about Angular's directive, but I don't want to write an directive if I will use it just once. So I think it is better to split/divide my controller into several "sub controller" files and joined them in my "main controller".

Can it be done ? Or anyone have other solution ? Thx

PS: I know about How to create separate AngularJS controller files? . But this is different: I already have separated my controllers to several files, so that a page in my application have one controller. The problem I have is that those controller become so large and impossible to maintain

Community
  • 1
  • 1
DennyHiu
  • 4,861
  • 8
  • 48
  • 80

2 Answers2

1

It depends:

  • If function control some element behavior it should be inside directive

  • If function contain some independent logic it should be inside service (or factory or provider)

  • If function contain business logic it should controller

Also: if some logic can be separated you need to put it into sub controller (directive or service)

Alexander Strochkov
  • 417
  • 2
  • 8
  • I guess that you're saying that I should write directives . Let's assume that I have a page with some panels/parts, each has its own directive. So what if those directive grow so large. should I split them again into many smaller directives ? I just want to know what is the best Angular practices to deal with this big-project issue that I have – DennyHiu Aug 24 '15 at 08:36
  • also thank you for the article link about service above. Great and clear tutorial! – DennyHiu Aug 24 '15 at 08:41
  • @denny yap you understand right, you should use directives and split them then its needed – Alexander Strochkov Aug 24 '15 at 09:13
  • well.. then I'm gonna need to write a lot of directives and controllers, so i guess my question is already answered here http://stackoverflow.com/questions/20087627/how-to-create-separate-angularjs-controller-files Thank you! – DennyHiu Aug 24 '15 at 09:20
0

Yes, sure, you can nest controllers

controllers

myApp.controller('MainController', ['$scope', function($scope) {
  $scope.timeOfDay = 'morning';
  $scope.name = 'Nikki';
}]);
myApp.controller('ChildController', ['$scope', function($scope) {
  $scope.name = 'Mattie';
}]);
myApp.controller('GrandChildController', ['$scope', function($scope) {
  $scope.timeOfDay = 'evening';
  $scope.name = 'Gingerbread Baby';
}]);

and the markup

<body ng-app="app">
  <div ng-controller="MainController">
    <p>Good {{timeOfDay}}, {{name}}!</p>

    <div ng-controller="ChildController">
      <p>Good {{timeOfDay}}, {{name}}!</p>

      <div ng-controller="GrandChildController">
        <p>Good {{timeOfDay}}, {{name}}!</p>

      </div>
    </div>
  </div>
</body>

Plunker demo
Explanation

Medet Tleukabiluly
  • 11,662
  • 3
  • 34
  • 69