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.