How to use same Code base for multiple AngularJS projects

Question

This question is about code re-usability in angularJS.

Background info: My current application (application1) is using angularjs + kendo UI at the client side, it is in production now.

We are going to develop 4 more applications by using the same technologies. Functionalities of the 4 upcoming applications are almost 70-80% similar to the application1.

At this point, my management doesn't want to create a single application ( which consists the functionalities of all 5 application under one roof).

Current approach/goal is:

1.create 5 separate applications, and server-side also there are 5 different applications

2.reuse the client side code as much as possible

My current plan:

1. separate the common code and keep this code as part of the core module (app.js).

2. code refactoring - move to 'feature based directory' structure as suggested in this link.

3. create an angular module for each feature (approx 10 modules).

My doubt is - As I am going to use the same "common" code for all 5 applications (copy paste as of now),

How I can make this common code behave differently for different applications?

For example,

1. if application1, service call to /app1/gettasks or if application2, service call to /app2/gettasks, in this case, how I can pass app1/app2/app3... at runtime? Is this configurable?

2. In simple, how can i tell the applicationName to angular code? After that, I can check for applicationName like below... (pseudocode)

   if(applicationName == app1){
      //do app1 specific things
   }else if (applicationName==app2) {
      //do app2 specific things
   }
   

PS: At server side I am using Spring Boot.

Please post your ideas...

Update:

In my common code, there are services, directives and filters are there. for directives & filters - there is no application specific code

1. But, in Services, How can I make application specific REST URLs ?

2. While/after the user logged in, how the "common code" knows the current application name? whether it is application1 or 2 or 3?

Answer 1

One possible solution could be to -

• Maintain one 'config' property file per client app
• Use build tools like Grunt or Gulp to pre-process your html/js/css files according to these configuration values. Its basically a text-search-replace and conditional include.

E.g. https://github.com/jsoverson/grunt-preprocess