AngularJS: Multiple modules vs multiple controllers

Question

Still trying to wrap my head around the beast that is AngularJS and would like the opinions of Stack Overflow. If I am designing an application with angular that is going to have SPA functionality, I would like to have some area where I can have "global" functions such something like a $scope.showMenu variable which can be bound with ng-class to a side bar menu so that when it is clicked it will slide out.

Having a collection of variables and functions that are available to all of the subsequent views in the application, where would these go?

My idea from reading about modules would be that I should make a parent module which has its own controller that contains all of my global level functions and variables and custom directives.

Then on "inner" content (when navigating around) each page should have its own module, complete with controllers, services and directives?

Thus my application might look something like the following

HTML

<body ng-app="global" ng-controller="globalController">
   {{globalTest}}
     <div ng-controller="pageOneController">
        {{pageOneTest}}
     </div>

</body>

JS

<script>
    angular.module('global',['pageOne']);
    angular.module('global').controller('globalController', globalController);
    globalController.$inject = ['$scope'];
    function globalController($scope) {
         $scope.globalTest = "global test";
    }


    angular.module('pageOne',[]);
angular.module('pageOne').controller('pageOneController', pageOneController);
     pageOneController.$inject = ['$scope'];
     function pageOneController($scope) {
            $scope.pageOneTest = "page one test";
     }

Plunker - http://plnkr.co/edit/wxja7smqOJiSbUi7mfu4?p=preview

Is this the proper "angular way" of going about making a large scale web application? Or is it better to just have a single "module" and have multiple controllers?

Pytth · Accepted Answer · 2015-11-18 20:22:54Z

1

Your best bet would be to put your global code into a factory/service and to inject that service wherever you need the code.

For example:

angular.module('something')
    .factory('something', function() {
      return {
        doSomething: function() {}
      ...

And in your controller, after you inject it, you can attach it to your scope by doing something like:

$scope.myControllerFn = something.doSomething

answered Nov 18, 2015 at 20:22

Pytth

4,1961 gold badge28 silver badges32 bronze badges

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

2 Comments

mls3590712 Over a year ago

I don't fully understand how that would work. If I had a side menu for instance which had a binding of ng-class={'show-menu': showMenu == true} and $scope.showMenu was in my controller, how could a factory call somehow change the controller's scope variable? The hypothetical functions I am talking about would be simple things (not calling services or anything). Ex: $scope.openMenu = function() { $scope.showMenu = true; }. If I put that function in a factory I don't see how it could work?

Pytth Over a year ago

Well, for your sidebar example, the BEST way to do this would be to use something like UI router to properly reflect the different UI states of your app. One other thing is that, you also have the general idea right about how you could just have a parent controller wrapping everything. My question with that then is, how would that be much different than just throwing everything on $rootScope? Using factories/services to do this keeps your global scope "clean" by allowing you to DI them in where you need them and would allow for easier-to-write unit tests.

georgeawg · Accepted Answer · 2015-11-19 00:38:51Z

0

For a Single Page Application (SPA), I am inclined to keep all my controllers in a single module. When using multiple controllers, I would use the controller as binding syntax.

<body ng-app="global" ng-controller="globalController as global">
   {{global.Test}}
     <div ng-controller="pageController as child">
        {{child.Test}}
     </div>

</body>

edited Nov 19, 2015 at 0:38

answered Nov 19, 2015 at 0:33

georgeawg

49k13 gold badges78 silver badges98 bronze badges

Collectives™ on Stack Overflow

AngularJS: Multiple modules vs multiple controllers

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