Solved

Adopting  AngularJS in existing web app(Struts + Tomcat)

Posted on 2015-09-10
6
512 Views
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.

thanks,
1
Comment
Question by:dkim18
  • 3
  • 3
6 Comments
 
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!!
0
 

Author Comment

by:dkim18
ID: 40971908
Alexandre Simões,

Thanks for sharing your experience.
Yeah...it 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
0
 
LVL 30

Accepted Solution

by:
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:
http://www.pluralsight.com/courses/angularjs-in-depth

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.

Cheers!
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Closing Comment

by:dkim18
ID: 40974169
Thank you! It was very helpful...
0
 
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.

http://www.experts-exchange.com/articles/22859/Converting-your-web-app-to-Single-Page-with-AngularJS.html

Cheers,
Alex
0
 

Author Comment

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

Featured Post

How Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
import as existing maven project 3 33
Html split(text) 2 26
Getting selected value using Jquery 3 18
what should i learn? javascript or typescript? 3 32
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.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
Video by: Michael
Viewers learn about how to reduce the potential repetitiveness of coding in main by developing methods to perform specific tasks for their program. Additionally, objects are introduced for the purpose of learning how to call methods in Java. Define …
Viewers will learn about the different types of variables in Java and how to declare them. Decide the type of variable desired: Put the keyword corresponding to the type of variable in front of the variable name: Use the equal sign to assign a v…

685 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