How to split an AngularJS controller?

Question

I have an AngularJS app with a single site (a map application) and a big controller where I stored all the logic. Because it was too big ( > 1000 lines of code), I decided to split it.

I made a divison in different parts, for example the creatiion of the markers, the comments on the markers, the search on them, user controll etc. and I want to create for every section a new file, but I also want them to share one single $scope.

I use the $routeProvider, where I defined one template with the old single big controller, but I don't know how to tell angular, that it should use all the new controllers I made.

I think I have an error in my reasoning building the structure. Can you tell me, how to devide the project the way I wish? Thank you very much!

More spefic: What I have:

 app.controller('bigController', ['$scope', 
 function ($scope) {
      $scope.var1;
      $scope.var2;

      $scope.function1 = function() {...};
      $scope.function2 = function() {...};
      $scope.function3 = function() {...};
      $scope.function4 = function() {...};
 }]);

What I want:

File 1:

 app.controller('controller1', ['$scope', 
 function ($scope) {
      $scope.var1;


      $scope.function1 = function() {...};
      $scope.function2 = function() {...};

 }]);

File 2:

 app.controller('controller2', ['$scope', 
 function ($scope) {
      $scope.var2;


      $scope.function3 = function() {...};
      $scope.function4 = function() {...};

 }]);

But I want access from to all $scope functions and variables in every controller and the HTML code should pick out the right function if I write

   <a ng-click="function4()">example</a>

Can you ask a specific question? Post what you have and someone will be able to help out. — Kevin Le - Khnle
– Kevin Le - Khnle, Commented Mar 2, 2014 at 0:31
$scopes inherit from each other with prototypical inheritance, you can access properties of parent scopes from child scopes unless they're isolated. — Benjamin Gruenbaum
– Benjamin Gruenbaum, Commented Mar 2, 2014 at 0:35
@Benjamin Gruenbaum I don't want child scopes I want like one big <div ng-controller="controller1, controller2"> - Is this possible? — user3026197
– user3026197, Commented Mar 2, 2014 at 0:42

mkriheli · Accepted Answer · 2014-03-02 00:44:36Z

5

Your question is not clear, you can use ng-controller to specify the controller for a specific section of your template, e.g:

<div ng-controller="SomeOtherController as other">
</div>

Not sure why you'd want anything in a single $scope, one can resort to $rootScope but it's a bad, bad design.

You can divide logic/data to several services, and have them injected to the various controllers handling each section, but without further information it's hard to tell.

answered Mar 2, 2014 at 0:44

mkriheli

1,85611 silver badges19 bronze badges

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

Collectives™ on Stack Overflow

How to split an AngularJS controller?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related