Handling multiple modules in angular dart - dart

Question

I'm creating a website for a company which has 3 different firms. The domain hence will have 3 sub-domains like this:
www.example.com
firm1.example.com <-> www.example.com/firm1
firm2.example.com <-> www.example.com/firm2
firm3.example.com <-> www.example.com/firm3
The firms will not share code between each other. Each firm has its own db hosted on the same server. Each firm will have a link to main page ie, www.example.com.
I decided to create one module for each firm and a main module which will be called from main.dart. Now how and when do I call the second module. While doing so, I'm not understanding the necessity of having a module over controller.
Is this right to modularize the app in this scenario?
What are the advantages of having multiple modules?
Should we use one router for each module? The reason I ask this is that in the future if I plan to remove firm3 and put it in a separate domain which will no longer be sticking to the main application, then I will have to remove the corresponding routes from the router which is unlikely for a modularized app.

Answer 1

A module is for combining a group of type registrations for the injector. Usually you also have several modules even when you have only one company.
Have a look at this example: https://github.com/akserg/angular.dart.ui/blob/master/lib/carousel/carousel.dart
This is a Carousel component which consists of two components which are always used together and which depends on the TransitionModule.
The CarouselModule allows you to register all those types with just install(new CarouselModule);
A module has nothing to do with program logic, it is more for registering a group of Angular components, directives, services, ... at once.
A controller is all about program logic.
What are the differences between these three companies?
You could create three different apps and move the code you want to reuse between these apps in a package and import this package from these three apps.
Update
If the 3 apps share no code it doesn't make any sense to put them in one application.
You can use virtual directories functionality of the web server you are using.
What you get is a dependency between applications that have otherwise nothing in common (besides being served from the same server).
You have to cope with code size. Each user loads the code for 3 apps even though he wants and can only use 1/3 of this.
In Dart it is not so easy to load code on demand (at least not yet).
Summary: Your approach has no advantage and serius disadvantages. Create three independent apps instead.

Answer 2

Modules are not the same thing as Controllers. A module holds all of the parts of your application. That includes Controllers, Services, Directives, etc. A Controller is only one thing that belongs to a Module. A Module not only holds parts of your application, but it also allows each of the pieces to find each other. Modules are the basis of dependency injection.
So you have 3 different firms within a single company. Are those firms apart of the same domain? Are they separate websites or a single website? If each firm has their own domain or separate websites you will have no choice but to separate them into separate angular apps. A single page application cannot span multiple domains.
If you are defining routers per module then you're looking having separate applications. You can define 3 separate modules and import them into a Main application, but the Main application would define the router. I'm not entirely sure you can have multiple routers per app in separate modules. I can't find any examples of that. In theory maybe, but it seems like it would be difficult to maintain.
But only given what we know it's hard to make any more recommendations because how the 3 firms interact isn't really known. Will they share code? Do they have to be all in a single page application or can you split them into separate html pages each with their own angular app?
Updated:
So I would separate each firm into their own App with their own router. I would make them each a separate single page app. You can choose to share code or not. My application consists of multiple single page apps and I share code between them. Here is how I do it:
var RegistrationApp = angular.module("RegistrationApp", ["ngResource",'ui.bootstrap',"ngRoute", "ngAnimate"]);
var App = RegistrationApp;
Then in any other type of thing I define I use the global variable App like so:
App.factory("RegistrationService", function($http) {
By having the global variable App defined in all of my applications that I build I can share code simply by including those components in with the app the client is loading and it'll pull in that code into that App's module.
Login will be something the server side does and it will drop a cookie on your browser so each app technically could use that authentication provided the cooke maps to the domain. If you have separate URLs for each firm (ie firm1.company.com, firm2.company.com, firm3.company.com) you have to be careful how that cookie is defined because by default if you login under say www.company.com that cookie will not be seen by firm1,firm2,firm3 because those are different domains. You'll have to set a cookie for .company.com so subdomains can see it. But if you do it right login won't require communication between firms/Apps.

Answer 3

I think the easiest would be to manage that at webserver level.
If I understood well, you have 4 independent sites:
www.example.com
firm1.example.com
firm2.example.com
firm3.example.com
I you are using Apache, that would mean different 4 virtual hosts. Then, you just need to redirect www.example.com/firmN to firmN.example.com using, for instance, .htaccess.
Alseo, security-wise, this method allows to have the data of each company in a separate container, if once you have an attack in one site, you don't want the attacker to have access to all the other sites.