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

Improve this question
0

2 Answers 2

Reset to default
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)

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

4 Comments

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
also thank you for the article link about service above. Great and clear tutorial!
@denny yap you understand right, you should use directives and split them then its needed
well.. then I'm gonna need to write a lot of directives and controllers, so i guess my question is already answered here stackoverflow.com/questions/20087627/… Thank you!
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

Improve this answer

5 Comments

Your Demo doesn't work, it's just a generic 'edit' link
@CharlyDelta thanks, updated :)
@evc: so what if I want to share variables and functions that accessible through all 'children' controller? and how about Dependency, like MainController must depend on GrandchildController ?
@denny its good then all controllers separated. It`s good if you share data between controllers by service thinkster.io/a-better-way-to-learn-angularjs/services
@denny Look at ChildController controller, it doesn't have $scope.timeOfDay, so it will inherit it from MainController

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.