Moving JSP/Spring MVC/jQuery application to Angular

[Jonas Andersson]

We have a hybrid legacy application consisting of use-cases implemented as Spring MVC, jsp and jQuery. Each use-case is a SPA built from “components” made up of jsp/jQuery. Each component is loaded dynamically using innerHTML + AJAX.

We want to start rewriting this application one piece at a time, and the preferable route is to create Angular components at the innermost level, and then aggregate them outwards until each use case is a homogenous Angular application.

This means that we bootstrap at least two root components, whose selectors are placed in the jsp until the jsp are “starved to death” (months later) and replaced by plain html. We use the technique described in Angular 2 in a multi-page application for this.

We could use iframes to do the above, but we would prefer not to, since every iframe-replacement would bootstrap a new Angular application every time the DOM changes, and communicating between them then get’s harder.

Another solution is to bootstrap all used angular-components initially and then use css to move each component in place, overlaying the result from the AJAX-loaded jQuery-component (now empty). This is our best bet so far, but requires some tedious work.

Are there other viable options?

For example; is it possible to dynamically add angular components when selectors appears in the DOM “outside” the angular root application, similar to Dynamically add components to the DOM with Angular except that's from within angular. This implies: from jQuery, tell angular that there is a new selector to bootstrap.

[Sander Elias]

Hi Jonas,

This is possible now and is similar to what the angular docs pages do. However, it needs quite some setup and also tedious work.

Your best bet is checking out the Angular Labs that is about web components. see this video

Regards

Sander

[Jonas Andersson]

Web components looks very interesting!

What we ended up doing (so far) is bootstrapping angular-components initially, but hidden. Then use jQuery to move each component to the updated part of the DOM after the AJAX-call.
Work's great and keeps the angular code clean.

To pass parameters to angular we use the angular router with hash strategy. Will migrate to push-based when the application is plain Angular.

// Jonas

[Sander Elias]

Hi Jonas,

Rob did a new talk on Angular Elements during AngularConnect. I have been talking to him, and this is going to be even better as I expected. I don't have a link, but check out the AngularConnect youtube feed, and see the talk!

Regards

Sander

[Jonas Andersson]

Thank's for the tip! My collegue was actually at that talk! Looks very promising, I will definitely have a look!

He was also able to confirm with some google folks that our approach is sound which felt very reassuring.

Thanks again for your replies!

// Jonas

--
You received this message because you are subscribed to a topic in the Google Groups "Angular and AngularJS discussion" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/qx2acuyn2oM/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+unsubscribe@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[Sander Elias]

Hi Jonas,

Hmm, Was that in the office-hours room? I think I was following that discussion ;)

Regards

Sander

[Jonas Andersson]

:)

Not sure, will ask him on monday! 

// Jonas

--