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 <https://blog.novatec-gmbh.de/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 <https://medium.com/front-end-hacking/dynamically-add-components-to-the-dom-with-angular-71b0cb535286> except that's from within angular. This implies: from jQuery, tell angular that there is a new selector to bootstrap. -- You received this message because you are subscribed to the Google Groups "Angular and AngularJS discussion" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at https://groups.google.com/group/angular. For more options, visit https://groups.google.com/d/optout.
