CODEWITHSUNDEEP
javaangularrestnetbeansweb-applications
Felix
Felix

Reputation: 1810

Angular 5 client for Java RESTful Web Service application (in Netbeans IDE)

There must be thousands of pre-existing Java apps that would benefit from interacting with a web based GUIs / web apps. Thus, Java as a back end must make lots of sense to many for these Java (server end) programs.

Netbeans offers a greatly automated approach for generating both, servlet and client skeleton code base.

You can consume the servlet data with again an auto-generated example - see steps below.

BUT,

After substantial research it appears that Angular would be the best fitting design strategy for my front end web apps. So, I am starting with Angular and am getting the grasp of its core functionality (I know, still a way to go).

I would like to use an Angular 5 client/web app solution for communicating with the Java RESTfull servlet - without additional frameworks (Spring, Hibernate, etc...) . I have tried several approaches I found, but each just adds to more confusion.

Would you please post a simple solution that would allow for CRUD interaction of an Angular 5 based client/web app with the given Java RESTfull servlet? I am sure many would benefit from this sample. Thank you.

Here is a sample of the servlet and non-Angular client, both of which work nicely without writing a single line of Java or JS code.

RESTful Servlet in NetBeans 8.2

Servlet example: here and similar: here

RESTful JavaScript Client in NetBeans 8.2

  1. To Generate RESTful Web JavaScript client:, complete the following steps. a. Select: PlayerServer project - right click. b. Select: New - Other c. Select: HTML5/JavaScript d. Select: RESTful JavaScript Client e. Fill in the fields of the wizard

    • provide coresponding file names for your js and html files. f. If you want an HTML table to be generated for the data table from the db, select: Choose resulting UI: and in it: Tablesorter UI (You may need to add this line to the genrated XXX.html file: )

  2. Test by selecting the generated html file in the project, right click and select: Run file.

I tried using Angular with this code in: app.component.ts, but it does generate an error.

"Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8080/PlayerServer/webresources/com.playerentity.player. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing)."

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent implements OnInit {
  title = 'app';
  results = '';
  constructor(private http: HttpClient){
  }
  ngOnInit(): void {
    this.http.get('http://localhost:8080/PlayerServer/webresources/com.playerentity.player').subscribe(data => {
      console.log(data);
    });
  }
}

Upvotes: 0

Views: 1151

Answers (1)

Felix
Felix

Reputation: 1810

Interesting how the universe works. After days of digging I figured out the solution shortly after posting my request for help.

Here it is for those interested. The Angular code above works fine if you address CORS on the web server:

CORS - cross-origin resource sharing.

Cross-Origin Resource Sharing (CORS) is a specification that enables open access across domain-boundaries.

Before we create an Angular (or any other client outside your server project) we need to address CORS, since you will likely be working on at least 2 domains:

    http://localhost:8080/  and
    http://localhost:4200/  (Angular)

It can be done on the server end, or the client end.

For our project the easiest way is to enable CORS on the server project like this:

1. Right-click your project
2. New > Other > Web Services > Cross Origin Resource Sharing Filter
3. Wizard opens
4. Enter package name - e.g: com.cors
5. Adjust class name - e.g> CrossOriginResourceSharingFilter or simply CorsFilter
6. Save

That should take care of CORS / cross-domain data handling,.

Then generate an Angular app and add the above piece of code to script file: app.component.ts or where you see best fit and the Angular client should fetch your data from the server.

Happy coding.

Upvotes: 1

Related Questions