how to modularize angular code?

Question

I have two DIVs, each one is a self-contained user control or partial view, if I want one team to work on dog div, the other team work on fox div. can each team have their own angular module, controller, view, etc ? If yes, can you show me a code snippet?

another question: if I want to these two DIVs loosely coupled, what is the best angular way to let them communicate ?

<body ng-app>
  <div id="dog">
    <input type="text" ng-model="name"/> {{name}}
  </div>
  <div id="fox">

  </div>
</body>

Thank you!

For other new ng developer's reference, this is the final code, if you have better solution, please feel free to improve it.

<body ng-app="airborneApp">
    <div id="dog" ng-controller="dogController">
        <input type="text" ng-model="name" /> {{name}}
    </div>
    <div id="fox" ng-controller="foxController">
        <input type="text" ng-model="name" /> {{name}}

    </div>

    <script>
        angular.module('airborneApp', ["dogCompany", "foxCompany"]);

        angular.module('dogCompany', []).
            controller('dogController', ['$scope', function ($scope) {
                $scope.name = 'hello dog';
            }]);

        angular.module('foxCompany', []).
            controller('foxController', ['$scope', function ($scope) {
                $scope.name = "hello fox";
            }]);

    </script>
</body>

doodeec · Accepted Answer · 2014-03-21 13:18:13Z

2

You can make as many modules as you can, you just have to reference all of them as a dependency in you main App module definition (and load them in correct order)

app

angular.module('myApp', ['firstModule', 'secondModule'])

modules

angular.module('firstModule', []) // empty array as a second parameter creates new module instead of using existing one
    .controller(...)
    .directive(...)

angular.module('secondModule', [])
    .controller(...)
    .directive(...)

For communication between different modules, the simplest way is to inject $rootScope into all controllers.

But preferred way is to create a service in main app module, which will be injected into both modules

angular.module('myApp')
    .factory('SharedData', function() {
        var a = {},
            b = {};

        return {
            a: a,
            b: b
        }
})

and then use it

angular.module('firstModule')
    .controller('something', function($scope, SharedData) {
        SharedData.a.data = 'new data';
})
angular.module('secondModule')
    .controller('something else', function(SharedData) {
        console.log(SharedData.a.data);  //will output 'new data'
})

answered Mar 21, 2014 at 13:18

doodeec

2,92722 silver badges23 bronze badges

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

2 Comments

nandin Over a year ago

how do you apply 'firstModule' on html div ?

doodeec Over a year ago

you don't, you create a directive within firstModule and in html you just use that directive... it's not so strictly modular in markup, once you load it, you can use it anywhere in html

Community · Accepted Answer · 2017-05-23 10:31:48Z

2

each div can have a separate controller using:

<div ng-controller="firstCtrl"></div>
<div ng-controller="secondCtrl"></div>

for the other part of your question see:

What's the correct way to communicate between controllers in AngularJS?

edited May 23, 2017 at 10:31

CommunityBot

11 silver badge

answered Mar 21, 2014 at 13:13

Jake Johnson

1,8541 gold badge18 silver badges28 bronze badges

Collectives™ on Stack Overflow

how to modularize angular code?

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related