Sundararaj Govindasamy Sundararaj Govindasamy - 3 months ago 9
AngularJS Question

How to use same Code base for multiple Angular projects

This question is about code re-usability in angularJS.

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

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

At this point, my management don'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 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
    or if application2, service call to
    , 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...


In my common code, there are services, directives and filters are there.
for directives & filters - there are 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?


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.