CODEWITHSUNDEEP
angularjspspring-boot
Thomas
Thomas

Reputation: 33

How to integrate Angular 4 with an existing Spring Boot jsp based web app?

I have an existing Spring Boot production web app, utilizing jsp and javascript. I would like to replace existing pages (one or 2 at a time), with Angular as time permits. I am new to Angular, and all the doc/posts that I've encountered seem that Angular is an all or nothing scenario. For starters, how would I go about replacing a page in the app which can be found at this address /cust/AccountSampleQuery?active=y ? The user is authenticated at this point, and has selected this address from a menu.

Upvotes: 2

Views: 3495

Answers (1)

Prav
Prav

Reputation: 2894

Angular is kind of easy to integrate with Spring RESTful api if you're writing it fresh, but its not impossible to integrate in your case. Angula work on the same principal as AJAX but more OOP look to it like Java.

You will need to replace your existing JSP approach with rest API approach, where you have rest controllers to handle incoming web requests (JSON for post and query params and path variables) and response back with HttpStatus codes and JSON objects.

The authentication has to be replaced with something like JWT or any kind of token based authentication. As Angular is hard to run session based and more like token based. So every request must accompany a token if it is going to a secure part of the API.

The if you wish to package the Angular app along side Spring API (.jar or .war file), you're going to need WebMvcConfigurerAdapter to configure static content paths. Here's an example static content path:

public class WebConfig extends WebMvcConfigurerAdapter {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/**")
                .addResourceLocations("classpath:/static/");
        registry.addResourceHandler("**/assets/**")
                .addResourceLocations("classpath:/static/assets");
    }

    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addViewController("/").setViewName("redirect:/index.html");
    }
}

const appRoutes: Routes = [
  {path: 'customer', component: CustomerComponent},
  {path: 'admin', component: AdminComponent},
  {path: '**', redirectTo: ''}
];

@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes, {useHash: true})
  ],
  exports: [
    RouterModule
  ]
})
export class AppRoutingModule {

}

Upvotes: 2

Related Questions