Angular with Spring boot Getting started with Angular and Spring boot

This post will explain , how we can integrate spring boot rest api in angular js

Step 1 : We need to install angular js

Follow the steps to mention in the angular web site Angular set up

Basic commands used in angular application
npm install -g @angular/cli

Create a new angular js application

ng new employee-crud-client


Once application created then, now we need to create components, services, model classes to integrate with spring boot

Step 2: to create component - Go to src/app folder in command prompt


ng g c employee-list

We can write our entire crud operations logic inside employee-list component or we can create different components for different operations.

Once we create component , there were 4 files created

1. employee-list.component.ts - logic related to how to form request and after getting the response from service- spring boot api, how to massage and send it to ui
2. employee-list.component.html - plain html with angular script to display/action with response or user input
3. employee-list.component.spec
4. employee-list.component.css

Step 3: Once the above files created and now we need to configure these with angular components


1. app.module.ts - will have the components, which we created
2. app-routing.module.ts- will have the path details, to which path has to call the which component
3. app.component.html - will have the router-outlet, which internally call the routing-module and which will call the app.modules.ts

Step 4: This is important step, service to be created, which calls the spring boot api

ng g s employee

employee.service file will be created

this service consists of the logic , how we can call the rest api methods, This is called from the employee-list.component.ts


Step 5: We will create model class, it should be same like our pojo class in java

ng g class employee


Step 6: Once all the steps completed, then now we need to run the angular client.


ng serve
ng serve --open If there is no errors, then page directly will open in browser http://localhost:4200


Step 7 : For spring boot api application, see my previous employee crud operations with spring boot post.


Step 8: This way we can integrate our spring boot application with angular.

Thanks for viewing this post, if you have any difficulty while integration, please comment the same.

Convert Date to Number and Number to Date in Oracle

How we can convert date to number in oracle

select to_number(to_char(add_months(sysdate,-0),'yyyymm')) from dual;

How we can convert number to date

select to_char(to_date(202007,'yyyymm'),'dd-mon-yyyy') from dual;