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.