CODEWITHSUNDEEP
angularjs
Prateek Goel
Prateek Goel

Reputation: 23

Can we have multiple application under single umbrella in angular

I need to design a application where i have 1 parent application and under that application I have more 5 more application .

for eg.

Parent -- child1 -- child2 -- child3

and based on user subscription i have to enable only those applications that user subscribed for.

Each child application has its own UI/UX based on user choice (like theme icons , logo etc.) .

Upvotes: 1

Views: 155

Answers (1)

CozyAzure
CozyAzure

Reputation: 8468

Angular doesn't have the concept of "app" or "application", because a good (better) practice is always to have one app running at a time. To quote from the docs:

While it's possible to bootstrap more than one AngularJS application per page, we don't actively test against this scenario. It's possible that you'll run into problems, especially with complex apps, so caution is advised.

But that doesn't mean you can't customize your app, because Angular provides abstractions through other different ways.

One good way to do it is to model your application into multiple modules and use the handy Depedency Injection pattern. Taking your scenario as an example, you have a Parent module which is the overall governing module to bootstrap the application, and Child1, Child2 and Child3 modules that is injectable into Parent module based on the user configuration. Something like this:

(function() {

  //declare the child modules:
  angular.module('child1', []);
  angular.module('child2', []);
  angular.module('child3', []);

  //User Settings, set by server configuartion .
  var userSettings = {
    "userId": 1,
    "modules": ['child1', 'child3']
  };

  //bootstrapping the Parent module, where only child1 and child3 module is injected
  angular.module('Parent',[userSettings.modules])

})();

For the above method, you would need a really good architectural structure to keep track of what is injected and what is not, so that your development work can be at ease and you don't keep running into $injector:unpr error.

Another good way to do your configuration settings is at, well.. at the config phase. At config phase - where you inject all the providers, you can have literally all the free will to "configure" your app. The only hard part is you will have to write your modules and providers in such a way it is configurable. A lot of 3rd party Angular modules provides such flexibility. UI Bootstrap is one of them. Say for example, I let the user have the flexibility to either "show weeks" in ui.bootstrap's calendar,or to hide it. I could have written my code as below:

//User Settings, set by server configuartion .
var userSettings = {
  "userId": 1,
  "modules": ['child1', 'child3'],
  "showWeeks": false
};

angular.module('Parent')
  .config(['datepickerConfig', function(datepickerConfig) {
    datepickerConfig.showWeeks = userSettings.showWeeks;
  }]);

Oh, you mentioned about UI/UX changes?

For me, I would really want to do that in CSS and not at angular though, unless really necessary. Use CSS preprocessors, either SASS or LESS is good, where by you can write your CSS programitcally. You can write a customizable .scss or .less file, and then simply call @import and you are good to go. Of course, you can combine both the power of preproccesor and Angular's config phase. Angular Material for instance, let's you choose the pallete color via their provider functions:

angular.module('myApp', ['ngMaterial'])
.config(function($mdThemingProvider) {
  $mdThemingProvider.theme('default')
    .primaryPalette('pink') //choose the primary color as pink!
    .accentPalette('orange'); //choose the accent color to be orange!
});

As you can see, it really boils down on how you want to architect your code base, and to what extent you wanna give the flexibility to let the user customize the app. Don't forget about server side configuration too (user credentials, DB connection strings, etc)! There is no right or wrong answers here, just which one you are more comfortable :)

Upvotes: 1

Related Questions