Adopting  AngularJS in existing web app(Struts + Tomcat)

Posted on 2015-09-10
1 Endorsement
Last Modified: 2015-12-15
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.

Question by:dkim18
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
LVL 30

Expert Comment

by:Alexandre Simões
ID: 40971332
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!!

Author Comment

ID: 40971908
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
LVL 30

Accepted Solution

Alexandre Simões earned 500 total points
ID: 40972404
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.

PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now


Author Closing Comment

ID: 40974169
Thank you! It was very helpful...
LVL 30

Expert Comment

by:Alexandre Simões
ID: 41364608
Hi mate,
just came to add that I recently wrote an article that goes more in depth on this topic.


Author Comment

ID: 41372570
Thank you so much Alex. That is very helpful.

Featured Post

[Webinar] Learn How Hackers Steal Your Credentials

Do You Know How Hackers Steal Your Credentials? Join us and Skyport Systems to learn how hackers steal your credentials and why Active Directory must be secure to stop them. Thursday, July 13, 2017 10:00 A.M. PDT

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

You have this traditional web application that refreshes the whole page each time you navigate and you think it's a good time to convert it to a Single-Page approach. What should you know in advance? Read on, I'll guide you through it.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Viewers will learn about the regular for loop in Java and how to use it. Definition: Break the for loop down into 3 parts: Syntax when using for loops: Example using a for loop:
This video teaches viewers about errors in exception handling.
Suggested Courses

628 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question