Let’s start by creating a “spring starter” project and add “spring web” dependency to it. Create a controller class:
@RestController is a combination of @Controller and @ResponseBody. It annotates that this class is a spring component and allows handling of HTTP request using REST API.
@RequestMapping is used for mapping web request to the handler method.
Go to http://localhost:8080. Port 8080 is default for spring server but you can change it in application.properties file by setting the server.port=****.
Next step is to write a service that is going call an external API and its data can also be manipulated here. Create a service class:
@Service annotation indicates that this bean contains business logic.
I have used https://api.zippopotam.us/us/ for the URI.
Now add the mapping for this service in the controller class
@Autowired is the annotation for dependency injection, here it injects the service bean.
@GetMapping is same as request mapping for get request.
@pathVariable annotation is to handle template variables in the request URI mapping.
Now go to http://localhost:port/find/5 digit number. We are done with the implementation of REST API.
In this section, we are going to create UI for the application using Angular.
Using Angular CLI, you can create a project “ng new ProjectName” in your workspace using command line. Select “cd ProjectName” and run it with “ng serve” command. Go to http://localhost:4200.
Generate model class using “ng generate class ModelName — type=model” and populate the model using the same fields as of REST API.
Next generate service class using “ng generate service ServiceName”. The service class is going to call the Rest API.
@Injectable is a decorator to mark service class so that service can be injected on creation.
Observable provides support for passing values between parts of application.
The getZipDetails()method performs http get request and returns an observable instance of type Zip.
Now you can add the code to the main component or you can create a new component “ng generate component ComponentName”.
component.ts class:
You have to call subscribe() method to execute the observable instance and to start listening for the updates.
Create the template in component.html class.
[(ngModel)] is a property directive for two-way data binding, it makes sure that the value in the UI always syncs back to the domain model. You can add style to component.css file the way you like.
The last thing is to add @CrossOrigin(origins =“http://localhost:4200") to the spring controller class. This annotation enables Cross-Origin Resource Sharing(CORS) on the server.
Here are some screen shots after adding validations:
GitHub repo for the complete code : pooja-mehra/Explore: Spring REST API + Angular application using External API or Mongo (github.com)
Explore and Learn!
