Adopting  AngularJS in existing web app(Struts + Tomcat)

dkim18 used Ask the Experts™
Hi Experts,

I am trying to adopt AngularJS in our existing web app(Struts + Tomcat) and I am trying to figure out if I can deploy AngularJS app on the same domain.
I googled about these topics, but they don't quite match our existing web app environment.(We don't use Maven nor web app server.)
So, we still using Struts(1.2) and we have been using JavsScript a lot and jQuery here and there. We create WAR file to deploy in linux box and this is intranet web app.

Any input/comment is welcome.

Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Alexandre SimõesManager / Solutions Architect

Sure you can.
I already did the same but on an application based on Play Framework

Struts is an MVC framework so you can start using it as your "web API" for Angular.
This is, in my opinion, the safest path for a migration like yours.
On subsequent projects we used RestEasy to build our REST API.

One of the big changes is that your views will no longer be served by Struts, Angular routing system will take care of that.
So basically you need to migrate all your Struts views and the model-view link in your controllers to Angular.
In the Struts controller you leave the methods that interact with data (mainly your CRUD).
It's also at this server-side level that you have to keep the security trimming.

This is hard work but a nice path towards single-page app.

Security will also be tricky, specially if you need login page.
I might recommend you to keep the login page outside the single-page scenario at first, and once logged in redirect the user to the angular main page.
Once everything is working, then you can focus on getting rid of the login full page refresh.

Well, this list could be long... I'm actually planning to write about all the pitfalls of this type of migration.

It's very important that you make sure you fully understand Angular before jumping into this.

Good luck!!


Alexandre Simões,

Thanks for sharing your experience. will be a big burden that we have to define all view models again in JavaScript and those big changes for our project that have been developing/maintaining/updating for last 10 years. (In the Struts controller, there are over 4000 lines.)

Nobody in our team has AngularJS /single page application experience, but we pretty much decided that this is the way to improve user experience.

Do you think it is possible to start and adopt AngularJS partially? I am trying to apply this in complex page that need to be improved.

thanks again
Manager / Solutions Architect
You can adopt it partially but you have to clearly define your strategy.

Phase 1: Split the controllers
One good way is to keep the single-page paradigm aside at first and migrate the views, one by one to Angular. Doing it like this, the pages will keep being delivered by Struts but all the dynamic elements will be rendered with Angular. The site will keep on working and some views will be Angular others are Struts and changing views will still trigger a full page refresh.
During this process you'll be "forced" to clean-up your controllers and make new ones that return json instead of HTML. These will be the ajax endpoints of you angular service that will handle all the $http requests.
You'll end up with one controller method to deliver the html view and a bunch of other methods that implement the necessary CRUD.
I advise to prefix all the CRUD routes with /api/..., this will help you isolate the routes that return JSON from the ones that return HTML.
No pressure, take your time.
Meanwhile, new screens and improvements should be done directly in Angular.

Phase 2: Start managing state with Angular
This will take you some time to figure out and debug.
Basically you'll need to move all the user state to Angular, more specifically into a separate angular service/factory that will be used by all Angular controllers.
It's this mechanism that will allow you later to hit F5 in the browser and still get the needed logged in user information and permissions.
You achieve this by adding a controller on the server that you can do an AJAX call and retrieve this information.

Phase 3: Add ng-route
Once all the views are converted and are able to manage their state, it's time to add ng-route to the mix.
It's not mandatory but this should ideally be a one shot mission for all views. If all the above is completed, it ywon't take you that long.
What you need to do here is to drop all the controller methods that render html leaving only one that delivers the main page.
Move all your views routing logic to Angular leaving only the api routes in Struts (if you prefix them like I said above, they will be easy to identify.

Phase 4: The login page
In all this I never mentioned the login page and it was on purpose.
You can leave this one to the end because doing a full page refresh every time you login/logout will be useful to clean up some nasty global and badly written javascript you might have.
Moving the login page into the single-page paradigm means that you don't do a form post to login, you do it by ajax request and you need to populate your previously done state service (Step 2).
You also have to clean this info once you logout or you get a 401 from the server and redirect to the login view.

Ok, I think I'm done here :)
It's quite a lot of text but there's still a lot more to consider, specially on the Angular side.
I can't stress more this idea that you should really take some advanced trainings on JavaScript and Angular before doing this.

I recommend the following books:
Secrets of a JavaScript Ninja
High Performance JavaScript

Online training:

Coding guidelines:
Even if you might not agree with everything here, having a style guide is better than not having any. So I would advise you to fork from this one and do your modifications if needed.John Papa Angular Style Guide

Wax on, wax off...
Train your team and put everyone on the same page before starting this. It will save you a lot of debugging hours.

Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!


Thank you! It was very helpful...
Alexandre SimõesManager / Solutions Architect

Hi mate,
just came to add that I recently wrote an article that goes more in depth on this topic.



Thank you so much Alex. That is very helpful.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial