angular.js modularization - multiple ng-apps?

Question

I have just started working in angular.js and I have created separate angular applications (using ng-app) for separate modules of my application for modularity sake so that change in one module does not bring down the whole application.

Now, i am running into a issue of redirecting from a search form common across all modules to a particular page (in a specific module). I thought of saving the value in $rootScope, but while debugging, I found that $rootScope is per ng-app, so, it will not work.

Am I wrong in designing the application into separate angular applications and should I move everything back into one ng-app? or is my application structure correct and I should look for another way of passing value?

EDIT: - I think I did not provide enough detail earlier.

My application is structured as follows:

module1
- controller\controller-module1.js
- service\service-module1.js
- css\module1.css
- view\ <multiple html files>

module2
- same structure

I was actually using the service-module to make REST calls to the server till now, rather than sharing data.

All the modules are defined with their separate dependencies in app.js:

angular.module('Module1App', ['Module1App.controller','Module1App.service']);
angular.module('Module2App', ['Module2App.controller','Module2App.service']);

controllers and service of each module are defined in their respective controllers-module.js and service-module.js, which reside in different directories as per the structure above.

So, to include the controller and service of a particular module(of, say, module1), I declare the following in a view of that module

<script src="/APP_GUI/modules/common/service/services-common.js"></script>
<script src="/APP_GUI/modules/reports/service/services-module1.js"></script>
<script src="/APP_GUI/modules/common/controller/controllers-common.js"></script>
<script src="/APP_GUI/modules/reports/controller/controllers-module1.js"></script>

So, if I have to move all ng-controllers (defined in separate directories as per the module structure above) into one ng-app (app.js above), I will basically end up including all the controller.js and service.js in all the html views, which will basically mean that if there is an error in any one of the js files, my entire application will be down (i have tried it out).

So, unless I have misunderstood something, I cannot move all ng-controllers under a single app.js. I am going to try out using shared services to share data. Please let me know in case anybody has something to say on my conclusion.

To share code and functionality across your app though the official angular way of doing it is to leverage services. Quote: "Angular services are substitutable objects that are wired together using dependency injection (DI). You can use services to organize and share code across your app." docs.angularjs.org/guide/services. An example is in my answer below — mikeswright49
– mikeswright49, Commented Jun 17, 2015 at 18:41
you can't even use ng-app multiple times on a page, only the first ng-app encountered in the HTML will be bootstrapped. You can, however, manually bootstrap multiple apps, but they are each their own Application. — Claies
– Claies, Commented Jun 18, 2015 at 6:54
so, if I do not define an ng-app for each module of my application, how do I prevent change in one module impacting the other? — Alok Sharma
– Alok Sharma, Commented Jun 18, 2015 at 7:06

scytale · Accepted Answer · 2015-06-17 16:27:18Z

2

I don't think using many ng-app is a good approach. I suggest you using many ng-controller in separate file instead.

You can keep variables inside objects instead of using $scope, which most tutorials you'll find online don't explain.

For example:

/// Define the app
app = angular.module('MyApp',[]);  
///Add a cotroller  

app.controller('MyFirstController', ['$scope', function($scope){  

    /// using 'this' you can write local properties  
    this.firstLocalProperty = 'first Value is acessible only in MyFirstController';
    this.secondLocalProperty = 'second Value is acessible only in MyFirstController';  

    $scope.firstSharedAppProperty = 'This is Shared between all controllers in app';
}]);

app.controller('MySecondController', ['$scope', function($scope){  
  /// here you can use shared and local properties, you may access shared things in $scope  

    this.fistProperty = $scope.firstSharedAppProperty;  

}]);

You'll see that

> MySecondController.firstProperty
'This is Shared between all controllers in app'

but

> MyFirstController.firstProperty
'first Value is acessible only in MyFirstController'

MyFirstController.firstProperty keeps it's original value because it's not shared.

Basically, you should use different controllers for different templates instead of using different modules. Using controllers, you may share items between them in the $scope variable. Or you can keep variables private using this reference inside objects.

Take a look in this article and you may understand better this way.

edited Jun 17, 2015 at 16:27

scytale

12.7k4 gold badges35 silver badges46 bronze badges

answered Jun 17, 2015 at 15:13

André Claudino

5884 silver badges18 bronze badges

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

4 Comments

Josh Beam Over a year ago

@AlokSharma, I like this answer, but I don't think it's a good idea most of the time to share data by attaching it to the scope. This is better done by storing the data inside a factory/service so there's only "one source of truth". But the principle of using one module with multiple controllers is definitely sound.

André Claudino Over a year ago

@JoshBeam, I agree, but my answer was based in the minimal effort principle, once using Angular and nothing more I think this is the easiest (and powerfull) way to share date between angular units, here, changed from modules to controllers.

mikeswright49 Over a year ago

To share code and functionality across your app though the official angular way of doing it is to leverage services. Quote: "Angular services are substitutable objects that are wired together using dependency injection (DI). You can use services to organize and share code across your app." docs.angularjs.org/guide/services

Alok Sharma Over a year ago

@AndréClaudino - I have added more detail in my question and the reason why it is not feasible for me to implement your suggestion. How are you doing this in your application?

mikeswright49 · Accepted Answer · 2015-06-17 17:04:56Z

0

You should be using multiple controllers and then using a common service shared between your services. Services in angular are singletons, so they can be shared over and over and over again, and will be common across the board, including between applications if you inject the shared functionality as another application.

var app = angular.module('firstApp');
app.service('myService', function(){
   var self = this;
   return{
       getValue: function(){return self.value},
       setValue: function(value){self.value=value}
   }
});
app.controller('firstController', ['myService', function(myService){.....}]);
app.controller('secondController', ['myService', function(myService){....});

var secondApp = angular.module('otherApp',['firstApp']);
secondApp.controller('otherController', ['myService', function(myService){.....}]);

more importantly, if its doing anything more than just storing values you can inject functionality for better testing!

edited Jun 17, 2015 at 17:04

answered Jun 17, 2015 at 16:53

mikeswright49

3,41622 silver badges22 bronze badges

2 Comments

mikeswright49 Over a year ago

@AlokSharma if you get stuck or have any questions on how to best structure, feel free to ask.

Alok Sharma Over a year ago

Thank you mikeswright49. As of now, i am following the structure as described in my question and using sessionStorage.setItem (and sessionStorage.removeItem to clear them up) to pass on the common data between two ng-app modules (because when i redirect from one ng-app to another, the $scope and $rootScope variables change. Also, since the page gets re-loaded, so, i couldn't use any javascript global variable). I will ask if i need help...

Collectives™ on Stack Overflow

angular.js modularization - multiple ng-apps?

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related