0

I have an existing javaee application with multiple pages written in JSP.

My requirement is to create functionality on 3 independent pages with Angular 2.

So on each page , I will have a div that contains Angular2 component which performs CRUD operations on a specific tables. The rest of the page remains jsp.

the Angular functionality and pages are totally unrelated. For example one page is managing accounts, the other products, etc..

I am new to Angular2 so my questions are more about design and deployments.

1) Should I create 3 different Angular 2 apps for each functionality or one app with 3 components. If I do the latter, then what will my root component look like?

2) How to import the Angular2 app in the existing Javaee app? should I do compile.bundle and then copy the bundle?

As I mentioned, I am new to Angular2 so any guidance will be very helpful.

Improve this question

1 Answer 1

Reset to default
3

Angular is for "single page applications" and it's usually expensive to load it, but cheap to navigate when it's already loaded.

You can use Angular CLI for building and serving your apps. You will need the build - produced by "ng build" (Angular CLI command) to include in your war file and probably move the content of index.html to some of your JSPs.

Have you gone through the Angular tutorial (Tour of Heroes)? If not, give it a try, many things will get clearer for you.

Edit:

Maybe you could consider rewriting the existing JSPs in Angular, so it's all one application with routing. But if you really need to load it 3 times in JSPs, I would probably write just one application with four modules - three would represent the pages and would look like the AppModule. In main.ts, you would load a module according to the app configuration. The last module would be a code shared among them. This would make it easier to maintain than 3 separate apps.

Starting modules

In main.ts, you are starting the application by calling platformBrowserDynamic().bootstrapModule(AppModule). So you can import all modules and bootstrap just one of them. If you use Angular CLI, you can also import "environment" = configuration, so you can decide which module to load according to it.

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

Thank you , yes I have done the tutorial. I don't have a problem if this was a standalone app, but the integration part is the confusing thing. Do I need one build for all 3 Angular pages if each one is going into a different jsp?
I edited the answer to avoid writing a long comment.
Thank you so much, this is really helping. Just one quick clarification. I am not sure what you meant by "you would load a module according to the app configuration." If I have for example: Product module, customer module, order module. Each one of these modules will be displayed inside the Product.jsp, Customer.jsp and Order.jsp respectively. (Whenever the user clicks to open one of the jsp, the Angular module should also load in that page). All those are in the same Java app which has only one configuration.
I added that part to the answer.
If I bootstrap one module only, then what happens when the user clicks to open a page that require the second or third module that are not bootstrapped ? I cannot use environment because all 3 pages are part of the same application and they will be deployed in the same war file for the same environment. I need to find a way to "call" a module when the jsp page that contains this module loads.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.