CODEWITHSUNDEEP
javaangular
daoud175
daoud175

Reputation: 126

Angular 2 with existing Java application

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.

Upvotes: 0

Views: 1206

Answers (1)

Ján Halaša
Ján Halaša

Reputation: 8421

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.

Upvotes: 3

Related Questions